{% load i18n %}
{% get_current_language as CURRENT_LANGUAGE %}
<div class="app-header{% if header_inside_shell %} app-header-in-shell{% endif %}">
  <a class="app-brand" href="/" aria-label="{% trans 'Zur Startseite' %}">
    <img class="app-brand-logo" src="{{ portal_logo_url }}" alt="{{ portal_company_name }} Logo" />
  </a>
  <div class="app-header-actions">
    {% if header_show_lang %}
      <form method="post" action="{% url 'set_language' %}" class="app-lang-switch">
        {% csrf_token %}
        <input type="hidden" name="next" value="{{ request.get_full_path }}" />
        <button class="app-lang-btn {% if CURRENT_LANGUAGE == 'de' %}active{% endif %}" type="submit" name="language" value="de">DE</button>
        <button class="app-lang-btn {% if CURRENT_LANGUAGE == 'en' %}active{% endif %}" type="submit" name="language" value="en">EN</button>
      </form>
    {% endif %}
    {% if header_show_dashboard %}
      <a class="btn btn-secondary" href="/requests/">{% trans "Zum Dashboard" %}</a>
    {% endif %}
    {% if header_show_home %}
      <a class="btn btn-secondary" href="/">{% trans "Zur Startseite" %}</a>
    {% endif %}
    {% if request.user.is_authenticated %}
      <details class="app-notification-menu">
        <summary class="app-notification-trigger" aria-label="{% trans 'Benachrichtigungen' %}">
          <span class="app-notification-bell" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" focusable="false" aria-hidden="true">
              <path d="M12 4.25a4.25 4.25 0 0 0-4.25 4.25v2.04c0 .83-.24 1.65-.69 2.35l-1.2 1.88a1.5 1.5 0 0 0 1.27 2.31h9.74a1.5 1.5 0 0 0 1.27-2.31l-1.2-1.88a4.34 4.34 0 0 1-.69-2.35V8.5A4.25 4.25 0 0 0 12 4.25Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M9.75 18.25a2.25 2.25 0 0 0 4.5 0" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </span>
          {% if header_unread_notification_count %}
          <span class="app-notification-count">{{ header_unread_notification_count }}</span>
          {% endif %}
        </summary>
        <div class="app-notification-panel">
          <div class="app-notification-panel-head">
            <strong>{% trans "Benachrichtigungen" %}</strong>
            {% if header_unread_notification_count %}
            <form method="post" action="{% url 'mark_all_notifications_read' %}">
              {% csrf_token %}
              <input type="hidden" name="next" value="{{ request.get_full_path }}" />
              <button type="submit">{% trans "Alle als gelesen" %}</button>
            </form>
            {% endif %}
          </div>
          {% if header_notifications %}
            <div class="app-notification-list">
              {% for notification in header_notifications %}
              <article class="app-notification-item app-notification-{{ notification.level }}{% if notification.is_unread %} is-unread{% endif %}">
                <div class="app-notification-copy">
                  <strong>{{ notification.title }}</strong>
                  {% if notification.body %}<p>{{ notification.body|truncatechars:140 }}</p>{% endif %}
                  <span>{{ notification.created_at|date:"d.m.Y H:i" }}</span>
                </div>
                <div class="app-notification-actions">
                  {% if notification.link_url %}
                  <a href="{{ notification.link_url }}">{% trans "Öffnen" %}</a>
                  {% endif %}
                  {% if notification.is_unread %}
                  <form method="post" action="{% url 'mark_notification_read' notification.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ request.get_full_path }}" />
                    <button type="submit">{% trans "Gelesen" %}</button>
                  </form>
                  {% endif %}
                </div>
              </article>
              {% endfor %}
            </div>
          {% else %}
            <div class="app-notification-empty">{% trans "Keine Benachrichtigungen vorhanden." %}</div>
          {% endif %}
        </div>
      </details>
      <details class="app-user-menu">
        <summary class="app-user-trigger">
          <span class="app-user-avatar" aria-hidden="true">
            {% if user_avatar_url %}
              <img class="app-user-avatar-image" src="{{ user_avatar_url }}" alt="{% trans 'Profilbild' %}" />
            {% else %}
              {% if request.user.first_name or request.user.last_name %}
                {{ request.user.first_name|slice:":1" }}{{ request.user.last_name|slice:":1" }}
              {% else %}
                {{ request.user.username|slice:":2" }}
              {% endif %}
            {% endif %}
          </span>
          <span class="app-user-copy">
            <strong>{{ request.user.get_full_name|default:request.user.username }}</strong>
            <span>{{ role_label }}</span>
          </span>
          <span class="app-user-caret" aria-hidden="true">▾</span>
        </summary>
        <div class="app-user-panel">
          <div class="app-user-panel-head">
            <strong>{{ request.user.get_full_name|default:request.user.username }}</strong>
            <span>{{ request.user.email|default:request.user.username }}</span>
          </div>
          <a href="{% url 'account_profile_page' %}">{% trans "Profil" %}</a>
          <a href="{% url 'password_change' %}">{% trans "Passwort ändern" %}</a>
          <form method="post" action="{% url 'logout' %}">
            {% csrf_token %}
            <button type="submit">{% trans "Abmelden" %}</button>
          </form>
        </div>
      </details>
    {% endif %}
  </div>
</div>