{% extends "base.html" %}
{% load static %}
{% load compress %}
{% load promotion_tags %}
{% load socialaccount %}
{% load sass_tags %}
{% load useragent %}
{% load customer_tags %}
{% load geoip_tags %}
{% load menu_tags %}

{% block styles %}
    {% comment %}
        If you are developing Oscar's CSS, or overriding Oscar's CSS
        files in your project, then set OSCAR_USE_LESS = True in your
        settings file. This will enable the on-the-fly less compiler.
    {% endcomment %}
    {% compress css %}
        <link rel="stylesheet" type="text/css" href="{% static "vendor/lightslider/dist/css/lightslider.min.css" %}"/>
        <link rel="stylesheet" type="text/css" href="{% static "vendor/rangeslider.js/dist/rangeslider.css" %}"/>
        <link rel="stylesheet" type="text/css" href="{% sass_src "scss/hookcoffee.scss" %}"/>
        <link rel="stylesheet" type="text/css"
              href="{% static "vendor/jquery-bar-rating/dist/themes/fontawesome-stars.css" %}"/>
        <link rel="stylesheet" type="text/css" href="{% static "vendor/pickadate/lib/themes/classic.css" %}"/>
        <link rel="stylesheet" type="text/css" href="{% static "vendor/pickadate/lib/themes/classic.date.css" %}"/>
        <link rel="stylesheet" type="text/css" href="{% static "vendor/rateyo/src/jquery.rateyo.css" %}"/>
    {% endcompress %}
{% endblock %}

