{% extends "base/skeleton.html" %}

{% load static %}
{% load i18n %}

{% load is_active %}
{% load utils %}

{% block body %}
{% include 'partials/messages.html' %}
<div class="pf-c-page" id="page-default-nav-example">
    <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">{% trans 'Skip to content' %}</a>
    <header role="banner" class="pf-c-page__header ws-page-header">
        <div class="pf-c-page__header-brand">
            <div class="pf-c-page__header-brand-toggle">
                <button class="pf-c-button pf-m-plain" type="button" id="page-default-nav-example-nav-toggle"
                    aria-label="Global navigation" aria-expanded="true"
                    aria-controls="page-default-nav-example-primary-nav">
                    <i class="fas fa-bars" aria-hidden="true"></i>
                </button>
            </div>
            <a class="pf-c-page__header-brand-link">
                <img class="pf-c-brand" src="{% static 'passbook/logo.png' %}" alt="" />
                <img class="pf-c-brand" src="{% static 'passbook/brand.svg' %}" alt="passbook" />
            </a>
        </div>
        <div class="pf-c-page__header-nav">
            <nav class="pf-c-nav" aria-label="Nav">
                <ul class="pf-c-nav__horizontal-list ws-top-nav">
                    <li class="pf-c-nav__item"><a class="pf-c-nav__link {% is_active_url 'passbook_core:overview' %}"
                            href="{% url 'passbook_core:overview' %}">{% trans 'Access' %}</a></li>
                    {% if user.is_superuser %}
                    <li class="pf-c-nav__item"><a class="pf-c-nav__link {% is_active_url 'passbook_admin:overview' %}"
                            href="{% url 'passbook_admin:overview' %}">{% trans 'Administrate' %}</a></li>
                    <li class="pf-c-nav__item"><a class="pf-c-nav__link {% is_active_url 'passbook_admin:audit-log' %}"
                            href="{% url 'passbook_admin:audit-log' %}">{% trans 'Monitor' %}</a></li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        <div class="pf-c-page__header-tools">
            <div class="pf-c-page__header-tools-group pf-m-icons">
                <a href="{% url 'passbook_core:auth-logout' %}" class="pf-c-button pf-m-plain" type="button">
                    <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
                </a>
            </div>
            <div class="pf-c-page__header-tools-group">
                <a href="{% url 'passbook_core:user-settings' %}" class="pf-c-button">
                    {{ user.username }}
                </a>
            </div>
            <img class="pf-c-avatar" src="{% gravatar user.email %}" alt="">
        </div>
    </header>
    {% block page_content %}
    {% endblock %}
</div>
{% endblock %}