{% extends "_raw.html" %}

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

{% block raw_content %}
<div id="popup-overlay" class="fixed inset-0 opacity-75 bg-gray-800 hidden"></div>

<header class="fixed h-14 pl-56 top-0 inset-x-0 flex flex-wrap z-50 bg-gray-300">
    <div class="flex-1 relative w-full"></div>
    {% if debug and request.user.is_staff %}
        <a href="/admin" target="_blank" rel="noopener noreferrer"
           class="relative px-2 pt-4 text-gray-800 hover:bg-gray-200 border-r border-gray-400">
            <i data-feather="sliders"></i>
            {% trans 'Django Admin' %}
        </a>
    {% endif %}
    <a href="{% url 'wiki_redirect' %}" target="_blank" rel="noopener noreferrer"
       class="relative px-2 pt-4 text-gray-800 hover:bg-gray-200 border-r border-gray-400">
        <img class="inline-block" fill="none" width="21" height="21" src="{% static 'images/integreat-icon-contur-only.png' %}">
        {% trans 'Documentation (Wiki)' %}
    </a>
    <div id="region-selector" class="relative flex flex-col justify-center px-2 cursor-pointer text-gray-800 hover:bg-gray-200 border-r border-gray-400">
        <div class="flex flex-wrap">
            {% if request.region %}
                <a href="{% url 'dashboard' region_slug=request.region.slug %}" class="block whitespace-nowrap">
                    <i data-feather="home"></i>
                    {{ request.region.full_name }}
                    {% if request.region_selection or user.is_superuser or user.is_staff %}
                        <i data-feather="chevron-down"></i>
                    {% endif %}
                </a>
            {% else %}
                <a href="{% url 'admin_dashboard' %}" class="block whitespace-nowrap">
                    <i data-feather="grid"></i>
                    {% trans 'Network Management' %}
                    {% if request.region_selection or user.is_superuser or user.is_staff %}
                        <i data-feather="chevron-down"></i>
                    {% endif %}
                </a>
            {% endif %}
        </div>
        <div id="region-list" class="absolute hidden shadow rounded-b top-full right-0 bg-gray-200">
            {% for region in request.region_selection %}
                <a href="{% url 'dashboard' region_slug=region.slug %}"
                   class="block whitespace-nowrap px-4 py-3 text-gray-800 hover:bg-gray-300">
                    <i data-feather="home"></i>
                    {{ region.full_name }}
                </a>
            {% endfor %}
            {% if user.is_superuser or user.is_staff %}
                {% if request.region %}
                    <a href="{% url 'admin_dashboard' %}"
                       class="block whitespace-nowrap px-4 py-3 text-gray-800 hover:bg-gray-300 rounded-b">
                        <i data-feather="grid"></i>
                        {% trans 'Network Management' %}
                    </a>
                {% endif %}
            {% endif %}
        </div>
    </div>
    <div id="user-info" class="relative px-2 text-gray-800 flex flex-col justify-center cursor-pointer hover:bg-gray-200">
        <a href="{% if request.region %}{% url 'user_settings' region_slug=request.region.slug %}{% else %}{% url 'user_settings' %}{% endif %}" class="relative block whitespace-nowrap">
            <i data-feather="user"></i>
            {{ request.user.full_user_name }}
            <i data-feather="chevron-down"></i>
        </a>
        <div id="user-menu" class="absolute hidden shadow rounded-b top-full right-0 bg-gray-200">
            <a href="{% if request.region %}{% url 'user_settings' region_slug=request.region.slug %}{% else %}{% url 'user_settings' %}{% endif %}" class="relative block whitespace-nowrap px-4 py-3 text-gray-800 hover:bg-gray-400">
                <i data-feather="settings"></i>
                {% trans 'User Settings' %}
            </a>
            <a href="{% url 'logout' %}" class="relative block whitespace-nowrap px-4 py-3 text-gray-800 hover:bg-gray-400 rounded-b">
                <i data-feather="log-out" class="text-red-500"></i>
                {% trans 'Log out' %}
            </a>
        </div>
    </div>
