@if (isDetailOrForm()) {
  <div class="header header--back">
    <div class="back-link" (click)="back()">
      <span class="back-arrow">←</span>
      <span>Indietro</span>
    </div>
    <div class="brand brand--right">
      <div class="logo">S</div>
      <span class="brand-name">Scouthub Magazzino</span>
    </div>
  </div>
} @else {
  <div class="header header--nav">
    <a class="brand" routerLink="/">
      <div class="logo">S</div>
      <span class="brand-name">Scouthub Magazzino</span>
    </a>
    <nav class="nav-items">
      @for (item of navItems(); track item.path) {
        <a class="nav-item" [class.nav-item--active]="isActive(item.path)" [routerLink]="item.path">
          {{ item.label }}
        </a>
      }
    </nav>
    <div class="auth-section">
      @if (isAuthenticated()) {
        @if (isModeratore()) {
          <div class="notifiche">
            <button
              type="button"
              class="campanellina"
              (click)="toggleCampanellina()"
              aria-label="Notifiche"
            >
              🔔
              @if (countNonLette() > 0) {
                <span class="campanellina-badge">{{ countBadge() }}</span>
              }
            </button>
            @if (campanellinaAperta()) {
              <div class="notifiche-overlay" (click)="chiudiCampanellina()"></div>
              <div class="notifiche-dropdown">
                <div class="notifiche-header">
                  <span>Notifiche</span>
                  @if (countNonLette() > 0) {
                    <span class="notifiche-segna-tutte" (click)="segnaTutteLette()">
                      Segna tutte come lette
                    </span>
                  }
                </div>
                @if (notifiche().length === 0) {
                  <div class="notifiche-vuoto">Nessuna notifica</div>
                } @else {
                  @for (notifica of notifiche(); track notifica.id) {
                    <div
                      class="notifica-item"
                      [class.notifica-item--non-letta]="!notifica.letta"
                      (click)="apriNotifica(notifica)"
                    >
                      <span class="notifica-messaggio">{{ notifica.messaggio }}</span>
                    </div>
                  }
                }
              </div>
            }
          </div>
        }
        <span class="auth-name">{{ displayName() }}</span>
        <div class="btn btn-secondary btn-secondary--sm" (click)="logout()">Esci</div>
      } @else {
        <div class="btn btn-secondary btn-secondary--sm" (click)="login()">Accedi</div>
      }
    </div>
  </div>
}