{% load static cabinet %}

<!DOCTYPE html>
<html class="fixed dark" lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{% static 'vendor/bootstrap/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'vendor/animate/animate.css' %}">
    <link rel="stylesheet" href="{% static 'vendor/font-awesome/css/fontawesome-all.min.css' %}">
    <link rel="stylesheet" href="{% static 'vendor/magnific-popup/magnific-popup.css' %}">
    <link rel="stylesheet" href="{% static 'vendor/pnotify/pnotify.custom.css' %}">

    <link rel="stylesheet" href="{% static 'css/theme.css' %}">
    <link rel="stylesheet" href="{% static 'css/skins/square-borders.css' %}">
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">

    <script src="{% static 'vendor/modernizr/modernizr.js' %}"></script>
    <script src="{% static 'vendor/turbolinks/turbolinks.js' %}"></script>
</head>
<body class="{% if not is_turbolinks %}loading-overlay-showing{% endif %}" data-loading-overlay>
    <div class="loading-overlay">
        <div class="bounce-loader">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
    </div>
    {% block page %}{% endblock %}

    <script data-turbolinks-eval="false" src="{% static 'vendor/jquery/jquery.js' %}"></script>
    <script data-turbolinks-eval="false" src="{% static 'vendor/jquery-browser-mobile/jquery.browser.mobile.js' %}"></script>
    <script data-turbolinks-eval="false" src="{% static 'vendor/jquery-cookie/jquery-cookie.js' %}"></script>
    <script data-turbolinks-eval="false" src="{% static 'vendor/popper/umd/popper.min.js' %}"></script>
    <script data-turbolinks-eval="false" src="{% static 'vendor/bootstrap/js/bootstrap.js' %}"></script>
    <script data-turbolinks-eval="false" src="{% static 'vendor/common/common.js' %}"></script>
    <script data-turbolinks-eval="false" src="{% static 'vendor/nanoscroller/nanoscroller.js' %}"></script>
    <script data-turbolinks-eval="false" src="{% static 'vendor/magnific-popup/jquery.magnific-popup.js' %}"></script>
    <script data-turbolinks-eval="false" src="{% static 'vendor/jquery-placeholder/jquery-placeholder.js' %}"></script>
    <script data-turbolinks-eval="false" src="{% static 'vendor/pnotify/pnotify.custom.js' %}"></script>

    <script data-turbolinks-eval="false" src="{% static 'js/theme.js' %}"></script>
    <script data-turbolinks-eval="false" src="{% static 'js/custom.js' %}"></script>

    <script src="{% static 'js/theme.init.js' %}"></script>
    <script src="{% static 'js/custom.init.js' %}"></script>

    <script>
        var stack = {dir1: "right", dir2: "up", "push": "top"};
        {% for message in messages %}
            $(function() {
                var notice = new PNotify({
                    text: '{{ message | escapejs }}',
                    title: 'Notification',
                    type: '{{ message | pnotify_type }}',
                    hide: false,
                    addclass: 'stack-bottomright',
                    stack: stack,
                    nonblock: {
                        nonblock: true,
                        nonblock_opacity: .2,
                    },
                    buttons: {
                        closer: false,
                        sticker: false,
                    }
                });

                notice.get().click(function() {
                    notice.remove();
                });
            });
        {% endfor %}
    </script>

    {% block extra_body %}{% endblock %}
</body>
</html>
