<!--
~ Copyright (C) 2023 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->

<ion-breadcrumbs
  (ionCollapsedClick)="popover.present($any($event))"
  [maxItems]="maxItems"
  [itemsAfterCollapse]="itemsAfterCollapse"
  [itemsBeforeCollapse]="itemsBeforeCollapse"
>
  @for (item of items; track item) {
    <ion-breadcrumb>
      @if (item) {
        <ion-label class="crumb-label" [routerLink]="['/data-detail', item.uid]">{{
          'name' | thingTranslate: $any(item)
        }}</ion-label>
      }
    </ion-breadcrumb>
  }
</ion-breadcrumbs>
<ion-popover #popover>
  <ng-template>
    <ion-list lines="none">
      @if (moreAnchor === 'start') {
        @if (more | async; as more) {
          @for (item of more; track item) {
            <ng-container [ngTemplateOutlet]="popoverItem" [ngTemplateOutletContext]="{item}"></ng-container>
          }
        }
      }
      @if (showSelfInPopover) {
        @for (item of items; track item) {
          <ng-container [ngTemplateOutlet]="popoverItem" [ngTemplateOutletContext]="{item}"></ng-container>
        }
      }
      @if (moreAnchor === 'end') {
        @if (more | async; as more) {
          @for (item of more; track item) {
            <ng-container [ngTemplateOutlet]="popoverItem" [ngTemplateOutletContext]="{item}"></ng-container>
          }
        }
      }
    </ion-list>
  </ng-template>
</ion-popover>

<ng-template #popoverItem let-item="item">
  @if (item) {
    <ion-item [routerLink]="['/data-detail', item.uid]" (click)="popover.dismiss()">
      {{ 'name' | thingTranslate: $any(item) }}
    </ion-item>
  }
</ng-template>
