path: root/pyblackbird_cc/templates/resources/resource_detail.html

{% extends 'base.html' %}

{% load markdown_extras %}

{% block content %}
    <div class="container">
    <div class="row my-4">
        <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
            <h1 class="mb-4">{{ resource.name }}</h1>
            <div class="d-flex flex-row justify-content-between my-3">
                <div>
                    <span class="fw-bold">Subject:</span> {{ resource.main_resource_category }}
                </div>
                <div class="px-2">
                    <span class="fw-bold">Age range:</span> {{ resource.age_range }}
                </div>
                <div class="px-2">
                    <span class="fw-bold">Resource type:</span> {{ resource.resource_type }}
                </div>
                <div class="px-2">
                    <span class="fw-bold">Number of files in this resource:</span> {{ resource.pdf_filenames|length }}
                </div>
            </div>
            <div class="d-flex flex-row justify-content-between my-3 flex-wrap">
                <div>
                    <span class="fw-bold">Created:</span> {{ resource.created|date:"D d M Y" }}
                </div>
                <div>
                    {% if request.user.is_authenticated and request.user.is_staff %}
                        <a href="{% url "resources:resource_update_metadata" resource.id %}"
                           class="text-danger">Edit this resource</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <div class="row my-4">
        <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
            <h4>Feature images</h4>
            <div class="d-flex flex-row justify-content-between">
                {% for tn_url, tn_filename in resource.thumbnails %}
                    <div class="m-2">
                        <img class="img-fluid rounded" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Here be the carousel stuff -->

    {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
        <div class="row my-4">
        <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
            {% if resource.snapshot_urls.items|length > 1 %}
                <h4>File preview {{ forloop.counter }}: {{ snapshot_filename|cut:".pdf" }} </h4>
            {% else %}
                <h4>File preview: {{ snapshot_filename|cut:".pdf" }}</h4>
            {% endif %}

            <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">

                    {% for snapshot_url in snapshot_urls %}
                        {% if forloop.first %}
                            <!-- We must have an active class otherwise the carousel will not show up -->
                            <div class="carousel-item active">
                        {% else %}
                            <div class="carousel-item">
                        {% endif %}
                    <img src="{{ snapshot_url }}" class="d-block w-25 mx-auto img-thumbnail rounded"
                         alt="{{ snapshot_name }}">
                    </div>
                    {% endfor %}
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
                            data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
                            data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
                {% if request.user.is_authenticated and request.user.is_staff %}
                    <div class="d-flex justify-content-between my-2 p-2">
                        <a href="#" class="btn btn-primary btn-sm" type="button">Replace</a>
                        <a href="#" class="btn btn-danger btn-sm" type="button">Delete</a>
                    </div>
                {% endif %}
            </div>
        </div>

    {% endfor %}


<div class="row my-5">
    <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
        <div>{{ resource.description | markdown | safe }}</div>
    </div>
</div>
<div class="row">
    <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
        <div class="resource-download-panel">
            <h4>Download the resource</h4>
            <div>
                Click
                <button hx-get="/hx-download-btn?rn={{ resource.pdf_filename }}"
                        hx-target="next #download-reveal">here
                </button>
                to download the resource
            </div>
            <div id="download-reveal"></div>
        </div>
    </div>
    <div>Logged in as {{ request.user.username }}</div>
</div>
</div>
{% endblock content %}