<!--
  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-grid [style.padding-bottom.px]="inline ? 0 : 140">
  <ion-row>
    @for (card of cards; track card) {
      <ion-col size="12" size-sm="6" size-md="4" size-lg="3">
        <div class="modern-card" [ngClass]="card.srv_background_class" (click)="handleCardClick(card)" #cardElement [attr.data-card-id]="getServiceUniqueId(card)">
          <!-- Background Image Overlay -->
          @if (card.srv_background_image) {
            <div class="image-overlay" [ngStyle]="getImageOverlayStyles(card)"></div>
          }
          <!-- Favorite Star Badge -->
          @if (isFavorite(card)) {
            <div class="favorite-star">
              <ion-icon name="heart"></ion-icon>
            </div>
          }
          <!-- Distance Badge -->
          @if (card.srv_show_distance && getCardDistanceLabel(card); as dist) {
            <div class="distance-badge">
              <ion-icon name="location-outline"></ion-icon>
              {{ dist }}
            </div>
          }
          <!-- Card Header -->
          <div class="card-header">
            @if (card.srv_show_icon && card.srv_icon) {
              <div class="card-icon">
                <icon [ngClass]="card.srv_icon" />
              </div>
            }
            @if (card.srv_show_cmp_logo && card.company.cmp_logo_b64) {
              <div class="card-logo">
                <ion-img [src]="'data:image/png;base64,' + card.company.cmp_logo_b64" style="height: 100%; border-radius: 8px"></ion-img>
              </div>
            }
          </div>
          <!-- Card Content -->
          <div class="card-content">
            @if (card.srv_show_company_name && card.company.name) {
              <h3 class="company-name">
                {{ card.company.name }}
              </h3>
            }
            @if (card.srv_show_service_name && card.srv_name_view) {
              @if (!(card.srv_show_company_name && card.company.name)) {
                <h3 class="service-name service-name-hero">
                  {{ card.srv_name_view }}
                </h3>
              } @else {
                <p class="service-name">{{ card.srv_name_view }}</p>
              }
            }
            @if (card.srv_description) {
              <p class="description">
                {{ card.srv_description }}
              </p>
            }
          </div>
          <!-- Ripple Effect -->
          <ion-ripple-effect></ion-ripple-effect>
        </div>
      </ion-col>
    }
  </ion-row>
</ion-grid>

<!-- No Results Message -->
@if (cards.length === 0) {
  <ion-card class="no-results">
    <ion-card-content>
      <ion-icon name="search-outline" size="large" color="medium"></ion-icon>
      <p>Nessun servizio trovato</p>
    </ion-card-content>
  </ion-card>
}
