@if (attivita(); as a) {
  <div class="page">
    <div class="branca-row">
      @for (branca of a.brancaList; track branca.id) {
        <span class="branca-dot" [style.background]="branca.colore" [title]="branca.nome"></span>
        @if (branca.stato === 'DA_APPROVARE') {
          <span class="badge-attesa" title="In attesa di conferma">⚠️</span>
        }
      }
      <span class="branca-nomi">{{ brancaNomi() }}</span>
    </div>
    <h1 class="titolo">{{ a.nome }}</h1>
    <div class="meta">
      Di {{ a.autore }} · Aggiornata il {{ dataModificaFmt() }} ·
      <span class="stato" [style.color]="statoTextColor()">{{ a.stato.nome }}</span>
    </div>
    <div class="chips-row">
      @for (categoria of a.categoriaList; track categoria.id) {
        <span class="chip chip--categoria">
          {{ categoria.nome }}
          @if (categoria.stato === 'DA_APPROVARE') {
            <span class="badge-attesa" title="In attesa di conferma">⚠️</span>
          }
        </span>
      }
      @for (periodo of a.periodoAnnoList; track periodo.id) {
        <span class="chip chip--periodo">
          {{ periodo.nome }}
          @if (periodo.stato === 'DA_APPROVARE') {
            <span class="badge-attesa" title="In attesa di conferma">⚠️</span>
          }
        </span>
      }
    </div>

    @if (a.materialeList.length > 0) {
      <div class="materiale-box">
        <div class="materiale-title">Materiale occorrente</div>
        <div class="materiale-list">
          @for (materiale of a.materialeList; track materiale.id) {
            <div class="materiale-item">
              <span class="materiale-icon">🧰</span>
              <span class="materiale-nome">{{ materiale.nome }}</span>
              @if (materiale.proprieta) {
                <span class="materiale-proprieta">— {{ materiale.proprieta }}</span>
              }
            </div>
          }
        </div>
      </div>
    }

    <div class="paragrafi">
      @for (paragrafo of paragrafiOrdinati(); track paragrafo.id) {
        @if (isTitolo(paragrafo)) {
          <h2 class="paragrafo-titolo">{{ paragrafo.corpo }}</h2>
        } @else {
          <p class="paragrafo-corpo">
            @for (token of tokens(paragrafo); track $index) {
              <span [style.font-weight]="token.weight" [style.font-style]="token.style">{{ token.text }}</span>
            }
          </p>
        }
      }
    </div>

    @if (puoModerare()) {
      <div class="moderazione-box">
        <div class="moderazione-title">Moderazione</div>
        <div class="moderazione-azioni">
          <button class="btn-primary" [disabled]="azioneInCorso()" (click)="approva()">✓ Approva e pubblica</button>
        </div>
        <textarea
          class="moderazione-textarea"
          placeholder="Scrivi una nota per l'autore: l'attività tornerà in bozza per essere sistemata..."
          [value]="testoCommento()"
          (input)="testoCommento.set($any($event.target).value)"
        ></textarea>
        <button
          class="btn-secondary"
          [disabled]="azioneInCorso() || !testoCommento().trim()"
          (click)="commenta()"
        >
          Commenta e rimanda all'autore
        </button>
      </div>
    }

    @if (a.noteList && a.noteList.length > 0) {
      <div class="note-box">
        <div class="note-title">Note di moderazione</div>
        @for (nota of a.noteList; track nota.id) {
          <div class="nota">
            <div class="nota-meta">{{ nota.autore }} · {{ formatNotaData(nota.dataCreazione) }}</div>
            <div class="nota-testo">{{ nota.testo }}</div>
            @if (puoCancellareNote()) {
              <button class="nota-elimina" (click)="eliminaNota(nota.id)">Elimina nota</button>
            }
          </div>
        }
      </div>
    }
  </div>
}

@if (!attivita() && !caricamento()) {
  <div class="page empty-state">Attività non trovata.</div>
}