{% extends 'base.html' %}
{% load static %}

{% block head %}
    <script defer src="{% static 'scripts/product_list.js' %}"></script>
{% endblock %}

{% block content %}
{% include 'partials/carousel.html' %}
<article>
    <div class="breadcrumbs">
        <menu>
            <li><strong><a href="{% url 'storefront:product-list' %}">Shop</a></strong></li>
            <span>›</span>
            <li><strong>{{ category }}</strong></a></li>
        </menu>
    </div>
    <section class="product__list">
        {% for product in category.product_set.all %}
            <a class="product__item" href="{% url 'storefront:product-detail' product.pk %}">
                <figure class="product__figure">
                    <img class="product__image product__with-img-swap" data-altimg-src="{{product.get_second_img.image.url}}" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                </figure>
                <div>
                    <h3>{{ product.name }}</h3>
                    <h5>{{ product.subtitle }}</h5>
                    <p>{{product.description|truncatewords:20}}</p>
                </div>
            </a>
        {% endfor %}
    </section>
</article>
{% endblock %}

