<!--
  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="asm-content">
  <ion-refresher slot="fixed" (ionRefresh)="load($event)">
    <ion-refresher-content pullingIcon="chevron-down-outline" refreshingSpinner="crescent"></ion-refresher-content>
  </ion-refresher>

  <!-- Hero -->
  <div class="asm-hero">
    <div class="asm-hero-txt">
      <h1>Assemblee</h1>
      <p>{{ filtered.length }} {{ filtered.length === 1 ? 'assemblea' : 'assemblee' }}</p>
    </div>
    <button class="asm-cal-btn" (click)="goCalendar()">
      <ion-icon name="calendar-outline"></ion-icon>
      <span>Calendario</span>
    </button>
  </div>

  <!-- Segment -->
  <div class="asm-seg">
    <ion-segment [(ngModel)]="segment" (ionChange)="onSegment()" mode="ios">
      <ion-segment-button value="programmate"><ion-label>Programmate</ion-label></ion-segment-button>
      <ion-segment-button value="concluse"><ion-label>Concluse</ion-label></ion-segment-button>
      <ion-segment-button value="tutte"><ion-label>Tutte</ion-label></ion-segment-button>
    </ion-segment>
  </div>

  <!-- Search -->
  <div class="asm-search">
    <ion-icon name="search-outline"></ion-icon>
    <input type="text" placeholder="Cerca per titolo o luogo…" [(ngModel)]="search" (input)="onSearch()" />
    @if (search) {
      <ion-icon name="close-circle" (click)="search = ''; onSearch()"></ion-icon>
    }
  </div>

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

  <!-- List -->
  @if (!loading) {
    <div class="asm-list">
      @for (a of filtered; track a) {
        <div class="asm-card" [attr.data-status]="a.asm_status" (click)="openDetail(a)">
          <div class="asm-card-accent" [ngClass]="'accent-' + statusColor(a)"></div>
          <div class="asm-card-body">
            <div class="asm-card-top">
              <span class="asm-chip" [ngClass]="'chip-' + tipoColor(a)">{{ tipoLabel(a) }}</span>
              <ion-badge [color]="statusColor(a)">{{ statusLabel(a) }}</ion-badge>
            </div>
            <h2 class="asm-title">{{ a.asm_title }}</h2>
            <div class="asm-meta">
              <div class="asm-meta-row">
                <ion-icon name="calendar-clear-outline"></ion-icon>
                <span><strong>1ª</strong> {{ a.asm_first_call_dt ? (a.asm_first_call_dt | date: 'dd/MM/yyyy HH:mm') : '—' }}</span>
              </div>
              @if (a.asm_second_call_dt) {
                <div class="asm-meta-row">
                  <ion-icon name="calendar-outline"></ion-icon>
                  <span><strong>2ª</strong> {{ a.asm_second_call_dt | date: 'dd/MM/yyyy HH:mm' }}</span>
                </div>
              }
              @if (a.asm_location) {
                <div class="asm-meta-row">
                  <ion-icon name="location-outline"></ion-icon>
                  <span>{{ a.asm_location }}</span>
                </div>
              }
            </div>
            @if (canManage) {
              <div class="asm-stats">
                <div class="asm-stat"><span class="num">{{ a.invitati || 0 }}</span><span class="lbl">Invitati</span></div>
                <div class="asm-stat ok"><span class="num">{{ a.presenti || 0 }}</span><span class="lbl">Presenti</span></div>
                <div class="asm-stat wait"><span class="num">{{ a.senza_risposta || 0 }}</span><span class="lbl">In attesa</span></div>
              </div>
            }
          </div>
          <ion-icon class="asm-card-chevron" name="chevron-forward-outline"></ion-icon>
        </div>
      }
      <!-- Empty -->
      @if (filtered.length === 0) {
        <div class="asm-empty">
          <ion-icon name="people-circle-outline"></ion-icon>
          <h3>Nessuna assemblea</h3>
          <p>{{ segment === 'programmate' ? 'Non ci sono assemblee programmate.' : 'Nessuna assemblea da mostrare.' }}</p>
        </div>
      }
    </div>
  }

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