@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</span>
    </div>
  </div>
} @else {
  <div class="header header--nav">
    <a class="brand" routerLink="/">
      <div class="logo">S</div>
      <span class="brand-name">Scouthub</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()) {
        <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-secondary btn-secondary--sm" (click)="logout()">Esci</div>
      } @else {
        <div class="btn-secondary btn-secondary--sm" (click)="login()">Accedi</div>
      }
    </div>
  </div>
}