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

{% 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 %}
    {% if use_less %}
        <link rel="stylesheet/less" type="text/css" href="{% static "oscar/less/styles.less" %}" />
    {% else %}
        <link rel="stylesheet" type="text/css" href="{% static "oscar/css/styles.css" %}" />
    {% endif %}
{% 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-fluid">
        <div class="page_inner">
            <div class="row">
                {% 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-fluid page">
            <div class="page_inner">
                {% block breadcrumbs %}{% endblock %}
                {% block header %}
                    <div class="page-header action">
                        <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 %}

{% block cdn_scripts %}
  {{ block.super }}
  {% if use_less and debug %}
    {# Load the on-the-fly less compiler. Never do this in production. #}
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js"></script>
  {% endif %}
{% endblock %}

{# Local scripts #}
{% block scripts %}
    {{ block.super }}
    <!-- Twitter Bootstrap -->
    <script src="{% static "oscar/js/bootstrap3/bootstrap.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 %}
