{% load cache %}

{% cache 3600 app_nav app_nav_cache_id %}

    {% load navigation %}
    {% load staticfiles %}

    <nav class="xsd-nav-app" id="xsd-nav-app" role="navigation">
        <div class="xsd-nav-app__container">
            <div class="xsd-nav-app__hamburger">
                <i class="fa fa-bars"></i>
            </div>

            <a class="xsd-nav-app__brand" href="/">
                <img src="{% static 'svg/logo-scuba-white-trimmed.svg' %}" alt="Logo" class="xsd-nav-app__brand-logo"/>
                {{ l10n_club.name }}
            </a>

            <div class="xsd-nav-app__title">
                {{ page_title }}
            </div>

            <ul class="xsd-nav-app__nav xsd-nav-app__nav--animate">
                <div class="xsd-nav-app__nav-inner">
                    <li class="xsd-nav-app__nav-item xsd-nav-app__nav-dashboard {% if app == "xsd_frontend" %}active selected{% endif %}"
                        data-app-name="xsd-dashboard">
                        <a class="xsd-nav-app__nav-link" href="/">
                            <div class="xsd-nav-app__nav-link-text">
                                <img src="{% static 'svg/logo-scuba-white-trimmed.svg' %}" alt="Logo"
                                     class="xsd-nav-app__nav-link-text-logo"/>
                                <span class="text">{{ l10n_club.name }}</span>
                            </div>
                        </a>
                        <div class="xsd-nav-app__nav-module">

                        </div>
                    </li>

                    {% for app in app_list %}
                        <li class="xsd-nav-app__nav-item {% if app.active %}active selected{% endif %} xsd-nav-app__nav-item-{{ app.app }} {% if app.app == "xsd_auth" %}dropdown{% endif %}"
                            data-app-name="{{ app.app }}">
                            <a {% if app.app == "xsd_auth" %}data-toggle="dropdown"{% endif %}
                               class="xsd-nav-app__nav-link"
                               {% if app.url %}href="{% url app.url %}"{% endif %}>
                                <div class="xsd-nav-app__nav-link-text">
                                    <i class="{{ app.icon }} fa-fw xsd-nav-app__nav-link-icon"></i>
                                    {% if app.app == "xsd_auth" %}
                                        {{ request.user.get_full_name }}
                                        <i class="fa fa-caret-down xsd-nav-app__nav-item-xsd_auth__i-dropdown"></i>
                                    {% else %}
                                        <span class="xsd-nav-app__nav-link-title">
                                            {{ app.title }}
                                        </span>
                                    {% endif %}
                                </div>
                            </a>
                            {% if app.app == "xsd_auth" %}
                                <div class="xsd-nav-app__nav-module dropdown-menu dropdown-menu-right">
                                    {% app_module_nav app.app %}
                                </div>
                            {% else %}
                                <div class="xsd-nav-app__nav-module">
                                    {% app_module_nav app.app %}
                                </div>
                            {% endif %}
                        </li>
                    {% endfor %}
                    <li class="xsd-nav-app__nav-item xsd-nav-app__nav-help {% if app == "xsd_help" %}active selected{% endif %}"
                        data-app-name="xsd-help">
                        <a class="xsd-nav-app__nav-link" href="/help/">
                            <div class="xsd-nav-app__nav-link-text">
                                <i class="fa fa-question-circle fa-fw"></i>
                                <span class="text">Help</span>
                            </div>
                        </a>
                        <div class="xsd-nav-app__nav-module">
                            <ul class="xsd-nav-module">
                                <li class="xsd-nav-module__item">
                                    <a class="xsd-nav-module__link {% if app == "xsd_help" %}active{% endif %}"
                                       href="/help/">
                                        <div class="xsd-nav-module__link-text">
                                            <i class="fa fa-question fa-fw"></i>
                                            User Documentation
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </div>
            </ul>
        </div>
    </nav>

    <div class="xsd-nav-app__blur"></div>

{% endcache %}