{% extends 'base.html' %}

{% load markdown_extras %}

{% block content %}

<div class="row justify-content-between my-4">
    <div class="col">
        {% for tn_url, tn_filename in resource.thumbnails %}
        <div>
            <img class="image-fluid float-start rounded mx-1" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
        </div>
        {% endfor %}
    </div> 
    <div class="col">
        <div class="row">
            <div class="col">
                <h2 class="my-1">{{ resource.name }}</h2>
            </div> 
        </div>
        <div class="row">
            <div class="col">
                <p class="my-1">{{ resource.main_resource_category }}</p>
            </div> 
        </div>
        <div class="row">
            <div class="col">
                <p class="my-1">{{ resource.age_range }}</p>
            </div> 
        </div>
        <div class="row">
            <div class="col">
                <p class="my-1">Number of PDF files: {{ resource.pdf_filenames|length }}</p>
            </div> 
        </div>
        <div class="row">
            <div class="col">
                <h4>Product summary</h4>

                <p>{{resource.card_description}}</p>
            </div> 
        </div>
        <div>
            <div class="my-4 d-flex justify-content-center">
                <button class="btn btn-primary w-100"> 
                    Add to cart 
                </button>
            </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 %}