<!DOCTYPE html>
<html lang="en">
{% if not request.is_ajax and not request.GET.popup %}
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="description" content="">
        <meta name="author" content="">

        <link rel="apple-touch-icon" href="{% if settings.background %}/media/{{ settings.background }}{% else %}/static/images/project.jpg{% endif %}"/>

        {% if settings.icon %}
            <link rel="icon" href="/media/{{ settings.icon }}">
            <link rel="apple-touch-startup-image" href="/media/{{ settings.icon }}">
        {% endif %}

        <title>{{ settings.initials }}</title>

        <!-- Bootstrap core CSS -->
        <link href="/static/css/bootstrap.min-3.2.0.css" rel="stylesheet">
        <!-- Font Awesome -->
        <link href="/static/css/font-awesome.min-4.7.0.css" rel="stylesheet">
        <!-- Toast -->
        <link href="/static/css/jquery.toast.min.css" rel="stylesheet"/>
        <!-- Material Box -->
        <link href="/static/css/jquery.materialbox.min.css" rel="stylesheet"/>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Jquery -->
        <script src="/static/js/jquery-3.2.1.min.js"></script>
        <script src="/static/js/jquery-ajax-blob-arraybuffer.js"></script>
        <!-- Pace -->
        <script src="/static/js/jquery.pace-1.0.0.min.js"></script>
        <!-- Material Box -->
        <script src="/static/js/jquery-materialbox.min.js"></script>
        <script src="/static/js/velocity-1.2.3.min.js"></script>
        <!-- Mask -->
        <script src="/static/js/jquery.mask.min-1.7.7.js"></script>
        <!-- Tests -->
        <script src="/static/js/tests.js"></script>

        {% block extra_head %}{% endblock %}

        <!-- Application Scripts and Styles -->
        {% for url in js_files %}<script src="{{ url }}"></script>{% endfor %}
        {% for url in css_files %}<link href="{{ url }}" rel="stylesheet"/>{% endfor %}
        <!-- Custom Theme -->
        <link href="/static/css/style.css" rel="stylesheet"/>

    </head>
{% endif %}
    {% block body %}
        <!-- Body tag must be placed here in extended pages -->
    {% endblock %}

{% if not request.is_ajax and not request.GET.popup %}
    <!-- Bootstrap -->
    <script src="/static/js/bootstrap-3.2.0.js"></script>
    <!-- Toast -->
    <script src="/static/js/jquery.toast.min.js"></script>
    <!-- Treegrid -->
    <script src="/static/js/jquery.treegrid-0.3.0.js"></script>
    <!-- Popup Overlay -->
    <script src="/static/js/jquery.popupoverlay-1.7.13.js"></script>
    <!-- Cookie -->
    <script src="/static/js/jquery.cookie-1.4.1.js"></script>
    <!-- Djangoplus -->
    <script src="/static/js/djangoplus.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script>
        //Loads the correct sidebar on window load,
        //collapses the sidebar on window resize.
        // Sets the min-height of #page-wrapper to window size
        $(function() {
            $(window).bind("load resize", function() {
                topOffset = 50;
                width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
                if (width < 768) {
                    $('div.navbar-collapse').addClass('collapse');
                    topOffset = 100; // 2-row-menu
                } else {
                    $('div.navbar-collapse').removeClass('collapse');
                }

                height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
                height = height - topOffset;
                if (height < 1) height = 1;
                if (height > topOffset) {
                    $("#page-wrapper").css("min-height", (height) + "px");
                }
            });
        });
    </script>
{% endif %}

    {% if username_mask %}
        <script>$('input[name=username]').mask("{{ username_mask }}", {clearIfNotMatch: true});</script>
    {% endif %}

    {% if messages %}
        {% for message in messages %}
            {% if 'error' not in message.tags %}
            {{ message|toast }}
            {% endif %}
        {% endfor %}
    {% endif %}

{% if not request.GET.popup %}
    <!-- Modal Div -->
    <div class="modal fade" id="app_modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body" id="app-modal-content">

                </div>
                <div class="modal-footer">
                    <button class="btn btn-default btn-sm" onclick="cancelPopup();" aria-hidden="true" id="modal-closer">
                        Cancelar
                    </button>
                    <button class="btn submit-button" onclick="$('#app-modal-content').find('form').submit();">
                        <i class="fa fa-chevron-right"></i> <span id="modal-form-submit-label">Enviar</span>
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
{% endif %}

</html>