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

{% extends 'base.html' %}

{% load markdown_extras %}

{% block content %}

<div>
    <div>
        {% for tn_url, tn_filename in resource.thumbnails %}
        <div>
            <img src="{{ tn_url }}" alt="{{ tn_filename }}"/>
        </div>
        {% endfor %}
    </div> 
    <div>
        <div>
            <div>
                <p>{{ resource.name }}</p>
            </div> 
        </div>
        <div>
            <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>
            {% if resource.pdf_filenames|length > 1 %} 
                <p>Contains {{ resource.pdf_filenames|length }} PDF files.</p>
            {% else %}
                <p>Contains {{ resource.pdf_filenames|length }} PDF file.</p>
            {% endif %}
        </div>
        <div>
            <p>£{{ resource.price|floatformat:2 }} (or 1 credit)</p>
        </div>

        <hr>

        <div>
            <div>
                <p>Product summary</p>
                <p>{{resource.card_description}}</p>
            </div> 
        </div>
        <div>
            <div>
                {% if resource.in_cart %}
                    <form action="{% url 'payments:add_to_basket' resource.id  %}" method="get" accept-charset="utf-8">
                        <button>
                            In basket
                        </button>
                    </form>
                {% else %}
                    <form action="{% url 'payments:add_to_basket' resource.id  %}" method="get" accept-charset="utf-8">
                        <button>
                            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="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>
    <div>
        <h4>Product detail</h4>
        {{ resource.description | markdown | safe }}
    </div>
</div>

{% endblock content %}