<ng-container *transloco="let t; prefix: 'card-detail-layout'">
  <app-loading [loading]="isLoading()" />

  @if (header().length > 0) {
    <div class="row mt-2 g-0 pb-2">
      <div class="col me-auto">
        <h4>
          <span>
            <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions()" [labelBy]="header()" />
          </span>

          <span class="ms-1">
            {{header()}}&nbsp;
            @if (effectivePagination(); as p) {
              <span class="badge bg-primary rounded-pill"
              [attr.aria-label]="t('total-items', {count: p.totalItems})">{{p.totalItems}}</span>
            }
          </span>

        </h4>
      </div>
    </div>
  }

  @if (filterSettings(); as fs) {
    <app-metadata-filter [filterSettings]="fs" [filterOpen]="filterOpen()!" (applyFilter)="applyMetadataFilter($event)">
      <ng-template #extraButtons>
        <ng-container [ngTemplateOutlet]="extraButtonsRef()" />
      </ng-template>
    </app-metadata-filter>
  }

  <ng-container [ngTemplateOutlet]="topBar()" />

  <div class="viewport-container ms-1" [ngClass]="{'empty': items().length === 0 && !isLoading()}">
    <div class="content-container">
      <div class="card-container">
        @if (items().length === 0 && !isLoading()) {
          <p><ng-container [ngTemplateOutlet]="noDataTemplate()" /></p>
        }

        <virtual-scroller [ngClass]="{'empty': items().length === 0 && !isLoading()}" #scroll [items]="items()" [bufferAmount]="bufferAmount" [parentScroll]="parentScroll()!">
          <div class="grid row g-0" #container id="card-detail-layout-items-container" [style.grid-template-columns]="gridColumnsTemplate()">
            @for (item of scroll.viewPortItems; track trackItem(i, item); let i = $index) {
              <div class="card col-auto mt-2 mb-2 card-detail-layout-item"
                (click)="tryToSaveJumpKey(item)"
                id="jumpbar-index--{{i}}"
                [attr.jumpbar-index]="i">
                <ng-container [ngTemplateOutlet]="itemTemplate()" [ngTemplateOutletContext]="{ $implicit: item, idx: scroll.viewPortInfo.startIndexWithBuffer + i }" />
              </div>
            }
          </div>
        </virtual-scroller>
      </div>
    </div>


    @if (jumpBarKeysToRender().length >= 4 && items().length > 0 && scroll.viewPortInfo.maxScrollPosition > 0) {
      <ng-container [ngTemplateOutlet]="jumpBar" [ngTemplateOutletContext]="{ id: 'jumpbar' }" />
    }
  </div>

  <ng-template #cardTemplate>
    <virtual-scroller #scroll [items]="items()" [bufferAmount]="bufferAmount">
      <div class="grid row g-0" #container>

        @for (item of scroll.viewPortItems; track trackItem(i, item); let i = $index) {
          <div class="card col-auto mt-2 mb-2" (click)="tryToSaveJumpKey(item)" id="jumpbar-index--{{i}}" [attr.jumpbar-index]="i">
            <ng-container [ngTemplateOutlet]="itemTemplate()" [ngTemplateOutletContext]="{ $implicit: item, idx: i }" />
          </div>
        }

      </div>
    </virtual-scroller>

    @if (items().length === 0 && !isLoading()) {
      <div class="mx-auto" style="width: 12.5rem;">
        <p>
          @if (noDataTemplate()) {
            <ng-container [ngTemplateOutlet]="noDataTemplate()" />
          } @else {
            {{t('no-data')}}
          }
        </p>
      </div>
    }

  </ng-template>

  <ng-template #jumpBar>
    <div class="jump-bar">
      @for(jumpKey of jumpBarKeysToRender(); track jumpKey.key; let i = $index) {
        <button class="btn btn-link flip-button" [ngClass]="{'disabled': hasCustomSort()}"
          (click)="scrollTo(jumpKey)">
          <div class="flip-button-inner">
            <div class="flip-button-front">{{jumpKey.title}}</div>
            <div class="flip-button-back">{{jumpKey.size}}</div>
          </div>
        </button>
      }
    </div>
  </ng-template>
</ng-container>
