{% extends "backoffice/headers.html" %}
{% load i18n %}
{% load backoffice %}

{% block section %}
    <div class="column is-narrow">
        {% block sidebar %}
            <aside class="menu is-flex is-flex-direction-column">
                <a class="navbar-item py-4 has-border-bottom" href="{{ index_url }}">
                    <div class="has-text-centered is-full-width">
                        <div class="title is-4">{{ backoffice_title }}</div>
                    </div>
                </a>
                {% sidebar_menu %}
                <a class="navbar-item py-4 has-border-top" href="{{ sign_out }}" style="margin-top: auto">
                  <span class="icon-text">
                    <span class="icon">
                      <i class="fas fa-sign-out-alt"></i>
                    </span>
                    <span>{% trans "Sign out" %}</span>
                  </span>
                </a>
            </aside>
        {% endblock sidebar %}
    </div>
    <div class="column pb-0 content">
        <div class="layout">
            {% if messages %}
                <section class="section pb-0 pt-5">
                    {% for message in messages %}
                        <div class="notification {% if message.tags %}is-{{ message.tags }}{% endif %}">
                            <button class="delete" onclick="this.parentElement.style.display='none'"></button>
                            {{ message }}
                        </div>
                    {% endfor %}
                </section>
            {% endif %}
            <section class="section pt-5">
                {% block content %}
                {% endblock content %}
            </section>
        </div>
        {% block footer %}
            <footer class="footer has-text-centered py-6">
                {% blocktrans %}
                    <strong>{{ backoffice_title }}</strong>'s backoffice panel.
                {% endblocktrans %}
            </footer>
        {% endblock footer %}
    </div>
{% endblock section %}
