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

  <div class="ct-hero">
    <h1>Cantieri</h1>
    <p>{{ cantieri.length }} cantier{{ cantieri.length === 1 ? 'e' : 'i' }} del condominio</p>
  </div>

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

  @if (loading) {
    <div class="ct-skel">
      @for (i of [1,2,3]; track i) {
        <div class="ct-skel-card"></div>
      }
    </div>
  }

  @if (!loading) {
    <div class="ct-list">
      @for (ws of cantieri; track ws) {
        <article class="ws-card" [attr.data-stato]="isChiuso(ws) ? 'closed' : 'open'" (click)="openDetail(ws)">
          <span class="ws-rail"></span>
          <div class="ws-main">
            <div class="ws-head">
              <h3 class="ws-name">{{ ws.ws_name }}</h3>
              <span class="ws-status" [attr.data-stato]="isChiuso(ws) ? 'closed' : 'open'">
                <ion-icon [name]="isChiuso(ws) ? 'lock-closed' : 'ellipse'"></ion-icon>
                {{ statoLabel(ws) }}
              </span>
            </div>
            <div class="ws-meta">
              @if (ws.ws_address || ws.ws_comune) {
                <span class="m">
                  <ion-icon name="location-outline"></ion-icon>
                  <span>{{ ws.ws_address || ws.ws_comune }}@if (ws.ws_codiceprovincia) {
                    <span> ({{ ws.ws_codiceprovincia }})</span>
                  }</span>
                </span>
              }
              @if (ws.lot_cig) {
                <span class="m"><ion-icon name="pricetag-outline"></ion-icon><span>CIG {{ ws.lot_cig }}</span></span>
              }
              @if (ws.lot_cup) {
                <span class="m"><ion-icon name="pricetag-outline"></ion-icon><span>CUP {{ ws.lot_cup }}</span></span>
              }
              @if (ws.ws_data_inizio) {
                <span class="m"><ion-icon name="calendar-outline"></ion-icon><span>{{ ws.ws_data_inizio | date: 'dd/MM/yyyy' }}</span></span>
              }
            </div>
            @if (ws.ws_description) {
              <p class="ws-desc">{{ ws.ws_description }}</p>
            }
          </div>
          <ion-icon class="ws-chevron" name="chevron-forward"></ion-icon>
        </article>
      }
      @if (cantieri.length === 0) {
        <div class="ct-empty">
          <ion-icon name="business-outline"></ion-icon>
          <h3>Nessun cantiere</h3>
          <p>Non risultano cantieri per il condominio.</p>
        </div>
      }
    </div>
  }
</ion-content>
