{% 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">£{{ resource.price|floatformat:2 }} (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">
                {% if resource.in_cart %}
                    <form action="{% url 'payments:add_to_basket' resource.id  %}" method="get" accept-charset="utf-8">
                        <button class="btn btn-primary" disabled>
                            In basket
                        </button>
                    </form>
                {% else %}
                    <form action="{% url 'payments:add_to_basket' resource.id  %}" method="get" accept-charset="utf-8">
                        <button class="btn btn-primary">
                            Add to basket
                        </button>
                    </form>

                {% endif %}
            </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 %}