<!DOCTYPE html>
{% load static %}

{% comment %}{% load bootstrap3 %}{% endcomment %}
<html{% if LANGUAGE_CODE %} lang="{{ LANGUAGE_CODE }}"{% endif %}>
    <head>
        <meta charset="utf-8">

        <title>{% block html_title %}Staff management{% endblock %}</title>

        <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        {% block stylesheets %}{% endblock %}
    </head>

    <body class="{% block body_class %}default{% endblock %}">
        <header class="navbar fixed-top navbar-toggleable-md navbar-dark double-nav scrolling-navbar top-nav-collapse {% block nav_class %}{% endblock %}">
            <div class="left-group">
                {% block back_nav %}
                <div class="home-nav left-button">
                    <a href="{% url 'editorial_staff:staffer-list' %}"><i class="material-icons md-24">arrow_back</i></a>
                </div>
                {% endblock %}
                <h4 class="navbar-brand" href="#">{% block nav_header %}Staff management{% endblock nav_header %}</h4>
            </div>

            <div class="right-buttons">
                <div class="show-feed right-button">
                    <i class="material-icons md-24">history</i>
                </div>
                <div class="show-nav right-button">
                    <button href="javascript:;" class="header-burger">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
            </div>
        </header>

        <div class="collapsible-nav">
            <ul class="nav-items">
                <li><a href="{% url 'editorial_staff:staffer-list' %}">Staff management home</a></li>
                <li><a href="{% url 'editorial_staff:staffer-create' %}">Add new staffer</a></li>
                {% comment %}<li><a href="">Help</a></li>{% endcomment %}
                <li><a href="{% url 'apiauth:logout' %}">Log out</a></li>
            </ul>
        </div>

        <main>
            <div class="gutters">
                <div class="justify-content-center">
                    <div class="content-block">
                      {% block content %}
                        <div class="card">
                            {% block content_inner %}
                            {% endblock %}
                        </div>
                        {% endblock %}
                    </div>
                </div>
            </div>
        </main>

        <aside class="{% block aside_shown %}{% endblock %}">
            <div class="side-items">
                {% block sidebar %}
                <h5>Recent activity</h5>
                {% endblock %}
            </div>
        </aside>

        {% block extra_body %}{% endblock %}

        <section id="snackbars">{% block snackbars %}{% endblock %}</section>

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