{% block layout %}
    {% block messages %}
        <div class="full-wide alerts-header">
            {% include "partials/alert_messages.html" %}
        </div>
    {% endblock %}
    {% block navigation %}
        {% include "partials/nav_primary.html" %}
    {% endblock %}
    {% block submenu %}

    {% endblock %}
    {% block header_image %}

    {% endblock %}
    {# Main content of page - other layout templates may override this block #}
    {% block content_wrapper %}
        {% block breadcrumbs %}{% endblock %}
        {% block header %}
            <div class="page-header action">
                <h1>{% block headertext %}{% endblock %}</h1>
            </div>
        {% endblock %}
        {% block subnavigation %}{% endblock %}
        <div class="content">
            {% block subheader %}{% endblock subheader %}

            {# Render promotions #}
            <div id="promotions">
                {% for promotion in promotions_page %}
                    {% render_promotion promotion %}
                {% endfor %}
            </div>

            {# Div exists for AJAX updates to entire content section #}
            <div id="content_inner">{% block content %}{% endblock %}</div>
        </div>
    {% endblock %}
    <footer class="footer">
        {% block footer %}
            <div class="container footer-menu">
                <div class="row">
                    <div class="col-lg-9 footer-links">
                        <div class="row">
                            {% for menu in footer_menus %}
                                <div class="col-lg-3">
                                    {% simple_menu menu.slug %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-lg-3 footer-brand">

                        <div class="row">
                            <div class="col-6 col-sm-12">
                                <div class="clearfix">
                                    <img alt="Hook Coffee" class="img-fluid footer-logo mb-3"
                                         src="{% static 'images/logo.png' %}">
                                </div>
                                <h4 class="d-none d-sm-block">The freshest coffee you will ever make!</h4>
                                <h5 class="d-block d-sm-none">The freshest coffee you will ever make!</h5>
                            </div>
                            <div class="col-6 col-sm-12">
                                <h3 class="text-uppercase mb-1 mb-sm-2">Follow Us</h3>
                                <div class="row social-icons">
                                    <div class="col no-padding">
                                        <a href="#">
                                            <i class="fab fa-facebook-square"></i>
                                        </a>
                                    </div>
                                    <div class="col no-padding">
                                        <a href="#">
                                            <i class="fab fa-linkedin"></i>
                                        </a>
                                    </div>
                                    <div class="col no-padding">
                                        <a href="#">
                                            <i class="fab fa-instagram"></i>
                                        </a>
                                    </div>
                                    <div class="col no-padding">
                                        <a href="#">
                                            <i class="fab fa-youtube-square"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="space-1"></div>
                                <h3 class="text-uppercase mb-1 mb-sm-2">Email Us</h3>
                                <span class="d-sm-block d-none">
                                <a class="text-white" href="mailto:hola@hookcoffee.com.sg">hola@hookcoffee.com.sg</a>
                            </span>
                                <span class="d-block d-sm-none">
                                <a class="text-white small"
                                   href="mailto:hola@hookcoffee.com.sg">hola@hookcoffee.com.sg</a>
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container footer-copyright">
                <div class="row">
                    <div class="col">
                        <hr>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 text-left">
                        Copyright &copy; {% now "Y" %} Hook Coffee. All rights reserved.
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="#">Privacy Policy</a> | <a href="#">Terms & Conditions</a>
                    </div>
                </div>
            </div>
        {% endblock %}
    </footer>
    {% block extra_stuff %}
        {% country_selected as country_selected %}
        <div class="d-none">
            <div data-selected="{{ country_selected|lower }}" id="country_selector">
                {% country_selector %}
            </div>
        </div>
    {% endblock %}
{% endblock %}

{% block cdn_scripts %}
    {{ block.super }}
{% endblock %}

{# Local scripts #}
{% block scripts %}
    {{ block.super }}
    <!-- Twitter Bootstrap -->
    <script src="{% static "vendor/bootstrap/dist/js/bootstrap.bundle.min.js" %}"></script>
    <!-- Oscar -->
    <script src="{% static "oscar/js/oscar/ui.js" %}"></script>
    <script src="{% static "vendor/lightslider/dist/js/lightslider.min.js" %}"></script>
    <script src="{% static "vendor/jquery-lazy/jquery.lazy.min.js" %}"></script>
    <script src="{% static "vendor/rangeslider.js/dist/rangeslider.min.js" %}"></script>
    <script src="{% static "vendor/jquery.steps/build/jquery.steps.min.js" %}"></script>
    <script src="{% static "vendor/underscore/underscore-min.js" %}"></script>
    <script src="{% static "vendor/bootbox.js/dist/bootbox.min.js" %}"></script>
    <script src="{% static "vendor/Waves/dist/waves.min.js" %}"></script>
    <script src="{% static "vendor/bootstrap-input-spinner/src/bootstrap-input-spinner.js" %}"></script>
    <script src="{% static "vendor/hc-offcanvas-nav/dist/hc-offcanvas-nav.js" %}"></script>
    <script src="{% static "vendor/pickadate/lib/compressed/picker.js" %}"></script>
    <script src="{% static "vendor/pickadate/lib/compressed/picker.date.js" %}"></script>
    <script src="{% static "vendor/rateyo/src/jquery.rateyo.js" %}"></script>
    <script src="{% static "vendor/jquery.cookie/jquery.cookie.js" %}"></script>
    <script src="{% static "js/hookcoffee.js" %}"></script>
{% endblock %}

{% block extrascripts %}
    {% is_mobile as mobile %}
    {% is_tablet as tablet %}
    <script type="text/javascript">
        var csrfToken = "{{ csrf_token }}";
        var isMobile = {% if mobile %}true{% else %}false{% endif %};
        var isTablet = {% if tablet %}true{% else %}false{% endif %};
        var recommenderURl = "{% url 'subscription:get_started' %}";
        var getRecommendations = '{% url 'subscription:get_recommendations' %}';
        var getStartedSignup = '{% url 'subscription:get_started_signup' %}';
        var userCountry = '{% country_code %}';
        var setUserCountry = "{% url 'customer:set_country' %}";
        var basketURL = "{% url 'basket:summary' %}";
    </script>
    {% providers_media_js %}
    {{ block.super }}
    <!-- Start of hookcoffee Zendesk Widget script -->

    <script id="ze-snippet"
            src="https://static.zdassets.com/ekr/snippet.js?key=1ee117f8-0d1e-4254-8c31-8e4d95a120b5" async></script>

    <!-- End of hookcoffee Zendesk Widget script -->
{% endblock %}

{% block onbodyload %}
    {{ block.super }}
    oscar.init();
{% endblock %}