<!--
  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>
  <!-- ========== BARRA COMPATTA MANAGER (visibile quando collapsed) ========== -->
  @if (headerCollapsed) {
    <div class="mgr-collapsed-bar" (click)="toggleHeader()">
      <div class="mgr-collapsed-bar-info">
        <ion-icon name="business-outline"></ion-icon>
        <span class="mgr-collapsed-bar-name">{{ company?.name || 'Gestione' }}</span>
      </div>
      <div class="mgr-collapsed-bar-action">
        <span>Mostra</span>
        <ion-icon name="chevron-down-outline"></ion-icon>
      </div>
    </div>
  }

  <!-- ========== HERO IMAGE ========== -->
  @if (!headerCollapsed) {
    <div class="hero-section" [class.hero-fallback]="!heroImage" [ngClass]="heroBackgroundClass">
      @if (heroImage) {
        <div class="hero-image-bg" [style.background-image]="'url(' + heroImage + ')'"></div>
      }
      @if (!heroImage) {
        <div class="hero-image-bg hero-image-fallback">
          <ion-icon name="bag-outline" class="hero-fallback-icon"></ion-icon>
        </div>
      }
      <div class="hero-dark-overlay" [style.opacity]="heroImage ? (1 - heroOpacity) : 0.25"></div>
      @if (activeCard) {
        <ion-button fill="clear" class="hero-favorite-btn" (click)="toggleFavorite()">
          <ion-icon [name]="isFavorite ? 'heart' : 'heart-outline'" [class.is-favorite]="isFavorite"></ion-icon>
        </ion-button>
      }
      <ion-button fill="clear" class="hero-collapse-btn" (click)="toggleHeader()">
        <ion-icon name="chevron-up-outline"></ion-icon>
      </ion-button>
    </div>
  }

  @if (!headerCollapsed) {
    <div class="home-container has-hero">
      <!-- ========== COMPANY HEADER ========== -->
      @if (company && !headerCollapsed) {
        <div class="company-header">
          <h4 class="company-name">{{ company.name }}</h4>
          <p class="company-desc">{{ getServiceDescription() }}</p>
          <div class="info-chips-row">
            @if (getCompanyAddress()) {
              <div class="info-chip" (click)="getDirections()">
                <ion-icon name="location-outline"></ion-icon>
                <span>{{ getCompanyAddress() }}</span>
              </div>
            }
            @if (company?.cmp_phone_number) {
              <div class="info-chip" (click)="callCompany()">
                <ion-icon name="call-outline"></ion-icon>
                <span>{{ company.cmp_phone_number }}</span>
              </div>
            }
          </div>
        </div>
      }
      <!-- ========== ACTION BUTTONS ========== -->
      @if (!headerCollapsed) {
        <div class="action-row">
          <div class="action-pill" (click)="goToPrdt()">
            <div class="action-pill-icon"><ion-icon name="bag-handle-outline"></ion-icon></div>
            <span>{{'onlineshop.homepage.prd' | translate}}</span>
          </div>
          <div class="action-pill" (click)="goToCart()">
            <div class="action-pill-icon"><ion-icon name="bag-handle-outline"></ion-icon></div>
            <span>{{'onlineshop.cartpage.cart' | translate}}</span>
          </div>
          <div class="action-pill" (click)="goToOrd()">
            <div class="action-pill-icon"><ion-icon name="albums-outline"></ion-icon></div>
            <span>{{'onlineshop.orderpage.ord' | translate}}</span>
          </div>
        </div>
      }
    </div>
  }

  @for (type of lst_typeproducts; track type; let i = $index) {
    <ion-list (ngModel)="type">
      <ion-list-header>
        <a (click)="goToTprd(type.tpw_id)"><h2 class="os-section-title">{{ type.tpw_name }}</h2></a>
      </ion-list-header>
      <div class="os-scroller">
        @for (item of filtered_lst_products[i]; track item) {
          <ion-card class="os-card" (click)="prd_detail(item.id)">
            <img [src]="onlineshopImageUrl + item.photo[0]?.prph_path_photo_sm" class="os-thumb" />
            <ion-card-header>
              <ion-card-title class="os-card-title">{{item.title}}</ion-card-title>
              <ion-card-subtitle class="os-card-subtitle">{{item.shortdescription}}</ion-card-subtitle>
            </ion-card-header>
            <ion-card-content class="d-flex justify-content-end">
              <span class="os-price">{{item.price | currency:'EUR':'symbol'}}</span>
            </ion-card-content>
          </ion-card>
        }
      </div>
    </ion-list>
  }
</ion-content>

