{% load i18n %}{% load static %}
<header class="eenos-header">
    <button type="button"
            class="eenos-sidebar-toggle"
            id="eenosSidebarToggle"
            data-eenos-header-tooltip
            aria-label="{% translate 'Toggle sidebar' %}"
            title="{% translate 'Toggle sidebar' %}">
        <i data-lucide="panel-left"></i>
    </button>
    <div class="eenos-mobile-brand">
        <a href="{% url 'dashboard' %}">
            <img src="{% get_static_prefix %}{{ theme }}/images/logos/logo-dark.png"
                 alt="Eenos"
                 class="eenos-mobile-logo eenos-mobile-logo-light-theme" />
            <img src="{% get_static_prefix %}{{ theme }}/images/logos/logo-light.png"
                 alt="Eenos"
                 class="eenos-mobile-logo eenos-mobile-logo-dark-theme" />
        </a>
    </div>
    <div class="eenos-header-title">{% translate "WAP" %}</div>
    <div class="eenos-header-spacer"></div>
    <button type="button"
            class="eenos-header-button eenos-global-search-toggle"
            id="eenosGlobalSearchToggle"
            data-eenos-header-tooltip
            title="{% translate 'Search' %}"
            aria-label="{% translate 'Search' %}"
            aria-controls="eenosGlobalSearch"
            aria-expanded="false">
        <i data-lucide="search"></i>
    </button>
    <div class="eenos-global-search" id="eenosGlobalSearch">
        <i data-lucide="search" class="eenos-global-search-icon"></i>
        <input type="search"
               id="eenosGlobalSearchInput"
               placeholder="{% translate 'Search tools, accounts and users...' %}"
               autocomplete="off" />
        <div class="eenos-global-search-results" id="eenosGlobalSearchResults"></div>
    </div>
    <form action="{% url 'set_language' %}"
          method="post"
          id="LanForm1"
          class="eenos-language">
        {% csrf_token %} {% get_current_language as LANGUAGE_CODE %} {% get_available_languages as LANGUAGES %}
        <input type="hidden"
               name="next"
               value="{{ request.get_full_path|slice:'3:' }}" />
        <input type="hidden" name="language" id="eenosLanguage" />
        <div class="dropdown">
            <button type="button"
                    class="eenos-language-button dropdown-toggle"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                    aria-label="{% translate 'Language' %}">
                <i data-lucide="languages"
                   data-eenos-header-tooltip
                   title="{% translate 'Language' %}"
                   aria-hidden="true"></i>
                <span class="d-none d-md-inline"> {% for lang in LANGUAGES %} {% if lang.0 == LANGUAGE_CODE %}{{ lang.1 }}{% endif %} {% endfor %} </span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end eenos-language-menu">
                {% for lang in LANGUAGES %}
                    <li>
                        <a href="#"
                           class="dropdown-item {% if lang.0 == LANGUAGE_CODE %}active{% endif %}"
                           onclick="event.preventDefault(); document.getElementById('eenosLanguage').value='{{ lang.0 }}'; document.getElementById('LanForm1').submit();">
                            <span>{{ lang.1 }}</span>
                            <span class="eenos-language-code">{{ lang.0 }}</span>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </form>
    <button type="button"
            class="eenos-header-button"
            id="eenosThemeToggle"
            data-eenos-header-tooltip
            title="{% translate 'Toggle dark mode' %}"
            aria-label="{% translate 'Toggle dark mode' %}">
        <i data-lucide="moon"></i>
    </button>
    <button type="button"
            class="eenos-header-button d-none"
            id="dashboardHeaderAlerts"
            data-eenos-header-tooltip
            data-alerts-url="{% url 'dashboard_alerts' %}"
            title="{% translate 'View current alerts' %}"
            aria-label="{% translate 'View current alerts' %}">
        <i data-lucide="bell-ring"></i>
        <span class="dashboard-header-alert-count">0</span>
    </button>
    <button type="button"
            class="eenos-header-button"
            id="eenosFullscreenToggle"
            data-eenos-header-tooltip
            title="{% translate 'Fullscreen' %}"
            aria-label="{% translate 'Fullscreen' %}">
        <i data-lucide="maximize"></i>
    </button>
    <div class="dropdown eenos-user">
        <button type="button"
                class="eenos-user-button dropdown-toggle"
                id="page-header-user-dropdown"
                data-bs-toggle="dropdown"
                aria-expanded="false"
                aria-label="{% translate 'Administrator menu' %}">
            <span class="eenos-user-avatar"
                  data-eenos-header-tooltip
                  title="{% translate 'Administrator menu' %}">
                <i data-lucide="shield-user" aria-hidden="true"></i>
            </span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end eenos-user-menu"
            aria-labelledby="page-header-user-dropdown">
            <li>
                <a class="dropdown-item" href="{% url 'changerootpassword' %}">
                    <i data-lucide="key-round"></i>
                    <span>{% translate 'Change Password' %}</span>
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="{% url 'tweak_settings' %}">
                    <i data-lucide="settings-2"></i>
                    <span>{% translate 'Tweak Settings' %}</span>
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="{% url 'basicsetup' %}">
                    <i data-lucide="wrench"></i>
                    <span>{% translate 'Basic Setup' %}</span>
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="{% url 'alertmanagement' %}">
                    <i data-lucide="bell"></i>
                    <span>{% translate 'Alert Manager' %}</span>
                </a>
            </li>
            <li>
                <hr class="dropdown-divider" />
            </li>
            <li>
                <a class="dropdown-item eenos-user-logout" href="{% url 'dologout' %}">
                    <i data-lucide="log-out"></i>
                    <span>{% translate 'Logout' %}</span>
                </a>
            </li>
        </ul>
    </div>
</header>
<div class="modal fade"
     id="dashboardAlertsModal"
     tabindex="-1"
     aria-labelledby="dashboardAlertsModalTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <div class="modal-title fw-semibold" id="dashboardAlertsModalTitle">{% translate "Current Alerts" %}</div>
                    <div class="small text-muted">{% translate "Server conditions that currently require attention." %}</div>
                </div>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="{% translate 'Close' %}"></button>
            </div>
            <div class="modal-body">
                <div class="d-grid gap-3" id="dashboardAlertsList"></div>
            </div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-outline-secondary"
                        data-bs-dismiss="modal">{% translate "Close" %}</button>
            </div>
        </div>
    </div>
</div>