</header>
<nav id="primary-navigation" class="w-56 h-full fixed left-0 inset-y-0 text-gray-300 bg-gray-600 z-50">
    <div class="w-full p-1 h-14 bg-gray-700">
        <a href="/">
            <div class="h-full w-full bg-logo-white hover:bg-logo-yellow bg-contain bg-center bg-no-repeat"></div>
        </a>
    </div>
    <div id="menu" class="pb-2 overflow-y-auto">
        {% if request.region %}
            <a href="{% url 'dashboard' region_slug=request.region.slug %}"
               class="{% if current_menu_item == 'region_dashboard' %} active {% endif %}">
                <i data-feather="grid"></i>
                {% trans 'My Dashboard' %}
            </a>
            <!-- Analysis Section -->
            <div class="{% if current_menu_item|in_list:'analytics,statistics,translation_coverage,app_size,linkcheck' %} active {% endif %}">
                <a href="{% url 'analytics' region_slug=request.region.slug %}"
                   class="{% if current_menu_item == 'analytics' %} active {% endif %}">
                    <i data-feather="activity"></i>
                    {% trans 'Analytics' %}
                </a>
                <div class="dropdown-container">
                    {% if request.region.statistics_enabled %}
                    <a href="{% url 'statistics' region_slug=request.region.slug %}"
                       class="{% if current_menu_item == 'statistics' %} active {% endif %}">
                        <i data-feather="bar-chart"></i>
                        {% trans 'Statistics' %}
                    </a>
                    {% endif %}
                    <a href="{% url 'translation_coverage' region_slug=request.region.slug %}"
                       class="{% if current_menu_item == 'translation_coverage' %} active {% endif %}">
                        <i data-feather="check-circle"></i>
                        {% trans 'Translation Report' %}
                    </a>
                    <a href="{% url 'app_size' region_slug=request.region.slug %}"
                       class="{% if current_menu_item == 'app_size' %} active {% endif %}">
                        <i data-feather="package"></i>
                        {% trans 'Size of the App' %}
                    </a>
                    <a href="{% url 'linkcheck_landing' region_slug=request.region.slug %}"
                       class="{% if current_menu_item == 'linkcheck' %} active {% endif %}">
                        <i data-feather="link"></i>
                        {% trans 'Broken Link Checker' %}
                    </a>
                </div>
            </div>
            <!-- Content Section -->
            <div class="min-h-3 pl-2">
                <p class="font-bold"> {% trans "Contents" %} </p>
            </div>
            {% if perms.cms.view_directory and perms.cms.view_mediafile %}
                <a href="{% url 'media' region_slug=request.region.slug %}" class="{% if current_menu_item == 'media' %} active {% endif %}">
                    <i data-feather='file'></i>
                    {% trans 'Media Library' %}
                </a>
            {% endif %}
            {% if perms.cms.view_page %}
                <div class="{% if current_menu_item|in_list:'pages,new_page' %} active {% endif %}">
                    <a href="{% url 'pages' region_slug=request.region.slug %}">
                        <i data-feather="layout"></i>
                        {% trans 'Pages' %}
                    </a>
                </div>
            {% endif %}
            {% if perms.cms.view_event %}
                <div class="{% if current_menu_item|in_list:'events,events_form' %} active {% endif %}">
                    <a href="{% url 'events' region_slug=request.region.slug %}">
                        <i data-feather="calendar"></i>
                        {% trans 'Events' %}
                    </a>
                </div>
            {% endif %}
            {% if perms.cms.view_poi %}
                <div class="{% if current_menu_item|in_list:'pois,pois_form' %} active {% endif %}">
                    <a href="{% url 'pois' region_slug=request.region.slug %}">
                        <i data-feather="map-pin"></i>
                        {% trans 'Locations on Map' %}
                    </a>
                </div>
            {% endif %}
            {% if perms.cms.view_feedback %}
                <a href="{% url 'region_feedback' region_slug=request.region.slug %}"
                   class="{% if current_menu_item == 'region_feedback' %} active {% endif %}">
                    <i data-feather="thumbs-up"></i>
                    {% trans 'Feedback' %}
                </a>
            {% endif %}
            {% if perms.cms.view_pushnotification %}
                <div  class="{% if current_menu_item|in_list:'push_notifications,push_notifications_form' %} active {% endif %}">
                    <a href="{% url 'push_notifications' region_slug=request.region.slug %}">
                        <i data-feather="send"></i>
                        {% trans 'News' %}
                    </a>
                </div>
            {% endif %}
            {% if perms.cms.view_imprintpage %}
                <a href="{% url 'edit_imprint' region_slug=request.region.slug %}"
                   class="{% if current_menu_item == 'imprint' %} active {% endif %}">
                    <i data-feather="file-text"></i>
                    {% trans 'Imprint' %}
                </a>
            {% endif %}
            {% if perms.cms.view_user or perms.cms.view_languagetreenode %}
                <!-- Settings Section-->
                <div class="min-h-3 pl-2">
                    <p class="font-bold"> {% trans "Settings" %} </p>
                </div>
            {% endif %}
            {% if perms.cms.view_user %}
                <div class="{% if current_menu_item|in_list:'region_users,region_user_form' %} active {% endif %}">
                    <a href="{% url 'region_users' region_slug=request.region.slug %}">
                        <i data-feather="users"></i>
                        {% trans 'Users' %}
                    </a>
                </div>
            {% endif %}
            {% if perms.cms.view_languagetreenode %}
                <a href="{% url 'language_tree' region_slug=request.region.slug %}" class="{% if current_menu_item|in_list:'language_tree,language_tree_form' %} active {% endif %}">
                    <i data-feather="flag"></i>
                    {% trans 'Language Tree' %}
                </a>
            {% endif %}
        {% else %}
            <a href="{% url 'admin_dashboard' %}" class="{% if current_menu_item == 'admin_dashboard' %} active {% endif %}">
                <i data-feather="grid"></i>
                {% trans 'Admin Dashboard' %}
            </a>
            {% if perms.cms.view_region %}
                <a href="{% url 'regions' %}" class="{% if current_menu_item == 'regions' %} active {% endif %}">
                    <i data-feather="map"></i>
                    {% trans 'Regions' %}
                </a>
            {% endif %}
            {% if perms.cms.view_directory and perms.cms.view_mediafile %}
            <a href="{% url 'media_admin' %}" class="{% if current_menu_item == 'media' %} active {% endif %}">
                <i data-feather='file'></i>
                {% trans 'Media Library' %}
            </a>
            {% endif %}
            {% if perms.cms.view_language %}
                <a href="{% url 'languages' %}" class="{% if current_menu_item == 'languages' %} active {% endif %}">
                    <i data-feather="flag"></i>
                    {% trans 'Languages' %}
                </a>
            {% endif %}
            {% if perms.cms.view_user %}
                <div class="{% if current_menu_item|in_list:'users,user_form' %} active {% endif %}">
                    <a href="{% url 'users' %}">
                        <i data-feather="users"></i>
                        {% trans 'Users' %}
                    </a>
                </div>
            {% endif %}
            {% if perms.auth.view_group %}
                <a href="{% url 'roles' %}" class="{% if current_menu_item == 'roles' %} active {% endif %}">
                    <i data-feather="key"></i>
                    {% trans 'Roles' %}
                </a>
            {% endif %}
            {% if perms.cms.view_organization %}
                <a href="{% url 'organizations' %}" class="{% if current_menu_item == 'organizations' %} active {% endif %}">
                    <i data-feather="umbrella"></i>
                    {% trans 'Organizations' %}
                </a>
            {% endif %}
            {% if perms.cms.view_offer_template %}
                <a href="{% url 'offertemplates' %}" class="{% if current_menu_item == 'offertemplates' %} active {% endif %}">
                    <i data-feather="star"></i>
                    {% trans 'Offer Templates' %}
                </a>
            {% endif %}
            {% if perms.cms.view_feedback %}
                <a href="{% url 'admin_feedback'%}" class="{% if current_menu_item == 'admin_feedback' %} active {% endif %}">
                    <i data-feather="thumbs-up"></i>
                    {% trans 'Feedback' %}
                </a>
            {% endif %}
        {% endif %}
    </div>
    <div class="p-2 text-center absolute inset-x-0 bottom-0 bg-gray-700">
        {% trans 'Version' %}: {{ version }}
    </div>
</nav>
<main class="relative min-h-screen flex pl-56 pt-14 bg-gray-100">
    <div class="flex-1 min-w-0 p-6">
        {% include "messages.html" %}
        {% block content %}{% endblock content %}
    </div>
</main>
{% endblock %}