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

	<!-- Loading: skeleton che replica la forma delle card reali -->
	@if(loading && notifications.length === 0) {
	<div class="notif-list">
		@for(s of [1, 2, 3, 4, 5]; track s) {
		<div class="notif-item skeleton">
			<div class="notif-content">
				<ion-skeleton-text [animated]="true" style="width: 55%; height: 14px; border-radius: 4px"></ion-skeleton-text>
				<ion-skeleton-text [animated]="true" style="width: 90%; height: 11px; border-radius: 4px; margin-top: 8px"></ion-skeleton-text>
				<ion-skeleton-text [animated]="true" style="width: 40%; height: 11px; border-radius: 4px; margin-top: 5px"></ion-skeleton-text>
			</div>
		</div>
		}
	</div>
	}

	@if(!loading && notifications.length === 0) {
	<div class="empty-state">
		<div class="empty-icon-ring">
			<ion-icon name="notifications-off-outline"></ion-icon>
		</div>
		<p class="empty-title">Nessuna notifica</p>
		<p class="empty-sub">Quando arriverà qualcosa di nuovo lo troverai qui.</p>
	</div>
	}

	@if(notifications.length > 0) {
	<div class="notif-list">
		@if(unreadCount > 0) {
		<div class="unread-summary">{{ unreadCount }} da leggere</div>
		}

		@for(group of groups; track group.label) {
		<div class="notif-group">
			<div class="group-label">{{ group.label }}</div>

			@for(notif of group.items; track notif.usrnot_id) {
			<div class="notif-item" [class.unread]="!notif.usrnot_dateread" [style.--i]="$index" (click)="openDetail(notif)">
				@if(!notif.usrnot_dateread) {
				<div class="notif-dot-col">
					<div class="notif-dot"></div>
				</div>
				}
				<div class="notif-content">
					<div class="notif-top">
						<div class="notif-title" [innerHTML]="notif.usrnot_title"></div>
						<div class="notif-time">{{ getTimeAgo(notif.usrnot_datesent) }}</div>
					</div>
					<div class="notif-message" [innerHTML]="notif.usrnot_message_it"></div>
					@if (notif.usrnot_image) {
					<div class="notif-image-wrap">
						<img [src]="getImageUrl(notif.usrnot_image)" class="notif-image" alt="" loading="lazy" />
					</div>
					}
				</div>
			</div>
			}
		</div>
		}
	</div>
	}

	<ion-infinite-scroll (ionInfinite)="loadMore($event)" [disabled]="notifications.length >= totalrows">
		<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="Caricamento..."> </ion-infinite-scroll-content>
	</ion-infinite-scroll>
</ion-content>

<!-- Dettaglio notifica: messaggio integrale, senza clamp -->
<ion-modal class="notif-detail-modal" [isOpen]="detailOpen" (didDismiss)="onDetailDismiss()">
	<ng-template>
		<ion-header class="ion-no-border">
			<ion-toolbar class="modal-toolbar">
				<ion-buttons slot="start">
					<ion-button (click)="detailOpen = false">
						<ion-icon name="close" slot="icon-only"></ion-icon>
					</ion-button>
				</ion-buttons>
				<ion-title>Notifica</ion-title>
			</ion-toolbar>
		</ion-header>
		<ion-content class="modal-content">
			@if (detailTarget?.usrnot_image) {
			<div class="detail-media">
				<img [src]="getImageUrl(detailTarget.usrnot_image)" alt="" />
			</div>
			}

			<div class="detail-body">
				<h2 class="detail-title" [innerHTML]="detailTarget?.usrnot_title"></h2>
				<div class="detail-date">
					<ion-icon name="time-outline"></ion-icon>
					{{ getFullDate(detailTarget?.usrnot_datesent) }}
				</div>
				<div class="detail-desc" [innerHTML]="detailTarget?.usrnot_message_it"></div>
			</div>
		</ion-content>
	</ng-template>
</ion-modal>
