<!-- ═══════════════════════════════════════════════════
     HEADER – Wird von admin.html, priority.html und customer.html eingebunden.
     Zeigt CANCOM-Logo, Standort-Dropdown, Theme-Toggle und Logout.
     Erwartet im Kontext: site_list, current_site, brand_subtitle, site_dropdown_url_prefix
     ═══════════════════════════════════════════════════ -->
<header class="navbar navbar-expand-md d-print-none brand-surface">
  <div class="container-xl">
    <!-- Logo + Titel -->
    <div class="navbar-brand navbar-brand-autodark pe-0 pe-md-3">
      <img class="navbar-brand-logo me-3" src="{{ url_for('static', filename='cancom.svg') }}" alt="CANCOM Logo">
      <span class="navbar-brand-wordmark">
        <strong>Simple Signage</strong>
        <span>{{ brand_subtitle }}</span>
      </span>
    </div>

    <!-- Aktionen: Standort-Dropdown, +Button, Theme, Logout -->
    <div class="navbar-nav flex-row order-md-last top-actions">
      <!-- Standort-Auswahl -->
      {% if current_user.is_authenticated %}
      <div class="dropdown me-2">
        <a class="btn btn-outline-secondary" href="#" data-bs-toggle="dropdown">
          <i class="ti ti-building me-1"></i>{{ current_site | capitalize }} <i class="ti ti-chevron-down"></i>
        </a>
        <div class="dropdown-menu">
          {% for s in site_list %}
            <a class="dropdown-item{% if s == current_site %} active{% endif %}"
               href="{{ site_dropdown_url_prefix }}{{ s }}"><i class="ti ti-building me-1"></i>{{ s | capitalize }}</a>
          {% endfor %}
        </div>
      </div>

      <!-- Neuen Standort anlegen (+ Button) -->
      <a class="btn btn-outline-secondary me-2" href="javascript:void(0)"
         onclick="var n=prompt('Name des neuen Standorts:'); if(n&&n.trim()) location.href='/add-site?name='+encodeURIComponent(n.trim().toLowerCase());"
         title="Neuen Standort anlegen"
         style="display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;min-height:2.5rem;padding:0;"><i class="ti ti-plus"></i></a>
      {% endif %}

      <!-- Dark-Mode-Toggle (persistiert in localStorage("signage-theme")) -->
      <div>
        <button class="btn btn-outline-secondary theme-toggle" id="theme-toggle" title="Dark Mode umschalten">
          <i class="ti ti-moon"></i>
        </button>
      </div>

      <!-- User-Dropdown (Passwort ändern, Userverwaltung, Abmelden) -->
      {% if current_user.is_authenticated %}
      <div class="dropdown ms-2">
        <a class="btn btn-outline-secondary text-nowrap" href="#" data-bs-toggle="dropdown">
          <i class="ti ti-user me-1"></i>{{ current_user.email }}{% if current_user.is_admin %}<span class="badge bg-red text-red-fg ms-2" style="font-size:0.6rem;">Admin</span>{% elif current_user.is_superuser %}<span class="badge bg-purple text-purple-fg ms-2" style="font-size:0.6rem;">Superuser</span>{% else %}<span class="badge bg-blue text-blue-fg ms-2" style="font-size:0.6rem;">User</span>{% endif %} <i class="ti ti-chevron-down"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-end">
          <a class="dropdown-item" href="/change-password"><i class="ti ti-key me-1"></i>Passwort ändern</a>
          <a class="dropdown-item" href="/mfa/setup"><i class="ti ti-shield me-1"></i>MFA einrichten{% if current_user.mfa_enabled %} <span class="badge bg-green text-green-fg ms-1" style="font-size:0.6rem;">Aktiv</span>{% endif %}</a>
          <a class="dropdown-item" href="/admin/help"><i class="ti ti-help me-1"></i>Hilfe</a>
          {% if current_user.is_admin %}
          <a class="dropdown-item" href="/admin/dashboard"><i class="ti ti-dashboard me-1"></i>Admin Dashboard</a>
          <a class="dropdown-item" href="/admin/users"><i class="ti ti-users me-1"></i>Userverwaltung</a>
          {% endif %}
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="/logout"><i class="ti ti-logout me-1"></i>Abmelden</a>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</header>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const themeToggle = document.getElementById("theme-toggle");
  const root = document.documentElement;
  const syncThemeToggle = () => {
    const theme = root.getAttribute("data-bs-theme") || "light";
    if (!themeToggle) return;
    themeToggle.innerHTML = theme === "dark"
      ? '<i class="ti ti-sun"></i>'
      : '<i class="ti ti-moon"></i>';
  };
  if (themeToggle) {
    syncThemeToggle();
    themeToggle.addEventListener("click", () => {
      const nextTheme = (root.getAttribute("data-bs-theme") || "light") === "dark" ? "light" : "dark";
      root.setAttribute("data-bs-theme", nextTheme);
      window.localStorage.setItem("signage-theme", nextTheme);
      syncThemeToggle();
    });
  }
});
</script>
