<ng-container *transloco="let t">
  @let invalidSelection = !validSelection();
  @let invalidSelectWarningValue = invalidSelectionWarning();
  @let selectedItemsValue = selectedItems();

  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">{{title()}}</h4>
    <button type="button" class="btn-close" [attr.aria-label]="t('common.close')" (click)="close()"></button>
  </div>

  <div class="modal-body">

    <app-loading [loading]="loading()"></app-loading>

    @let itemsValue = items();
    @let filteredItemsValue = filteredItems();
    @let descriptionValue = description();
    @let itemsBeforeVirtualValue = itemsBeforeVirtual();

    @if (descriptionValue) {
      <span class="text-muted"> {{descriptionValue}} </span>
    }
    @if (invalidSelection) {
      <span class="text-danger"> {{invalidSelectWarningValue}} </span>
    }
    @if (hideItemsWhenInvalid() && hiddenItems() > 0) {
      <span class="text-warning" role="alert">{{t(hiddenTranslationKey(), {amount: hiddenItems()})}}</span>
    }

    <form [formGroup]="filterForm">

      @if (itemsValue.length > itemsBeforeFilter()) {
        <div class="mb-3">
          <label for="filter" class="form-label">{{t('common.filter')}}</label>
          <div class="input-group">
            <input id="filter" autocomplete="off" class="form-control" formControlName="query" type="text" aria-describedby="reset-input">
            <button class="btn btn-outline-secondary" type="button" id="reset-input" (click)="clear()">{{t('common.clear')}}</button>
          </div>
        </div>
      }
    </form>

    <ul class="list-group">
      @if (!loading()) {

        @if (itemsBeforeVirtualValue && itemsValue.length > itemsBeforeVirtualValue) {

          <virtual-scroller
            #scroll
            [items]="filteredItemsValue"
          >

            <div #container>
              @for (item of scroll.viewPortItems; track $index) {
                <li class="list-group-item clickable" tabindex="0" role="option" (click)="select(item)" [class.disabled]="!isItemValid(item)">
                  <div class="p-2 group-item d-flex justify-content-between align-items-center">

                    <ng-container [ngTemplateOutlet]="finalItemTemplate()"
                                  [ngTemplateOutletContext]="{ $implicit: item, index: $index, first: $first, last: $last, selectedItems: selectedItemsValue }" >
                    </ng-container>

                  </div>
                </li>
              }
            </div>

          </virtual-scroller>

        } @else {
          @for(item of filteredItemsValue; track $index) {
            <li class="list-group-item clickable" tabindex="0" role="option" (click)="select(item)" [class.disabled]="!isItemValid(item)">
              <div class="p-2 group-item d-flex justify-content-between align-items-center">

                <ng-container [ngTemplateOutlet]="finalItemTemplate()"
                              [ngTemplateOutletContext]="{ $implicit: item, index: $index, first: $first, last: $last, selectedItems: selectedItemsValue }" >
                </ng-container>

              </div>
            </li>
          }
        }
      }
    </ul>

  </div>

  @if (showFooter()) {
    <div class="modal-footer">
      @if (showCreate()) {
        <div class="input-group">
          <label class="form-label visually-hidden" for="create-input">{{createLabel() ?? ''}}</label>
          <input id="create-input" type="text" class="form-control"
                 [formControl]="createControl" [placeholder]="createLabel() ?? ''">
          <button type="button" class="btn btn-primary" [disabled]="isCreating() || createControl.invalid" (click)="create()">
            {{createButtonLabel() ?? t('common.create')}}
          </button>
        </div>
      } @else {
        <button type="button" class="btn btn-secondary" (click)="close()">{{t('common.close')}}</button>

        @if (showConfirm()) {
          <button type="button" class="btn btn-primary" (click)="confirm()" [disabled]="invalidSelection">{{t('common.confirm')}}</button>
        }
      }
    </div>
  }

</ng-container>

<ng-template #defaultTemplate let-item let-selectedItems='selectedItems'>
  <div class="fw-bold">{{item.label | sentenceCase}}</div>

  @if (!showCreate() && selectedItems && selectedItems.includes(item)) {
    <span class="pill p-1 ms-1">{{ selectedText() }}</span>
  }
</ng-template>
