{% load static %}
{% load compress %}
{% load i18n %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <title>{% block title %}{% endblock %}{% block title_suffix %} | {{ TX_APP_NAME }}{% endblock %}</title>

    {% compress css %}
        <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}">
        <link rel="stylesheet" type="text/css" href="{% static "css/font-awesome.min.css" %}">
        <link rel="stylesheet" type="text/css" href="{% static "css/ionicons.min.css" %}">

        <link rel="stylesheet" type="text/css" href="{% static "plugins/select2/css/select2.min.css" %}">
        <link rel="stylesheet" type="text/css" href="{% static "plugins/datetimepicker/css/bootstrap-datetimepicker.min.css" %}">

        <link rel="stylesheet" type="text/css" href="{% static "css/AdminLTE.min.css" %}">
        <link rel="stylesheet" type="text/css" href="{% static "css/trionyx.css" %}">

        {% block extra_css %}{% endblock %}

    {% endcompress %}

    <link rel="stylesheet" type="text/css" href="{% static tx_skin_css %}">

    {% block extra_head %}{% endblock %}

    <!-- 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/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-{{ TX_THEME_COLOR }} sidebar-mini fixed {% block body_class %}{% endblock %} {% if trionyx_menu_collapse %}sidebar-collapse{% endif %}">

{% block body %}
    <div class="wrapper">
        {% block header %}
            {% include 'trionyx/base/header.html' %}
        {% endblock %}

        {% block main_sidebar %}
            {% include 'trionyx/base/main_sidebar.html' %}
        {% endblock %}

        <div class="content-wrapper">
            {% block content_top %}{% endblock %}

            <div class="content-header-wrapper">
                <div class="content-header-affix" data-spy="affix">
                    <section class="content-header" >
                        {% block content_header %}
                            <h1 class="pull-left">
                                {% block page_title %}{% endblock %}
                                <small>{% block page_subtitle %}{% endblock %}</small>
                            </h1>
                            <div class='btn-toolbar pull-right'>
                                <div class="btn-group">
                                    {# Bug where content align is different when there is no items #}
                                    <a href="#" class="btn" style="visibility: hidden">hidden</a>

                                    {% block header_buttons %}

                                    {% endblock %}

                                </div>
                            </div>
                            <div class="clearfix"></div>
                        {% endblock %}
                    </section>
                </div>
            </div>

            <section class="content">
                {% block content_before_messages %}{% endblock %}

                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-dismissable
                            {% if message.tags %}{{ message.tags }}{% endif %}
                            {% if message.level == DEFAULT_MESSAGE_LEVELS.INFO %}alert-info{% endif %}
                            {% if message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}alert-success{% endif %}
                            {% if message.level == DEFAULT_MESSAGE_LEVELS.WARNING %}alert-warning{% endif %}
                            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}alert-danger{% endif %}
                        "><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
                {% block content %}{% endblock %}
            </section>

            {% block content_bottom %}{% endblock %}
        </div>
    </div>
{% endblock %}

{% compress js %}
    <script src="{% static "js/jquery.min.js" %}"></script>
    <script src="{% static "js/bootstrap.min.js" %}"></script>
    <script src="{% static "js/jquery.slimscroll.min.js" %}"></script>
    <script src="{% static "js/fastclick.js" %}"></script>
    <script src="{% static "js/moment.min.js" %}"></script>

    <script src="{% static "plugins/select2/js/select2.min.js" %}"></script>
    <script src="{% static "plugins/datetimepicker/js/bootstrap-datetimepicker.min.js" %}"></script>

    <script src="{% static "js/adminlte.min.js" %}"></script>
    {% if DEBUG %}
        <script src="{% static "js/vue.dev.js" %}"></script>
    {% else %}
        <script src="{% static "js/vue.min.js" %}"></script>
    {% endif %}
    <script src="{% static "js/trionyx.js" %}"></script>

    <script>
        $(document).ready(function () {
            $('.sidebar-menu').tree();
            initGlobalSearch("{% url 'trionyx:global-search' %}");
            initTrionyxTasks("{% url 'trionyx:user-tasks' %}");
        });
    </script>

    {% block extra_js %}{% endblock %}

{% endcompress %}

<script>
    window.trionyx_translations = {
        close: '{% trans 'Close' %}',
    }
</script>

{% include 'trionyx/base/filters.html' %}

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