<ion-content fullscreen>

  <!-- ======================================================
       Header
  ====================================================== -->
  <ion-header>
  </ion-header>

  <!-- ======================================================
       Fehlernachricht und Ladeindikator
  ====================================================== -->
  <ion-grid>
    <!-- Fehlernachricht anzeigen -->
    <ion-row *ngIf="errorMessage">
      <ion-col size="12" class="ion-text-center">
        <ion-text color="danger">
          <p>{{ errorMessage }}</p>
        </ion-text>
      </ion-col>
    </ion-row>

    <!-- Ladeindikator -->
    <ion-row *ngIf="loadingArrivals && arrivals.length === 0">
      <ion-col size="12" class="ion-text-center">
        <ion-spinner name="crescent"></ion-spinner>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- ======================================================
       Grid-Container für Arrivals Kacheln
  ====================================================== -->
  <div class="grid-container" *ngIf="!loadingArrivals && pages.length > 0">
    <ion-card *ngFor="let aviso of pages[currentPageIndex]; let i = index"
              class="arrival-card"
              [ngClass]="getStatusClass(aviso.status, aviso.lkW_fertig, aviso.avisoTVHinweis)">

      <!-- Nummer links oben (Kachel-Index in der aktuellen Seite) -->
      <div class="card-number">{{ getOverallIndex(i) }}</div>

      <!-- Wenn kein Hinweis oder 'shouldShowNormalContent' == true -> normaler Inhalt -->
      <ng-container *ngIf="shouldShowNormalContent(aviso); else showAvisoHinweis">
        <div class="flex-container">

          <!-- LKW-Nummer -->
          <div class="lkwnr"
               appAutoFontSize
               [maxFontSizePercentage]="34"
               [maxFontSize]="avisoTvSettings[0].kachelFontSizeLkwNummer">
            {{ aviso.lkW_Nr }}
          </div>

          <!-- Datum / Zeit / Dauer -->
          <div class="ion-text-center"
               appAutoFontSize
               [maxFontSizePercentage]="33"
               [maxFontSize]="avisoTvSettings[0].kachelFontSizeDateTime">
            <ion-icon [name]="getStatusIcon(aviso.status)"
                      [color]="getStatusColor(aviso.status)"
                      class="inline-icon">
            </ion-icon>
            {{ aviso.ankunft }}
            <ion-icon name="hourglass-outline"
                      [color]="getStatusColor(aviso.status)"
                      class="inline-icon">
            </ion-icon>
            {{ aviso.dauer }}
          </div>

          <!-- Mitarbeiter / Wechseltext (nur bei fertigem LKW ohne Hinweis) -->
          <div class="ion-text-center"
               appAutoFontSize
               [maxFontSizePercentage]="33"
               [maxFontSize]="avisoTvSettings[0].kachelFontSizeDateTime"
               [ngClass]="{'wechseltextdiv': toggleWechselText && aviso.lkW_fertig && !aviso.avisoTVHinweis}">

            <!-- Icon -->
            <ion-icon name="person-outline"
                      [ngClass]="{'wechseltext': toggleWechselText && aviso.lkW_fertig && !aviso.avisoTVHinweis}">
            </ion-icon>

            <!-- Wenn LKW fertig und KEIN Hinweis => Text wechseln -->
            <ng-container *ngIf="aviso.lkW_fertig && !aviso.avisoTVHinweis; else noToggleText">
              {{
 toggleWechselText
                  ? 'BITTE KOMMEN / LÜTFEN GELIN'
                  : (aviso.letzterMitarbeiter || 'Mitarbeiter nicht verfügbar')
              }}
            </ng-container>

            <!-- Fallback: normaler Mitarbeiter-Text -->
            <ng-template #noToggleText>
              {{ aviso.letzterMitarbeiter }}
            </ng-template>

          </div>
        </div>

        <!-- Hinweis-Bildchen (Passport, Problem etc.) -->
        <div *ngIf="aviso.avisoTVHinweis"
             [ngClass]="getImageClassButtomLeft(aviso.avisoTVHinweis)"
             class="blinking-image bottom-left-image-problem">
          <img [src]="getTvHinweisImgSrc(aviso.avisoTVHinweis)" alt="Aviso Hinweis" />
        </div>

        <!-- LKW fertig + kein Hinweis => OK-Badge -->
        <div *ngIf="aviso.lkW_fertig && aviso.avisoTVHinweis == '' " class="bottom-left-image-round">
          <img src="assets/warnings/okRound.png" alt="Fertig / OK" />
        </div>

        <!-- Zusätzliche IM/EX-Icons (Standort 'WAI') -->
        <div *ngIf="standort === 'WAI' || standort === 'SBG'">
          <div class="bottom-right-icon-im" *ngIf="aviso.imEx === 'IMPORT' || aviso.imEx === ''">
            <img src="assets/icon/import_icon.png"
                 style="width: 0.7em; aspect-ratio: 10 / 12" />
          </div>
          <div class="bottom-right-icon-ex" *ngIf="aviso.imEx === 'EXPORT'">
            <img src="assets/icon/import_icon.png"
                 style="width: 0.7em; aspect-ratio: 10 / 12" />
          </div>
        </div>
      </ng-container>

      <!-- ======================================================
           ELSE: Hinweis-Anzeige
      ====================================================== -->
      <ng-template #showAvisoHinweis>
        <div class="flex-container-hinweis">
          <div class="lkwnr" style="margin-top: 1%; margin-bottom: 1%"
               appAutoFontSize
               [maxFontSizePercentage]="30">
            {{ aviso.avisoTVHinweis }}
          </div>
          <div class="ion-text-center">
            <img [src]="getTvHinweisImgSrc(aviso.avisoTVHinweis)"
                 [ngClass]="getImageClass(aviso.avisoTVHinweis)"
                 alt="Aviso Hinweis" />
          </div>
        </div>

        <!-- IM/EX-Icons bei Hinweisen (nur Standort 'WAI') -->
        <div *ngIf="standort === 'WAI' || standort === 'SBG'">
          <div class="bottom-right-icon" *ngIf="aviso.imEx === 'IMPORT' || aviso.imEx === '' ">
            <ion-icon name="download-outline"></ion-icon>
          </div>
          <div class="bottom-right-icon" *ngIf="aviso.imEx === 'EXPORT'">
            <ion-icon name="upload-outline"></ion-icon>
          </div>
        </div>
      </ng-template>
    </ion-card>
  </div>

  <!-- ======================================================
       Keine Ankünfte
  ====================================================== -->
  <ion-grid>
    <ion-row *ngIf="!loadingArrivals && arrivals.length === 0 && !errorMessage">
      <ion-col size="12" class="ion-text-center">
        <ion-text>
          <p>Keine Ankünfte gefunden.</p>
        </ion-text>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

