{% load i18n static arctic_tags %}
{% get_current_language as LANGUAGE_CODE %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
    <head>
        {% include "arctic/partials/head.html" %}
        {% block head_extras %}{% endblock %}
    </head>

    <body class="{% block body_class %}{% endblock %}">

        {% block body %}
        <div class="container-fluid">
            <div class="row row-offcanvas flex-nowrap">
                <div class="col sidebar-offcanvas" id="sidebar">
                    {% include "arctic/partials/menu.html" %}
                </div>
                <div class="col content-offcanvas">
                    {% block header %}
                    <header class="col-sm-12">
                        <h3 class="header__title">
                            <span class="hidden-lg-up">
                                <a href="#" class="menu-button" id="menu-button">
                                    <span class="burger-icon"></span>
                                </a>
                            </span>
                            {{ page_title }}
                        </h3>
                        <nav class="nav dropdown header__menu">
                            {% if dark_mode %}
                            <div id="dark-mode-container" class="dark-mode-toggle hide">
                                <div class="btn-group btn-group-toggle">
                                  <label class="btn btn-sm" for="light-radio">
                                    <input type="radio" name="dark-option" id="light-radio" autocomplete="off">
                                    <i class="fa fa-sun-o dark-mode-toggle__icon" aria-hidden="true"></i>
                                  </label>
                                  <label class="btn btn-sm" for="dark-radio">
                                    <input type="radio" name="dark-option" id="dark-radio" autocomplete="off">
                                    <i class="fa fa-moon-o dark-mode-toggle__icon" aria-hidden="true"></i>
                                  </label>
                                </div>
                            </div>
                            {% endif %}
                            {% if not request.user.is_anonymous %}
                                {% if LOGOUT_URL %}
                                    <a href="#" class="nav-link dropdown-toggle" id="user-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ request.user|get_attr:request.user.USERNAME_FIELD }}</a>
                                        <div class="dropdown-menu" aria-labelledby="user-dropdown">
                                                <a class="dropdown-item" href="{{ LOGOUT_URL }}">{% trans "Logout" %}</a>
                                {% endif %}
                            {% else %}
                                {% if LOGIN_URL %}
                                    <a id="menu-login" href="{{ LOGIN_URL }}">Login</a>
                                {% endif %}
                            {% endif %}
                        </nav>
                    </header>
                    {% endblock %}
                    <div class="content-wrapper">
                        <div class="breadcrumb-block">
                        {% block breadcrumbs%}
                            {% if breadcrumbs %}
                                <nav class="breadcrumb">
                                    {% for breadcrumb in breadcrumbs %}
                                        {% if forloop.last %}
                                            <span class="breadcrumb-item active">
                                                {{ breadcrumb.name }}
                                            </span>
                                        {% else %}
                                            <a class="breadcrumb-item" href="{{ breadcrumb.url }}">
                                                {{ breadcrumb.name }}
                                            </a>
                                        {% endif %}
                                    {% endfor %}
                                </nav>
                            {% else %}
                                &nbsp;
                            {% endif %}
                        {% endblock %}
                        </div>

                        <div class="page-description-block">
                        {% block page_description %}
                            {% if page_description %}
                                <div class="row">
                                    <small>{{ page_description }}</small>
                                </div>
                            {% endif %}
                        {% endblock %}
                        </div>

                        <div class="tabs-block">
                        {% block tabs %}
                        {% if tabs %}
                            <div class="row">
                                <div class="col-sm-12 col">
                                    <ul class="nav nav-tabs" id="table-tabs" role="tablist">
                                        {% for tab in tabs %}
                                            <li class="nav-item">
                                                {% if tab.active %}
                                                    <a class="nav-link active" href="javascript:">{{ tab.name }}</a></li>
                                                {% else %}
                                                    <a class="nav-link" href="{{ tab.url }}">{{ tab.name }}</a></li>
                                                {% endif %}
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                        {% endblock %}
                        </div>

                        <div class="messages-block">
                        {% block messages %}
                        {% if messages %}
                            {% for message in messages %}
                            <div class="row">
                                <div class="col">
                                    <div class="alert alert-{{ message.tags }}" data-closable>
                                        {{ message }}
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        {% endif %}
                        {% endblock %}
                        </div>

                        <div class="content-block">
                        {% block content %}content here{% endblock %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endblock %}

        {% block scripts_bottom %}
            <script>
                datetime_picker_settings = {
                    days: {{ DATETIME_FORMATS.DAYS }},
                    daysShort: {{ DATETIME_FORMATS.DAYS_SHORT }},
                    daysMin:{{ DATETIME_FORMATS.DAYS_MIN }},
                    months: {{ DATETIME_FORMATS.MONTHS }},
                    monthsShort: {{ DATETIME_FORMATS.MONTHS_SHORT }},
                    today: "{{ DATETIME_FORMATS.TODAY }}",
                    clear: "{{ DATETIME_FORMATS.CLEAR }}",
                    dateFormat: "{{ DATETIME_FORMATS.SHORT_DATE }}",
                    timeFormat: "{{ DATETIME_FORMATS.TIME }}",
                    firstDay: {{ DATETIME_FORMATS.FIRST_DAY }}
                }
            </script>
            <script src="{% static "arctic/dist/assets/js/app.js" %}"></script>
            {% block dark_mode %}
                {% if dark_mode %}
                    <script>startDarkMode('{{ dark_mode }}');</script>
                {% endif %}
            {% endblock %}
            {{ media.js }}
        {% endblock %}
    </body>
</html>
