{% extends 'catalogue/category.html' %}
{% load catalogue_tags i18n menu_tags static imagefit %}
{% block body_class %}category gift-vouchers{% endblock %}
{% block title %}Gift Vouchers - Send Credits To A Friend{% endblock %}
{% block submenu %}
    {% submenu %}
{% endblock %}
{% block content %}
    {% block category_header_image %}
        {{ block.super }}
    {% endblock %}
    <div class="container how-it-works">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center mb-4">How It Works</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-lg-3 text-center step">
                <div class="d-block">
                    <img class="text-center img-fluid mb-3"
                         src="{{ "gift-vouchers/howitworks1.png"|resize:'300x300,C' }}">
                </div>
                <div class="step-content">
                    <div class="d-block">
                        <span class="count">1</span>
                    </div>
                    <div class="d-block">
                        <h3 class="text-info">Chose a Gift Amount</h3>
                    </div>
                    <div class="d-block">
                        <p>
                            Purchase any amount of gift credits you want and once your order is complete, we’ll send you
                            a
                            lovely printable voucher to your email. Add a personalised message if you want!
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 text-center step">
                <div class="d-block">
                    <img class="text-center img-fluid mb-3"
                         src="{{ 'gift-vouchers/howitworks2.png'|resize:'300x300,C' }}">
                </div>
                <div class="step-content">
                    <div class="d-block">
                        <span class="count">2</span>
                    </div>
                    <div class="d-block">
                        <h3 class="text-info">Gift the Voucher</h3>
                    </div>
                    <div class="d-block">
                        <p>
                            Simply forward the gift voucher to your lucky recipient via email, or print and present it
                            personally to see them smile – you might even receive a giant hug, or a wet, sloppy kiss in
                            return!
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 text-center step">
                <div class="d-block">
                    <img class="text-center img-fluid mb-3" src="{% static 'images/gift-vouchers/howitworks3.png' %}">
                </div>
                <div class="step-content">
                    <div class="d-block">
                        <span class="count">3</span>
                    </div>
                    <div class="d-block">
                        <h3 class="text-info">Lucky Recipient Redeems the Gift</h3>
                    </div>
                    <div class="d-block">
                        <p>
                            When redeeming their coffee from our website, your lucky recipient has the flexibility of
                            choosing which coffee they'd like, how they'd prefer their coffee packed, and the delivery
                            frequency.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 text-center step">
                <div class="d-block">
                    <img class="text-center img-fluid mb-3" src="{% static 'images/gift-vouchers/howitworks4.png' %}">
                </div>
                <div class="step-content">
                    <div class="d-block">
                        <span class="count">4</span>
                    </div>
                    <div class="d-block">
                        <h3 class="text-info">Relax and Enjoy</h3>
                    </div>
                    <div class="d-block">
                        <p>
                            Your recipient's coffee will be delivered within a week of roasting, straight to their
                            mailbox, so all they have to do is sit back and relax! You too, can relax – after all, you
                            just gave the perfect gift.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col no-padding product-list-container mt-5">
        {% block products_list %}
            {% if products %}
                <section class="container">
                    <h1 class="text-center mb-5">Choose a package!</h1>
                    <div class="row card-columns">
                        {% for product in products %}
                            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 d-flex align-items-stretch">
                                {% render_product product 'gift_vouchers' %}
                            </div>
                        {% endfor %}
                        {% include "partials/pagination.html" %}
                    </div>
                </section>
                {% for product in products %}
                    <div id="add-to-cart-popup-{{ product.pk }}" class="d-none">
                        <div class="add-to-cart-popup">
                            {% include "catalogue/partials/add_to_basket_form_compact.html" %}
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="container">
                    <p class="nonefound">{% trans "No products found." %}</p>
                </div>
            {% endif %}
        {% endblock %}
    </div>
{% endblock %}
{% block scripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/gift_vouchers.js' %}"></script>
{% endblock %}