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

{% extends 'base.html' %}

{% load markdown_extras %}

{% block content %}

<div class="row my-4">
    <div class="col-md-7">
        {% for tn_url, tn_filename in resource.thumbnails %}
        <div>
            <img class="img-fluid rounded mx-1" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
        </div>
        {% endfor %}
    </div> 
    <div class="col-md-5">
        <div class="row">
            <div class="col">
                <p class="my-1 fw-bold fs-3">{{ resource.name }}</p>
            </div> 
        </div>
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <p class="boo-magenta my-1 fw-semibold fs-5">{{ resource.main_resource_category }}</p>
            </div> 
            <div>
                <p class="text-secondary my-1 fw-semibold fs-5">{{ resource.age_range }}</p>
            </div>
        </div>

        <div class="col">
            {% if resource.pdf_filenames|length > 1 %} 
                <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF files.</p>
            {% else %}
                <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF file.</p>
            {% endif %}
        </div>
        <div class="col">
            <p class="fs-3 fw-semibold">£1.50 (or 1 credit)</p>
        </div>

        <hr>

        <div class="row">
            <div class="col">
                <p class="my-1 fw-semibold fs-5">Product summary</p>
                <p>{{resource.card_description}}</p>
            </div> 
        </div>
        <div class="row align-items-end">
            <div class="my-4 d-flex justify-content-center">
                <form action="{% url 'resource:add_to_cart' %}" method="get" accept-charset="utf-8">
                    <button class="btn btn-primary w-100"> 
                        Add to cart 
                    </button>
                </form>
            </div>
        </div>
    </div> 
</div>

<!-- Here be the carousel stuff -->
<!-- except we are doing away with the carousel in this design -->
<div class="d-flex justify-content-start">
    {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
    {% for snapshot_url in snapshot_urls %}
    <div>
        <img src="{{ snapshot_url }}" class="d-block mx-auto img-thumbnail rounded" alt="{{ snapshot_name }}">
    </div>
    {% endfor %}
    {% endfor %}
</div>

<!-- detailed description row -->
<div class="row py-4">
    <div class="col-12">
        <h4>Product detail</h4>
        {{ resource.description | markdown | safe }}
    </div>
</div>

{% endblock content %}