{% extends "base.html" %}

{% if not request.GET.popup %}
{% block extra_head %}
    <!-- Fancybox -->
    <link rel="stylesheet" href="/static/css/jquery.fancybox.min.css" />
    <script src="/static/js/jquery.fancybox.min.js"></script>
    <!-- Metis Menu -->
    <link href="/static/css/metisMenu.min.css" rel="stylesheet">
    <script src="/static/js/metisMenu.min.js"></script>
    <!-- Djangoplus -->
    <link href="/static/css/djangoplus.min.css" rel="stylesheet"/>
    <script>
        (function($){
            var loadOnPush = true;
          $(function(){
            window.addEventListener("popstate", function(e) {
                if(document.location.href.indexOf('#')==-1) {
                    if(loadOnPush) loadUrl(document.location.href);
                    loadOnPush = true;
                } else {
                    loadOnPush = false;
                }
            });
          }); // end of document ready
        })(jQuery); // end of jQuery name space
    </script>

    {% block extra_admin_head %}

    {% endblock %}
{% endblock %}
{% endif %}

{% block body %}
{% if not request.GET.popup %}
<body id="admin-body">

    <div id="wrapper" class="{% if request.session.hidden_menu or not request.session.side_menu_size %}hidden-menu{% endif %}">

    <!-- Navigation -->
    <header class="navbar navbar-fixed-top">
        {% if request.session.side_menu_size %}
        <button id="menu-toggle" type="button" class="navbar-toggle" onclick="$('#wrapper').toggleClass('hidden-menu')">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <button id="menu-toggle-compact" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        {% endif %}
        <h1 class="navbar-header">
            <a href="/admin/" class="navbar-brand ajax" title="{{ settings.initials }}">
                {% if settings.logo %}
                    <img height="50px" src="/media/{{ settings.logo }}" alt="{{ _("Logo of") }} {{ settings.initials }}" />
                {% else %}
                    <span>{{ settings.initials|truncatechars(17) }}</span>
                {% endif %}
                {% if request.user.scope %}
                    <div class="hide-mobile" style="float: right; margin-left: 10px">
                        {% if not settings.logo %} - {% endif %}
                        {{ request.user.scope }}
                    </div>
                {% endif %}
            </a>
        </h1>

        <!-- Top Navigation: Left Menu -->
        {% if request.user.is_authenticated %}
        <ul class="nav navbar-nav navbar-left navbar-top-links">
            <li><a class="ajax" href="/admin/" title="{{ _("Main") }}"><i class="fa fa-home fa-fw"></i></a></li>
            <li><a class="ajax referrer-link" href="javascript:" title="{{ _("Back") }}"><i class="fa fa-arrow-left fa-fw"></i></a>
        </ul>
        {% endif %}

        <!-- Top Navigation: Right Menu -->
        {% if request.user.is_authenticated %}
        <ul class="nav navbar-right navbar-top-links">
            {% if alerts %}
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-bell fa-fw"></i> <b class="caret"></b>
                    <span class="notification-label">{{ alerts|length }}</span>
                </a>
                <ul class="dropdown-menu dropdown-alerts">
                    {% for item in alerts %}
                    <li>
                        <a href="{{ item.url }}" class="ajax">
                            <div>
                                <i class="fa fa-comment {{ item.icon }}"></i> {{ item.title }}
                                <span class="pull-right text-muted small">{{ item.description }}</span>
                            </div>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </li>
            {% endif %}
            <li class="dropdown">
                <a class="dropdown-toggle" href="javascript:" title="{{ _("Settings") }}" onclick="$('#user-drop-down').toggle()">
                    <span class="hide-mobile">{{ request.user.name }}</span> <i class="fa fa-ellipsis-v fa-fw"></i></b>
                </a>
                <div id="user-drop-down" class="dropdown-menu" onmouseleave="$(this).toggle()">

                    <div class="padding-md">
                            {% if not request.session.side_menu_size %}
                            <div style="text-align: center">
                                <img src="{{ request.user|photo }}" alt='{{ _("Photo") }} {{ _("of") }} {{ request.user.name }}' class="img-circle" width="100" height="100">
                            </div>
                            {% endif %}
                            <div>
                                <ul class="dropdown-user">
                                    <li><a class="popup" href="/admin/profile/"><i class="fa fa-user fa-fw"></i> {{ _("Edit Profile") }}</a></li>
                                    {% if request.user.is_superuser %}
                                        <li><a class="ajax" href="/admin/configure/"><i class="fa fa-gear fa-fw"></i> {{ _("Settings") }}</a></li>
                                        <li class="divider"></li>
                                        <li><a href="/list/admin/group/" title="{{ _("Groups") }}" class="ajax"><i class="fa fa-users fa-fw"></i> {{ _("Groups") }}</a></li>
                                        <li><a href="/list/admin/permission/" title="{{ _("Permissions") }}" class="ajax"><i class="fa fa-check fa-fw"></i> {{ _("Permissions") }}</a></li>
                                        <li><a href="/list/admin/user/" title="{{ _("Users") }}" class="ajax"><i class="fa fa-user-plus fa-fw"></i> {{ _("Users") }}</a></li>
                                        <li><a class="ajax" href="/list/admin/log/" title="{{ _("Logs") }}"><i class="fa fa-history fa-fw"></i> {{ _("Logs") }}</a></li>
                                        <li class="divider"></li>
                                        <li><a target="_blank" href="/admin/icons/" title="{{ _("Icons") }}"><i class="fa fa-wrench fa-fw"></i> {{ _("Icons") }}</a>
                                        <li><a target="_blank" href="/docs/doc/" title="{{ _("Documentation") }}"><i class="fa fa-copy fa-fw"></i> {{ _("Documentation") }}</a>
                                        <li><a target="_blank" href="/docs/tutorial/" title="{{ _("Videos") }}"><i class="fa fa-desktop fa-fw"></i> {{ _("Videos") }}</a>
                                        <li><a target="_blank" href="/docs/homologate/" title="{{ _("Homologate") }}"><i class="fa fa-thumbs-o-up fa-fw"></i> {{ _("Homologate") }}</a>
                                        <li class="divider"></li>
                                    {% endif %}
                                    </li>
                                </ul>
                            </div>
                    </div>
                    {% if role_selector.groups or role_selector.scopes %}
                    <div class="padding-md" style="min-height:100px; border-top: 1px solid #e5e5e5">
                        {{ role_selector|safe }}
                    </div>
                    {% endif %}
                    <div class="padding-md">
                        <div align="center">
                            <ul class="dropdown-user">
                                <li>
                                    <a href="/admin/logout/"><i class="fa fa-sign-out fa-fw"></i> {{ _("Logout") }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        {% endif %}
    </header>

    <!-- Sidebar -->
    {% if request.user.is_authenticated %}
        {{ menu|safe }}
    {% endif %}
    <!-- Page Content -->
    <main id="page-wrapper">
            {% if request.user.is_authenticated %}
                {{  breadcrumbs(request, title) }}
            {% else %}
                <br>
            {% endif %}
            {% for message in messages %}
            {% if 'error' in message.tags %}
                <div class="padding-md">
                <div class="alert alert-danger">
                    {{ message }}
                </div>
                </div>
            {% endif %}
            {% endfor %}
        <div>
{% endif %}
            <div {% if not request.GET.popup %}id="content"{% endif %}>
                {% block content %}

                {% endblock %}
            </div>
{% if not request.GET.popup %}
                <div align="right" class="copyright">
                    {% if settings.company %}
                        &copy; {{ settings.company }} |
                    {% endif %}
                    {% if settings.address %}
                        {{ settings.address }} |
                    {% endif %}
                    {% if settings.phone_1 %}
                        {{ settings.phone_1 }} |
                    {% endif %}
                    {% if settings.phone_2 %}
                        {{ settings.phone_2 }} |
                    {% endif %}
                    {% if settings.email %}
                        {{ settings.email }} |
                    {% endif %}
                    {{ _("Version") }} {{ settings.version }}
                </div>
        </div>
    </main>

    </div>

</body>
{% endif %}
{% endblock %}
