{% extends "oscar/base.html" %}
{% load static %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "oscar/css/styles.css" %}" />
{% endblock %}

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

    {# Site logo/title, mini-basket, browse dropdown and searchbox #}
    <header class="header container">
        <div class="page_inner">
            <div class="row justify-content-between">
                {% include "oscar/partials/brand.html" %}
                {# Mini-basket wrapped in a block so some templates can now display it #}
                {% block mini_basket %}{% include "oscar/partials/mini_basket.html" %}{% endblock %}
            </div>
        </div>
        {% block navigation %}
            {% include "oscar/partials/nav_primary.html" %}
        {% endblock %}
    </header>

    {# Main content of page - other layout templates may override this block #}
    {% block content_wrapper %}
        <div class="container page">
            <div class="page_inner">
                {% block breadcrumbs %}{% endblock %}
                {% block header %}
                    <div class="page-header">
                        <h1>{% block headertext %}{% endblock %}</h1>
                    </div>
                {% endblock %}
                {% include "oscar/partials/alert_messages.html" %}
                {% block subnavigation %}{% endblock %}
                <div class="content">
                    {% block subheader %}{% endblock subheader %}

                    {# Div exists for AJAX updates to entire content section #}
                    <div id="content_inner">{% block content %}{% endblock %}</div>
                </div>
            </div>
        </div>
    {% endblock %}

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

{# Local scripts #}
{% block scripts %}
    {{ block.super }}
    <!-- Twitter Bootstrap -->
    <script src="{% static "oscar/js/bootstrap4/bootstrap.bundle.min.js" %}"></script>
    <!-- Oscar -->
    <script src="{% static "oscar/js/oscar/ui.js" %}"></script>
{% endblock %}

{% block extrascripts %}
    {% include "oscar/partials/extrascripts.html" %}
    {{ block.super }}
{% endblock %}

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