<!-- ======================================================
     Logobar mit Progress Bar
====================================================== -->
<ion-progress-bar [value]="progressBarValue"
                  class="custom-progress-bar"
                  buffer="1">
</ion-progress-bar>
<ion-toolbar class="logobar">

  <!-- Start Slot -->
  <span slot="start" class="title" style="margin-left:0.3%">
    {{ currentDate | date: 'HH:mm:ss' }} <br />
    {{ currentDate | date: 'dd.MM.yyyy' }}
  </span>

  <!-- Logo und Icons Container -->
  <div class="logo-and-icons">
    <img [src]="'assets/Logos/' + avisoTvSettings[0].logo" class="logo" />

    <!-- Legende für WAI (Import / Export) -->
    <div *ngIf="standort === 'WAI' || standort === 'SBG'" class="title legendecontainer">
      <div class="div-import">
        <img src="assets/icon/import_icon.png"
             style="width: 0.8em; aspect-ratio: 10 / 12" /> = IMPORT
      </div>
      <div class="div-export">
        <img src="assets/icon/export_icon_1.png"
             style="width: 0.8em; aspect-ratio: 10 / 12" /> = EXPORT
      </div>
    </div>
  </div>

  <!-- End Slot -->
  <span slot="end" class="title" style="margin-right:0.3%">
    ({{ totalArrivals }}) <br />
    {{ currentPageIndex + 1 }} / {{ pages.length }}
  </span>
</ion-toolbar>

<!-- ======================================================
     Footer mit Tabs
====================================================== -->
<ion-footer class="no-border-footer">
  <ng-container *ngFor="let setting of avisoTvTextSettings; let i = index">
    <ng-container *ngIf="setting.isActive && settingDisplayData[i]?.nonEmptyFixeZeilen?.length">
      <ion-item lines="none" class="no-border-item">
        <div [innerHTML]="settingDisplayData[i].nonEmptyFixeZeilen[settingDisplayData[i].currentDivIndex].sanitizedHtml"
             autoResizeText
             [style.text-align]="settingDisplayData[i].nonEmptyFixeZeilen[settingDisplayData[i].currentDivIndex].textAlign"
             class="htmltext responsive-title">
        </div>
      </ion-item>

      <div class="tabs-container"
           style="display: flex; justify-content: center; background-color:transparent;">
        <div class="custom-segment">
          <button *ngFor="let item of settingDisplayData[i].nonEmptyFixeZeilen; let j = index"
                  (click)="settingDisplayData[i].currentDivIndex = j"
                  [class.active]="settingDisplayData[i].currentDivIndex === j"
                  class="custom-segment-button">
            <img [src]="getImageForTab(j)" alt="Tab Image" class="tab-image" />
          </button>
        </div>
      </div>
    </ng-container>
  </ng-container>
</ion-footer>
