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

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

{% block body %}
<div class="toast-notifications-list-pf">
    {% include 'partials/messages.html' %}
</div>
<nav class="navbar navbar-pf-vertical">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">
            <img class="navbar-brand-icon" src="{% static 'img/logo.png' %}" alt="" />
            <img class="navbar-brand-name" src="{% static 'img/brand.svg' %}" alt="passbook" />
        </a>
    </div>
    <nav class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility">
            <li class="dropdown">
                <button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    <span title="Help" class="fa pficon-help"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    {% comment %} <li><a href="#0">Help</a></li> {% endcomment %}
                    <li><a data-toggle="modal" data-target="#about-modal" href="#0">{% trans 'About' %}</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    <span title="Username" class="fa pficon-user"></span>
                    <span class="dropdown-title">
                        {{ user.username }} <span class="caret"></span>
                    </span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                    <li>
                        <a href="{% url 'passbook_core:user-settings' %}">{% trans 'User Settings' %}</a>
                    </li>
                    <li>
                        <a href="{% url 'passbook_core:user-change-password' %}">{% trans 'Change Password' %}</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="{% url 'passbook_core:auth-logout' %}">{% trans 'Logout' %}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</nav>
<div class="nav-pf-vertical nav-pf-vertical-with-sub-menus hide-nav-pf">
    <ul class="list-group">
        <li class="list-group-item {% is_active_url 'passbook_core:overview' %}">
            <a href="{% url 'passbook_core:overview' %}">
                <span class="fa fa-dashboard" data-toggle="tooltip" title="{% trans 'Overview' %}"></span>
                <span class="list-group-item-value">{% trans 'Overview' %}</span>
            </a>
        </li>
        {% is_active_app 'passbook_admin' as is_admin %}
        {% if user.is_superuser %}
        <li class="list-group-item {% is_active_app 'passbook_admin' %} secondary-nav-item-pf">
            <a href="{% url 'passbook_admin:overview' %}">
                <span class="pficon pficon-user" data-toggle="tooltip" title=""
                    data-original-title="{% trans 'Administration' %}"></span>
                <span class="list-group-item-value dropdown-title">{% trans 'Administration' %}</span>
            </a>
            <div id="user-secondary" class="nav-pf-secondary-nav">
                <div class="nav-item-pf-header">
                    <a href="#0" class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
                    <span>{% trans 'Administration' %}</span>
                </div>
                <ul class="list-group">
                    <li class="list-group-item {% is_active 'passbook_admin:overview' %}">
                        <a href="{% url 'passbook_admin:overview' %}">
                            <span class="list-group-item-value">
                                {% trans 'Overview' %}
                            </span>
                        </a>
                    </li>
                    <li
                        class="list-group-item {% is_active 'passbook_admin:applications' 'passbook_admin:application-create' 'passbook_admin:application-update' 'passbook_admin:application-delete' %}">
                        <a href="{% url 'passbook_admin:applications' %}">
                            <span class="list-group-item-value">
                                {% trans 'Applications' %}
                            </span>
                        </a>
                    </li>
                    <li
                        class="list-group-item {% is_active 'passbook_admin:sources' 'passbook_admin:source-create' 'passbook_admin:source-update' 'passbook_admin:source-delete' %}">
                        <a href="{% url 'passbook_admin:sources' %}">
                            <span class="list-group-item-value">
                                {% trans 'Sources' %}
                            </span>
                        </a>
                    </li>
                    <li
                        class="list-group-item {% is_active 'passbook_admin:providers' 'passbook_admin:provider-create' 'passbook_admin:provider-update' 'passbook_admin:provider-delete' %}">
                        <a href="{% url 'passbook_admin:providers' %}">
                            <span class="list-group-item-value">
                                {% trans 'Providers' %}
                            </span>
                        </a>
                    </li>
                    <li
                        class="list-group-item {% is_active 'passbook_admin:property-mappings' 'passbook_admin:property-mapping-create' 'passbook_admin:property-mapping-update' 'passbook_admin:property-mapping-delete' %}">
                        <a href="{% url 'passbook_admin:property-mappings' %}">
                            <span class="list-group-item-value">
                                {% trans 'Property Mappings' %}
                            </span>
                        </a>
                    </li>
                    <li
                        class="list-group-item {% is_active 'passbook_admin:factors' 'passbook_admin:factor-create' 'passbook_admin:factor-update' 'passbook_admin:factor-delete' %}">
                        <a href="{% url 'passbook_admin:factors' %}">
                            <span class="list-group-item-value">
                                {% trans 'Factors' %}
                            </span>
                        </a>
                    </li>
                    <li
                        class="list-group-item {% is_active 'passbook_admin:policies' 'passbook_admin:policy-create' 'passbook_admin:policy-update' 'passbook_admin:policy-delete' 'passbook_admin:policy-test' %}">
                        <a href="{% url 'passbook_admin:policies' %}">
                            <span class="list-group-item-value">
                                {% trans 'Policies' %}
                            </span>
                        </a>
                    </li>
                    <li
                        class="list-group-item {% is_active 'passbook_admin:invitations' 'passbook_admin:invitation-create' 'passbook_admin:invitation-update' 'passbook_admin:invitation-delete' 'passbook_admin:invitation-test' %}">
                        <a href="{% url 'passbook_admin:invitations' %}">
                            <span class="list-group-item-value">
                                {% trans 'Invitations' %}
                            </span>
                        </a>
                    </li>
                    <li
                        class="list-group-item {% is_active 'passbook_admin:users' 'passbook_admin:user-update' 'passbook_admin:user-delete' %}">
                        <a href="{% url 'passbook_admin:users' %}">
                            <span class="list-group-item-value">
                                {% trans 'Users' %}
                            </span>
                        </a>
                    </li>
                    <li
                        class="list-group-item {% is_active 'passbook_admin:groups' 'passbook_admin:group-update' 'passbook_admin:group-delete' %}">
                        <a href="{% url 'passbook_admin:groups' %}">
                            <span class="list-group-item-value">
                                {% trans 'Groups' %}
                            </span>
                        </a>
                    </li>
                    <li class="list-group-item {% is_active 'passbook_admin:audit-log' %}">
                        <a href="{% url 'passbook_admin:audit-log' %}">
                            <span class="list-group-item-value">
                                {% trans 'Audit Log' %}
                            </span>
                        </a>
                    </li>
                    <li class="list-group-item {% is_active_app 'admin' %}">
                        <a href="{% url 'admin:index' %}">
                            <span class="list-group-item-value">
                                {% trans 'Django' %}
                            </span>
                        </a>
                    </li>
                    <li class="list-group-item {% is_active 'passbook_admin:debug-request' %}">
                        <a href="{% url 'passbook_admin:debug-request' %}">
                            <span class="list-group-item-value">
                                {% trans 'Debug' %}
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </li>
        {% endif %}
    </ul>
</div>
<div class="container-fluid container-cards-pf">
    {% block content %}
    {% endblock %}
</div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function () {
        // initialize tooltips
        $('[data-toggle="tooltip"]').tooltip();

        // Initialize the vertical navigation
        $().setupVerticalNavigation(true);
    });
</script>
{% endblock %}