{% extends 'catalogue/category.html' %}
{% load i18n %}
{% load catalogue_tags menu_tags thumbnail %}
{% block title %}Drip Coffee Bags - Specialty & Gourmet Coffees{% endblock %}
{% block body_class %}category hook-bags{% endblock %}
{% block submenu %}
{% endblock %}
{% block content %}
    {% block category_header_image %}
        {{ block.super }}
    {% endblock %}
    <div class="container container-sm">
        <div class="row">
            <div class="col-12 mb-4 text-center">
                <h2>How it works</h2>
            </div>
            <div class="col-md-8 offset-md-2 text-center mb-5 video-container">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/cnDZ6rnCEHI" frameborder="0"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
            </div>
        </div>
    </div>
    <div class="container container-sm recommended-items">
        <div class="row">
            {% for product in recommended_items %}
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-12">
                            {% with image=product.primary_image %}
                                {% thumbnail image.original "300x300" upscale=False as thumb %}
                                    <img src="{{ thumb.url }}" alt="{{ product.get_title }}"/>
                                {% endthumbnail %}
                            {% endwith %}
                        </div>
                        <div class="col-12">
                            <h4>{{ product.get_title }}</h4>
                        </div>
                        <div class="col-12">
                            <div class="product_price">
                                {% include "catalogue/partials/stock_record.html" %}
                            </div>
                        </div>
                        <div class="col-12">
                            <a href="{{ product.get_absolute_url }}" class="btn btn-primary btn-hook">More info</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% block products_list %}
        {% if products %}
            <section class="container container-sm product-list-container">
                <div class="row card-columns row-eq-height">
                    {% for product in products %}
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">{% render_product product 'hook_bags' %}</div>
                    {% endfor %}
                    {% include "partials/pagination.html" %}
                </div>
            </section>
        {% else %}
            <div class="container">
                <p class="nonefound">{% trans "No products found." %}</p>
            </div>
        {% endif %}
    {% endblock %}
    <div class="space-2"></div>
{% endblock %}