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

	<div class="fv-hero">
		<h1>Fotovoltaico</h1>
		<p>{{ impianti.length }} impiant{{ impianti.length === 1 ? 'o' : 'i' }}</p>
	</div>

	<div class="fv-search">
		<ion-icon name="search-outline"></ion-icon>
		<input type="text" placeholder="Cerca impianto…" [(ngModel)]="search" (input)="onSearch()" />
		<ion-icon *ngIf="search" name="close-circle" (click)="search = ''; onSearch()"></ion-icon>
	</div>

	<div *ngIf="loading" class="fv-skel">
		<div class="fv-skel-card" *ngFor="let i of [1,2,3]"></div>
	</div>

	<div class="fv-list" *ngIf="!loading">
		<article class="pv-card" *ngFor="let p of impianti" (click)="openCruscotto(p)">
			<span class="pv-rail"></span>
			<div class="pv-icon">
				<ion-icon name="sunny-outline"></ion-icon>
			</div>
			<div class="pv-main">
				<h3 class="pv-name">{{ p.pv_denominazione }}</h3>
				<div class="pv-meta">
					<span class="m" *ngIf="p.pv_indirizzo">
						<ion-icon name="location-outline"></ion-icon>
						<span>{{ p.pv_indirizzo }}</span>
					</span>
					<span class="m" *ngIf="p.pv_potenza_kwp != null">
						<ion-icon name="flash-outline"></ion-icon>
						<span>{{ p.pv_potenza_kwp }} kWp</span>
					</span>
					<span class="m" *ngIf="p.pv_pod">
						<ion-icon name="pricetag-outline"></ion-icon>
						<span>POD {{ p.pv_pod }}</span>
					</span>
				</div>
			</div>
			<ion-icon class="pv-chevron" name="chevron-forward"></ion-icon>
		</article>

		<div *ngIf="impianti.length === 0" class="fv-empty">
			<ion-icon name="sunny-outline"></ion-icon>
			<h3>Nessun impianto</h3>
			<p>Non risultano impianti fotovoltaici disponibili.</p>
		</div>
	</div>
</ion-content>
