{% extends 'base.html' %}

{% load markdown_extras %}

{% block content %}

<div class="d-flex justify-content-between">
    <div class="border border-danger px-1">
        <p>This should be left.</p>
    </div>
    <div class="border border-danger px-1">
        <p>This should be right.</p>
    </div>
</div>


<div class="d-flex flex-wrap justify-content-start">
    <div class="border border-danger">
        {% for tn_url, tn_filename in resource.thumbnails %}
        <div class="m-2">
            <img class="image-thumbnail rounded mx-1" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
        </div>
        {% endfor %}
    </div> 
    <div class="border border-success">
        <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"> 
                    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>

<div class="row my-4">
    <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h1 class="card-title mb-0 text-center">{{ resource.name }}</h1>
            </div>
            <div class="card-body">
                <table class="table table-bordered mx-auto">
                    <tbody>
                        <tr>
                            <th>Subject</th>
                            <td>{{ resource.main_resource_category }}</td>
                        </tr>
                        <tr>
                            <th>Age range</th>
                            <td>{{ resource.age_range }}</td>
                        </tr>
                        <tr>
                            <th>Resource type</th>
                            <td>{{ resource.resource_type }}</td>
                        </tr>
                        <tr>
                            <th>Number of files</th>
                            <td>{{ resource.pdf_filenames|length }}</td>
                        </tr>
                        <tr>
                            <th>Created</th>
                            <td>{{ resource.created|date:"D d M Y" }}</td>
                        </tr>
                    </tbody>
                </table>
                <div class="my-4">
                    <h5 class="card-title bg-success text-white p-2">Resource Description</h5>
                    <div>{{ resource.description | markdown | safe }}</div>
                </div>

                <div class="d-flex justify-content-end">
                    {% 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>

<div class="row my-4">
    <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h4 class="card-title mb-0">Feature Images</h4>
            </div>
            <div class="card-body">
                <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>
    </div>
</div>


<!-- Here be the carousel stuff -->
{% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
<div class="row justify-content-center my-4">
    <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                {% if resource.snapshot_urls.items|length > 1 %}
                <h4 class="card-title mb-0 text-center">File
                    preview {{ forloop.counter }}: {{ snapshot_filename|cut:".pdf" }}</h4>
                {% else %}
                <h4 class="card-title mb-0 text-center">File preview: {{ snapshot_filename|cut:".pdf" }}</h4>
                {% endif %}
            </div>
            <div class="card-body">
                <div id="carouselPreview{{ forloop.counter }}" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        {% for snapshot_url in snapshot_urls %}
                        {% if forloop.first %}
                        <div class="carousel-item active">
                            {% else %}
                            <div class="carousel-item">
                                {% endif %}
                                <img src="{{ snapshot_url }}" class="d-block mx-auto img-thumbnail rounded"
                                                              alt="{{ snapshot_name }}">
                            </div>
                            {% endfor %}
                        </div>
                        <button class="carousel-control-prev" type="button"
                                                              data-bs-target="#carouselPreview{{ forloop.counter }}" 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="#carouselPreview{{ forloop.counter }}" 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>
        </div>
    </div>
    {% endfor %}

</div>
{% endblock content %}