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

{% load static %}
{% load ocyan_themes %}
{% load promotion_tags %}
{% load ocyanjson %}
{% load compress %}

{% block styles %}
        <link rel="stylesheet/less" type="text/css" href="{% static "oscar/less/styles.less" %}" />
    {% block styles_theme %}
        {% ocyanjson "theme" "header" "header1" as header_type %}
        {% compress css %}
            <link rel="stylesheet" type="text/css" href="{% static 'template8/bootstrap-4.3/css/bootstrap.min.css' %}">
            <link rel="stylesheet" type="text/css" href="{% static 'template8/owlcarousel/owl.carousel.min.css' %}" />
            <link rel="stylesheet" type="text/css" href="{% static 'template8/owlcarousel/owl.theme.default.min.css' %}" />
            <link rel="stylesheet" type="text/css" href="{% static 'assets/css/global.css' %}" />
            <link rel="stylesheet" type="text/css" href="{% static 'template8/css/all.min.css' %}" />
            <link rel="stylesheet" type="text/css" href="{% static 'template8/css/styles.css' %}" />
            <link rel="stylesheet" href="{% static 'oscar/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css' %}" />
            <link rel="stylesheet" type="text/css" href="{% static 'template8/css/jquery-ui.min.css' %}" />
            {% if 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 'template8/css/header-3.css' %}">
            {% endif %}        
            {% endcompress %}
    {% endblock %}
    {% block styles_theme_schema %}
        {% color_scheme %}
    {% endblock %}
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    {% block keywords %}{% endblock %}
{% endblock %}

{% block layout %}
    {# Top-horizontal bar with account, notifictions, dashboard links #}
    {% include "partials/nav_accounts.html" %}

    {# Site logo/title, mini-basket, browse dropdown and searchbox #}
    <header class="header">
        <div class="navbar navbar-expand-lg d-flex">
            <div class="container align-items-center justify-content-space-between">
            {% include "partials/brand.html" %}
            {% block mini_basket %}{% include "partials/mini_basket.html" %}{% endblock %}
            </div>
        </div>
                

        {% block navigation %}
            <div id="megamenu" class='{% ocyanjson "theme" "header" "header1" %}'>
            {% include "partials/nav_primary.html" %}
            </div>
        {% 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 breadcrumbs %}{% endblock %}
                {% block header %}
                    <div class="page-header action">
                        <h1>{% block headertext %}{% endblock %}</h1>
                    </div>
                {% endblock %}
                {% include "partials/alert_messages.html" %}
                {% 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 %}
    <div class="overlay-shop"></div>

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

{% block scripts %}
    
    <!-- Twitter Bootstrap -->
    <script src="{% static 'template8/bootstrap-4.3/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'template8/owlcarousel/owl.carousel.min.js' %}"></script>
    <script src="{% static 'template8/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 'template8/js/jquery.visible.min.js' %}"></script>
    <!-- Oscar -->
    <script src="{% static 'oscar/js/oscar/ui.js' %}"></script>

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


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