@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>
      }
      <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 }}</span>
      }
      @for (periodo of a.periodoAnnoList; track periodo.id) {
        <span class="chip chip--periodo">{{ periodo.nome }}</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>
  </div>
}

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