{% extends "ocyan/layout.html" %}

{% load static %}
{% load ocyan_themes ocyan_main %}
{% load promotion_tags %}
{% load ocyanjson %}
{% load wagtailcore_tags wagtailimages_tags %}
{% load compress %}

{% block styles %}
    {% block styles_theme %}
        {% ocyanjson "theme" "header" "header1" as header_type %}
        {% compress css %}
        <link rel="stylesheet/less" type="text/css" href="{% static "oscar/less/styles.less" %}" />
        <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/owlcarousel/scss/owl.carousel.scss' %}" />
        <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/owlcarousel/scss/owl.theme.default.scss' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'assets/css/global.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'template9/css/external.css' %}" />
        <link rel="stylesheet" type="text/css" href="{% static 'template9/css/jquery-ui.min.css' %}" />
        <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/scss/base.scss' %}">
        {% block header_imports %}
            {% if header_type == "header4" %}
                <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/scss/header-4.scss' %}">
            {% elif header_type == "header2" %}
                <link rel="stylesheet" type="text/css" href="{% static 'megamenu/megamenu-bs4.css' %}" />
            {% elif header_type == "header3" %}
                <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/scss/header-3.scss' %}">
            {% elif header_type == "header5" %}
                <link rel="stylesheet" type="text/x-scss" href="{% static 'template9/scss/header-5.scss' %}">
            {% endif %}
        {% endblock %}
        {% block imports %}{% endblock %}
        {% endcompress %}
    {% endblock %}
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <link rel="preload" href="{% static 'template9/icons/icons.woff2' %}" as="font" type="font/woff2" crossorigin="anonymous">
    {% block keywords %}{% endblock %}
{% endblock %}

{% block layout %}
    {# Top-horizontal bar with account, notifictions, dashboard links #}

    {# Site logo/title, mini-basket, browse dropdown and searchbox #}
    <header class="header {% if settings.ocyan_plugin_wagtail.OcyanSettings.promo_header %}no-padding-header{% endif %} {% ocyanjson 'theme' 'header' 'header1' %}">

        {% block navigation %}
            <div id="megamenu" class='{% ocyanjson "theme" "header" "header1" %} top-header'>
            {% include "partials/nav_primary.html" %}
            </div>
        {% endblock %}
        {% block breadcrumbheader %}
            {% get_min_depth as min_depth %}
            {% if page.depth|default_if_none:4 > min_depth %}
                <div class="bg-bc">
                    <div class="container">
                        <div class="breadcrumb-wrapper">
                            <div class="breadcrumb-title">
                                <h1>
                                    {% block header_title %}
                                        {{ page.title }}
                                    {% endblock %}
                                </h1>
                            </div>
                            <div class="header_breadcrumbs">
                                {% block header_breadcrumbs %}
                                <ul class="breadcrumb">
                                    {% for crumb in page.get_ancestors %}
                                        {% if crumb.depth > min_depth|add:"-1" %}
                                        <li class="breadcrumb-item">
                                            <a href="{{crumb.url}}">{{crumb.title}}</a>
                                        </li>
                                        {% endif %}
                                    {% endfor %}
                                    <li class="breadcrumb-item active">
                                        {{ page.title }}
                                    </li>
                                </ul>
                                {% endblock %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endblock %}
    </header>
    {# Main content of page - other layout templates may override this block #}
    {% block content_wrapper %}
        <div class="container page">
            <div class="page_inner my-3">
                {% block header %}
                    <div class="page-header action">
                        <h1>{% block headertext %}{% endblock %}</h1>
                    </div>
                {% endblock %}
                {% esi_fragment "partials/alert_messages.html" with sessionid=True messages=messages only %}
                {% 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>
            </div>
        </div>
        {% block outside_content %}
        {% endblock %}
    {% endblock %}

    {% include "partials/footer.html" %}
{% endblock %}

{% block scripts %}
    <!-- Twitter Bootstrap -->
    <script src="{% static 'template9/bootstrap-4.3/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'template9/owlcarousel/owl.carousel.min.js' %}"></script>
    <script src="{% static 'template9/owlcarousel/owl-thumbnail.min.js' %}"></script>
    <script src="{% static 'assets/js/lazyload/jquery.lazy.min.js' %}"></script>
    <script src="{% static 'assets/js/lazyload/jquery.lazy.plugins.min.js' %}"></script>
    <script src="{% static 'template9/js/jquery.visible.min.js' %}"></script>
    <!-- Oscar -->
    <script src="{% static 'oscar/js/oscar/ui.js' %}"></script>

    <script src="{% static 'template9/js/jquery-ui.min.js' %}"></script>
    <script src="{% static 'template9/js/custom.js' %}"></script>
    {% block megamenu %}
        {{ block.super }}
    {% endblock %}

    <script src="{% static 'oscar/js/oscar/ui.js' %}"></script>
{% endblock %}