<!--
  Questo file fa parte di MyTown.
  MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
  i termini della GNU Affero General Public License come pubblicata dalla
  Free Software Foundation, versione 3.
  Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
  Copyright (C) Kondor Consulting & Services S.r.l.
  SPDX-License-Identifier: AGPL-3.0-or-later
-->
<ion-content class="wf-content" [fullscreen]="true">
  <ion-refresher slot="fixed" (ionRefresh)="load($event)">
    <ion-refresher-content pullingIcon="chevron-down-outline" refreshingSpinner="crescent"></ion-refresher-content>
  </ion-refresher>

  <div class="wf-header">
    <h2>{{ title }}</h2>
  </div>

  @if (loading) {
    <div class="wf-loading">
      <ion-spinner name="crescent"></ion-spinner>
    </div>
  }

  @if (!loading && steps.length === 0) {
    <div class="wf-empty">
      <ion-icon name="time-outline"></ion-icon>
      <p>Nessun passo registrato</p>
    </div>
  }

  <!-- TIMELINE ────────────────────────────────────────────────── -->
  <div class="wf-timeline">
    @for (s of steps; track s; let last = $last) {
      <div class="wf-step" [class.is-last]="last">
        <div class="wf-step-marker">
          <ion-icon [name]="s.done ? 'checkmark-circle' : 'ellipse-outline'" [class.done]="s.done"></ion-icon>
        </div>
        <div class="wf-step-body">
          <div class="wf-step-head" (click)="toggle(s)">
            <div class="wf-step-head-main">
              <h3>{{ s.label }}</h3>
              @if (s.date) {
                <span class="wf-date">{{ s.date | date: 'dd/MM/yyyy HH:mm' }}</span>
              }
            </div>
            <span class="wf-badge" [class.done]="s.done">{{ s.done ? 'Completato' : 'In corso' }}</span>
            @if (hasDetails(s)) {
              <ion-icon
                class="wf-toggle"
              [name]="s.expanded ? 'chevron-up-outline' : 'chevron-down-outline'"></ion-icon>
            }
          </div>
          <!-- DETTAGLIO STEP (espandibile) -->
          @if (s.expanded) {
            <div class="wf-step-detail">
              <!-- dati inseriti -->
              @for (f of s.fields; track f) {
                <!-- nota / istruzioni: chiusa, si apre cliccando l'icona -->
                @if (f.isNote) {
                  <div class="wf-note" [class.open]="f.open">
                    <button type="button" class="wf-note-toggle" (click)="f.open = !f.open">
                      <ion-icon name="information-circle-outline"></ion-icon>
                      <span class="wf-note-title">{{ f.label || 'Note' }}</span>
                      <ion-icon class="wf-note-caret" [name]="f.open ? 'chevron-up-outline' : 'chevron-down-outline'"></ion-icon>
                    </button>
                    @if (f.open) {
                      <span class="wf-note-text">{{ f.value }}</span>
                    }
                  </div>
                }
                <!-- file (type 8) -->
                @if (f.type === 8 && f.files.length) {
                  <div class="wf-field">
                    <span class="wf-field-label">{{ f.label }}</span>
                    <div class="wf-field-files">
                      @for (file of f.files; track file) {
                        <button class="wf-file" (click)="openUploaded(file)">
                          <icon [ngClass]="fileIcon(file.fileOrigName)"></icon>
                          <span>{{ file.fileOrigName }}</span>
                          <ion-icon name="download-outline"></ion-icon>
                        </button>
                      }
                    </div>
                  </div>
                }
                <!-- campo testuale -->
                @if (!f.isNote && f.type !== 8) {
                  <div class="wf-field">
                    <span class="wf-field-label">{{ f.label }}</span>
                    <span class="wf-field-value">{{ f.value }}</span>
                  </div>
                }
              }
              <!-- snapshot entità web (popolato lato portale) -->
              @if (s.snapshot) {
                <div class="wf-snapshot">
                  @if (s.snapshot.title) {
                    <h4>{{ s.snapshot.title }}</h4>
                  }
                  @for (f of s.snapshot.fields; track f) {
                    <div class="wf-field">
                      <span class="wf-field-label">{{ f.label }}</span>
                      <span class="wf-field-value">{{ f.value }}</span>
                    </div>
                  }
                  @for (file of s.snapshot.files; track file) {
                    <button class="wf-file" (click)="openSnapshotFile(file)">
                      <icon [ngClass]="fileIcon(file.filename, file.mime)"></icon>
                      <span>{{ file.filename || 'Apri file' }}</span>
                      <ion-icon name="download-outline"></ion-icon>
                    </button>
                  }
                </div>
              }
            </div>
          }
        </div>
      </div>
    }
  </div>
</ion-content>
