{% extends 'catalogue/category.html' %}
{% load catalogue_tags menu_tags static i18n %}
{% block title %}Specialty Coffee Subscription - Freshly Roasted Coffee Delivery to your Doorstep{% endblock %}
{% block submenu %}
    {% submenu %}
{% endblock %}
{% block content %}
    {% block category_header_image %}
        {{ block.super }}
    {% endblock %}
    {% block products_list %}
        {% if products %}
            <section class="container container-sm">
                <div class="row">
                    <div class="col-12 mt-3 mb-5">
                        <div id="legend"></div>
                        <div id="filter-coffee-options"></div>
                    </div>
                </div>
            </section>
            <section class="container container-sm product-list-container">
                <div class="row card-columns row-eq-height" id="coffee-list-container">
                    {% for product in products %}
                        <div class="col-xs-6 card-column col-sm-6 col-md-6 col-lg-4"
                             data-acidity="{{ product.attr.acidity }}"
                             data-country="{{ product.attr.country }}"
                             data-process="{{ product.attr.process }}"
                             data-type="{% if product.attr.premium %}premium{% else %}classic{% endif %}">
                            {% render_product product 'coffees' %}
                        </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>
    <div class="col text-center bg-primary footer-upsell d-flex justify-content-center">
        <h2 class="align-self-center">Looking for coffee for your office? </h2>
        &nbsp;
        <a  href="{% url 'business:home' %}" class="align-self-center btn btn-hook btn-outline-light">Get Started</a>
    </div>
{% endblock %}

{% block scripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'vendor/jquery-migrate/jquery-migrate.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/filtrify/filtrify.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/filter.js' %}"></script>

    <script>
        $('.confirm-more-info').click(function () {
            var user_preferences = $(this).attr("data-preferences");
            var next_url = $(this).attr("data-url");

            if (user_preferences == '' || user_preferences =='yes') {
                window.location=next_url;
                return false;
            }

            bootbox.confirm({
                message: "Do you want to add the coffee in you basket because you already dislike this coffee.",
                buttons: {
                    confirm: {
                        label: 'Yes',
                        className: 'btn btn-lg btn-primary btn-hook confirm-more-info waves-effect'
                    },
                    cancel: {
                        label: 'No',
                        className: 'btn btn-lg btn-primary btn-hook confirm-more-info waves-effect'
                    }
                },
                callback: function (result) {
                    if (result == true) {
                        window.location=next_url;
                    }

                }
            });

        });
        
    </script>
{% endblock %}