@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()) {
        <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>
}