<sky-modal
  class="sky-lookup-show-more-modal"
  [attr.id]="id"
  [ngClass]="'sky-lookup-show-more-modal-' + context.selectMode"
>
  <sky-modal-header>
    @if (context.userConfig?.title) {
      {{ context.userConfig.title }}
    } @else {
      {{
        'skyux_lookup_show_more_modal_title'
          | skyLibResources: context.selectionDescriptor
      }}
    }
  </sky-modal-header>
  <sky-modal-content
    [skyViewkeeper]="['.sky-lookup-show-more-toolbar-wrapper']"
  >
    <sky-wait [isWaiting]="isSearching" />
    <div class="sky-lookup-show-more-toolbar-wrapper">
      <sky-toolbar
        class="sky-lookup-show-more-modal-toolbar"
        [listDescriptor]="context.selectionDescriptor"
      >
        <sky-toolbar-section>
          <sky-toolbar-item>
            <sky-search
              [debounceTime]="250"
              [searchText]="searchText"
              (searchApply)="searchApplied($event)"
            />
          </sky-toolbar-item>
          <sky-toolbar-view-actions>
            @if (context.showAddButton) {
              <button
                type="button"
                class="sky-btn sky-btn-link sky-lookup-show-more-modal-add"
                [attr.aria-label]="
                  'skyux_lookup_show_more_add_button_aria_label'
                    | skyLibResources: context.selectionDescriptor
                "
                (click)="addButtonClicked()"
              >
                <sky-icon icon="add" />
                {{ 'skyux_lookup_show_more_add' | skyLibResources }}
              </button>
            }
          </sky-toolbar-view-actions>
        </sky-toolbar-section>
      </sky-toolbar>
      @if (context.selectMode === 'multiple') {
        <sky-toolbar class="sky-lookup-show-more-modal-multiselect-toolbar">
          <sky-toolbar-section>
            <sky-toolbar-item>
              <button
                class="sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn"
                type="button"
                [attr.aria-label]="
                  'skyux_lookup_show_more_select_all_button_aria_label'
                    | skyLibResources: context.selectionDescriptor
                "
                (click)="selectAll()"
              >
                {{
                  'skyux_lookup_show_more_select_all_button_title'
                    | skyLibResources
                }}
              </button>
            </sky-toolbar-item>
            <sky-toolbar-item>
              <button
                class="sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn"
                type="button"
                [attr.aria-label]="
                  'skyux_lookup_show_more_clear_all_button_aria_label'
                    | skyLibResources: context.selectionDescriptor
                "
                (click)="clearAll()"
              >
                {{
                  'skyux_lookup_show_more_clear_all_button_title'
                    | skyLibResources
                }}
              </button>
            </sky-toolbar-item>
            <sky-toolbar-view-actions>
              <sky-checkbox
                [label]="
                  'skyux_lookup_show_more_show_selected_option_aria_label'
                    | skyLibResources: context.selectionDescriptor
                "
                [(checked)]="onlyShowSelected"
                (change)="updateDisplayedItems()"
              >
                <sky-checkbox-label>
                  {{
                    'skyux_lookup_show_more_show_selected_option_title'
                      | skyLibResources
                  }}
                </sky-checkbox-label>
              </sky-checkbox>
            </sky-toolbar-view-actions>
          </sky-toolbar-section>
        </sky-toolbar>
      }
    </div>
    @if (!isSearching && displayedItems.length === 0) {
      <div class="sky-font-deemphasized sky-lookup-show-more-no-results">
        {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}
      </div>
    }
    <sky-repeater class="sky-lookup-show-more-repeater" expandMode="none">
      @for (item of displayedItems; track item) {
        <sky-repeater-item
          [isSelected]="
            item[context.idProperty]
              | skySelectionModalItemSelected: selectedIdMap
          "
          [selectable]="context.selectMode === 'multiple'"
          (click)="itemClick(item)"
          (keyup.enter)="itemClick(item)"
          (isSelectedChange)="onItemSelect($event, item)"
        >
          <sky-repeater-item-content>
            <ng-container
              *ngTemplateOutlet="
                repeaterItemTemplate ?? defaultItemTemplate;
                context: { item: item }
              "
            />
          </sky-repeater-item-content>
        </sky-repeater-item>
      }
    </sky-repeater>
    <sky-infinite-scroll
      [enabled]="hasMoreItems"
      [loading]="isLoadingMore"
      (scrollEnd)="infiniteScrollEnd()"
    />
  </sky-modal-content>
  <sky-modal-footer>
    <button
      class="sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save"
      type="button"
      [attr.aria-label]="
        'skyux_lookup_show_more_select_context'
          | skyLibResources: context.selectionDescriptor
      "
      [disabled]="isSearching"
      (click)="save()"
    >
      {{ 'skyux_lookup_show_more_select' | skyLibResources }}
    </button>
    <button
      class="sky-btn sky-btn-link sky-lookup-show-more-modal-close"
      type="button"
      (click)="modalInstance.close()"
    >
      {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}
    </button>
  </sky-modal-footer>
</sky-modal>

<ng-template #defaultItemTemplate let-item="item">
  {{ item[context.descriptorProperty] }}
</ng-template>
