<!--
  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="sl-content">
  <ion-refresher slot="fixed" (ionRefresh)="load($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <div class="sl-hero">
    <h1>Sopralluoghi</h1>
    <p>{{ sopralluoghi.length }} sopralluoghi del condominio</p>
  </div>

  <div class="sl-search">
    <ion-icon name="search-outline"></ion-icon>
    <input type="text" placeholder="Cerca sopralluogo…" [(ngModel)]="search" (input)="onSearch()" />
    @if (search) {
      <ion-icon name="close-circle" (click)="search = ''; onSearch()"></ion-icon>
    }
  </div>

  @if (!loading) {
    <div class="sl-list">
      @for (s of sopralluoghi; track s) {
        <div class="sl-card" (click)="apri(s)">
          <span class="sl-rail" [style.background]="'var(--ion-color-' + statoColor(s) + ')'"></span>
          <div class="sl-info">
            <span class="nm">{{ s.sl_descrizione_oggetto || s.sl_protocollo || ('Sopralluogo #' + s.sl_id) }}</span>
            <span class="sub">
              @if (s.ws_name) {
                <span>{{ s.ws_name }}</span>
              }
              @if (s.tpi_descrizione) {
                <span> · {{ s.tpi_descrizione }}</span>
              }
              @if (s.sl_data_apertura_sopralluogo) {
                <span> · {{ s.sl_data_apertura_sopralluogo | date: 'dd/MM/yyyy' }}</span>
              }
            </span>
          </div>
          <div class="sl-badges">
            @if (isRfi(s)) {
              <ion-badge color="medium">RFI</ion-badge>
            }
            <ion-badge [color]="statoColor(s)">{{ statoLabel(s) }}</ion-badge>
          </div>
        </div>
      }
      @if (sopralluoghi.length === 0) {
        <div class="sl-empty">
          <ion-icon name="search-outline"></ion-icon>
          <h3>Nessun sopralluogo</h3>
          <p>Crea il primo sopralluogo o aprilo da un cantiere.</p>
        </div>
      }
    </div>
  }

  <!-- FAB nuovo (solo con funzione 'add' del modulo) — coerente con Assemblee -->
  @if (canCreate) {
    <ion-fab slot="fixed" vertical="bottom" horizontal="end">
      <ion-fab-button (click)="nuovo()">
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  }
</ion-content>
