<!--
  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-header class="app-header ion-no-border">
  <ion-toolbar color="primary">
    <!-- Left Section: Back Button or Menu -->
    <ion-buttons slot="start">
      @if (view_btn_back) {
        <ion-button (click)="goBack()">
          <ion-icon name="arrow-back-outline" slot="icon-only"></ion-icon>
        </ion-button>
      }
      @if (!view_btn_back) {
        <ion-menu-button></ion-menu-button>
      }
    </ion-buttons>

    <!-- Center Section: Title -->
    <ion-title>
      <span class="section-title">{{ nome_sezione }}</span>
    </ion-title>

    <!-- Right Section: User Avatar and Menu -->
    @if(config.isLogged()){
      <ion-buttons slot="end">
        <!-- Geolocation button -->
        <ion-button class="geo-button" (click)="onGeoClick()" [title]="geoTitle">
          <ion-icon [name]="geoIcon" [color]="geoColor" class="geo-icon" [class.geo-loading]="geoStatus === 'loading'"></ion-icon>
        </ion-button>

        <ion-button class="notification-button" (click)="goToNotifications()">
          <ion-icon name="notifications-outline"></ion-icon>
          @if(unreadCount > 0) {
            <ion-badge color="danger" class="notification-badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</ion-badge>
          }
        </ion-button>

        <!-- User Avatar Button -->
        <ion-button (click)="presentUserMenu($event)" class="avatar-button">
          <div class="user-avatar-wrapper">
            @if (getUserAvatar()) {
              <img [src]="getUserAvatar()" alt="avatar" class="user-avatar user-avatar--img" />
            } @else {
              <div class="user-avatar" style="background: var(--app-brand); color: var(--app-on-brand);">
                {{ getUserInitials() }}
              </div>
            }
          </div>
        </ion-button>
      </ion-buttons>
    }
  </ion-toolbar>

  <!-- Secondary Toolbar for User Info (Optional - can be shown/hidden) -->
  @if(showUserInfo && config.isLogged()){
    <ion-toolbar color="primary" class="user-info-toolbar">
      <div class="user-info-container">
        <ion-chip color="light">
          <ion-avatar>
            @if (getUserAvatar()) {
              <img [src]="getUserAvatar()" alt="avatar" class="mini-avatar mini-avatar--img" />
            } @else {
              <div class="mini-avatar" style="background: var(--app-brand); color: var(--app-on-brand);">
                {{ getUserInitials() }}
              </div>
            }
          </ion-avatar>
          <ion-label>{{ getUserFullName() }}</ion-label>
        </ion-chip>
        <ion-text color="light" class="user-role">
          {{ getUserRole() }}
        </ion-text>
      </div>
    </ion-toolbar>
  }
  <div class="header-inward">
    <div class="header-mask"></div>
  </div>
</ion-header>
