<div class="sky-select-field-picker">
  <sky-modal>
    <sky-modal-header>
      {{ headingText }}
    </sky-modal-header>
    <sky-modal-content>
      <div class="sky-select-field-picker-content">
        <sky-list
          [data]="data"
          [selectedIds]="selectedIds"
          (selectedIdsChange)="onSelectedIdsChange($event)"
        >
          <sky-list-toolbar [inMemorySearchEnabled]="inMemorySearchEnabled">
            <sky-list-toolbar-search-actions *ngIf="showAddNewRecordButton">
              <button
                class="sky-btn sky-btn-default sky-select-field-picker-btn-new"
                type="button"
                [attr.title]="
                  'skyux_select_field_add_new_record_button' | skyLibResources
                "
                (click)="onAddNewRecordButtonClick()"
              >
                <sky-icon class="fa-fw" icon="plus-circle" />
                <span class="sky-select-field-picker-btn-new-text">{{
                  'skyux_select_field_add_new_record_button' | skyLibResources
                }}</span>
              </button>
            </sky-list-toolbar-search-actions>
            <sky-list-filter-inline *ngIf="categories && categories.length">
              <sky-list-filter-inline-item
                name="category"
                [defaultValue]="defaultCategory"
                [filter]="filterByCategory"
                [value]="defaultCategory"
              >
                <ng-template let-filter="filter">
                  <select
                    [ngModel]="filter.value"
                    (ngModelChange)="onCategoryChange($event, filter)"
                  >
                    <option [value]="defaultCategory">
                      {{
                        'skyux_select_field_picker_show_all_category'
                          | skyLibResources
                      }}
                    </option>
                    <option
                      *ngFor="let category of categories"
                      [value]="category"
                    >
                      {{ category }}
                    </option>
                  </select>
                </ng-template>
              </sky-list-filter-inline-item>
            </sky-list-filter-inline>
          </sky-list-toolbar>
          <sky-list-view-checklist [selectMode]="selectMode" />
          <sky-list-paging pageSize="6" />
        </sky-list>
      </div>
    </sky-modal-content>
    <sky-modal-footer>
      <button
        type="button"
        class="sky-btn sky-btn-primary sky-select-field-picker-btn-save"
        (click)="save()"
      >
        {{ 'skyux_select_field_picker_save_button' | skyLibResources }}
      </button>
      <button
        type="button"
        class="sky-btn sky-btn-link sky-select-field-picker-btn-close"
        (click)="close()"
      >
        {{ 'skyux_select_field_picker_close_button' | skyLibResources }}
      </button>
    </sky-modal-footer>
  </sky-modal>
</div>
