{% extends "wagtailadmin/base.html" %}
{% load wagtailadmin_tags staticfiles i18n ocyan_main %}

{% block titletag %}
    {% block title %}
        {{ block.super }}{% trans "Oscar" %}
    {% endblock %}
{% endblock %}

{% block css %}
    {% block oscarcss %}
    <link rel="stylesheet" href="{% static "oscar/js/select2/select2.min.css" %}" />
    <link rel="stylesheet" href="{% static "oscar/css/select2-bootstrap.min.css" %}" />
    <link rel="stylesheet" href="{% static "oscar/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" %}" />
    <link rel="stylesheet" href="{% static "oscar/css/datetimepicker.css" %}" />
    {% endblock %}

    {{ block.super }}

{% endblock %}

{% block layout %}
    {% block content %}
    <!-- Included part of the html from "wagtailadmin/shared/header.html" to  -->
    <header class="w-header w-header--hasform">
        <div class="nice-padding oscar">
        {% if not is_popup %}
        <div class="breadcrumbs">
                {% block breadcrumbs %}
                <ul class="breadcrumb">
                    <li><a href="{% url 'dashboard:index' %}">{% trans "Dashboard" %}</a></li>
                </ul>
                {% endblock %}
            </div>
        {% endif %}
        </div>
        <div class="row wagtail-oscar">
            <div class="left">
                <div class="col">
                    {% block header %}
                        <h1 class="w-header__title" id="header-title">
                            {% block headertext %}{% endblock %}
                        </h1>
                    {% endblock %}
                </div>
            </div>
        </div>
    </header>

    <div class="nice-padding oscar">
        <div class="content">
            <div class="page-content">

                    {% block dashboard_content %}{% endblock dashboard_content %}

            </div>
        </div>
    </div>

    {% endblock content %}
{% endblock layout %}


{% block js %}
    {{ block.super }}
    
    <script src="{% static 'wagtailadmin/js/modal-workflow.js' %}"></script>

    {% block oscarjs %}
    <!-- Twitter Bootstrap -->
    <script src="{% static "ocyan_plugin_wagtail_oscar_integration/boostrap_no_modal.min.js" %}"></script>
    
    <!-- Oscar -->
    <script src="{% static "oscar/js/oscar/ui.js" %}"></script>

    {# jQuery plugins #}
    {% comment %} <script src="{% static "oscar/js/mousewheel/jquery.mousewheel.js" %}"></script> {% endcomment %}
    <script src="{% static "oscar/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js" %}"></script>
    <script src="{% static "oscar/js/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.all.js" %}"></script>
    <script src="{% static "oscar/js/inputmask/jquery.inputmask.bundle.js" %}"></script>
    <script src="{% static "oscar/js/select2/select2.min.js" %}"></script>
    <script src="{% static "ocyan_plugin_wagtail_oscar_integration/sortable.min.js" %}"></script>
    <script src="{% static "oscar/js/oscar/dashboard.js" %}"></script>
    <script src="{% static "oscar/js/oscar/RelatedObjectLookups.js" %}"></script>
    <script src="{% static "oscar/js/tinymce/tinymce.min.js" %}"></script>
    <script src="{% static "oscar/js/tinymce/jquery.tinymce.min.js" %}"></script>

    {% endblock %}

    {% block oscarinit %}
    <script>
    $(function() {
        (function(document, window) {
            // initialize sortable on the image selector
            var el = document.querySelector(".upload-image");
            if (el) {
                var sortable = Sortable.create(el, {
                    // Don't drag and drop the extra image fields
                    filter: function(_, target) {
                        if (target && target.querySelector("input[type=hidden]:not([value])")) {
                            return true
                        }
                        return false
                    },
                    store: {  // set the display_order input to the new value
                        set: function (sortable) {
                            var sortables = sortable.el.children;
                            for (var i = 0; i < sortables.length; i++) {
                                var elem = sortables[i]
                                if (!sortable.options.filter(null, elem)) { // only for unfiltered elements
                                    var display_order = elem.querySelector("input[name$='display_order']")
                                    if (display_order) { // only if the display_order field is included in the form
                                        display_order.setAttribute('value', i.toString());
                                    }
                                }
                            }
                        }
                    }
                });
            }

            // Javascript to enable link to tab
            var url = document.location.toString();
            if (url.match('#')) {
                $('.nav-list a[href="#' + url.split('#')[1] + '"]').tab('show');
            }

            // Change hash for page-reload
            $('.nav-list a').on('shown.bs.tab', function (e) {
                window.location.hash = e.target.hash;
            });

            {% block oscardashboardinit %}
            options = {
                'languageCode': '{{ LANGUAGE_CODE }}',
                'tinyConfig': {
                    plugins: "link lists media",
                    toolbar: "styleselect | removeformat | bold italic blockquote | bullist numlist | link media"
                }
            };
            oscar.dashboard.init(options);
            {% endblock oscardashboardinit %}

            {% block onbodyload %}
            {% endblock onbodyload %}
        })(document, window);
    });
    </script>
    {% endblock %}
{% endblock js %}