@if (lista(); as l) {
  <div class="lista-modello-dettaglio om-page">
    <h1 class="lista-modello-dettaglio__titolo">{{ l.nome }}</h1>

    @if (tipoEventoNome()) {
      <span class="lista-modello-dettaglio__chip">{{ tipoEventoNome() }}</span>
    }

    <ul class="lista-modello-dettaglio__voci">
      @for (voce of l.voci; track voce.materialeId) {
        <li>
          <label class="lista-modello-dettaglio__voce">
            <input
              type="checkbox"
              [checked]="isVoceSpuntata(voce.materialeId)"
              (change)="toggleVoce(voce.materialeId)"
            />
            <span [class.lista-modello-dettaglio__voce-testo--spuntata]="isVoceSpuntata(voce.materialeId)">
              {{ voce.nome }} — {{ voce.quantita }} {{ voce.unitaMisura }}
            </span>
          </label>
        </li>
      }
    </ul>

    @for (sottoLista of l.sottoListe; track sottoLista.id) {
      <div class="lista-modello-dettaglio__sotto-lista">
        <label class="lista-modello-dettaglio__voce">
          <input
            type="checkbox"
            [checked]="isSottoListaSpuntata(sottoLista)"
            (change)="toggleSottoLista(sottoLista)"
          />
          <span
            class="lista-modello-dettaglio__sotto-lista-titolo"
            [class.lista-modello-dettaglio__voce-testo--spuntata]="isSottoListaSpuntata(sottoLista)"
          >
            {{ sottoLista.nome }}
          </span>
        </label>
        <ul class="lista-modello-dettaglio__voci lista-modello-dettaglio__voci--indentate">
          @for (voce of sottoLista.voci; track voce.materialeId) {
            <li>
              <label class="lista-modello-dettaglio__voce">
                <input
                  type="checkbox"
                  [checked]="isVoceSpuntata(voce.materialeId)"
                  (change)="toggleVoce(voce.materialeId)"
                />
                <span [class.lista-modello-dettaglio__voce-testo--spuntata]="isVoceSpuntata(voce.materialeId)">
                  {{ voce.nome }} — {{ voce.quantita }} {{ voce.unitaMisura }}
                </span>
              </label>
            </li>
          }
        </ul>
      </div>
    }

    @if (!isAuthenticated) {
      <p class="lista-modello-dettaglio__avviso">Accedi per usare questa lista come base.</p>
    }

    @if (creazioneErrore()) {
      <p class="lista-modello-dettaglio__errore" role="alert">
        Impossibile creare la lista. Riprova più tardi.
      </p>
    }

    @if (isAuthenticated) {
      <button type="button" class="btn btn-primary" [disabled]="creazioneInCorso()" (click)="usaComeBase()">
        Usa come base
      </button>
    }
  </div>
}

@if (!lista() && !loading()) {
  <div class="lista-modello-dettaglio om-page om-empty">Lista non trovata.</div>
}