<sky-modal>
  <sky-modal-header>
    {{ 'skyux_data_manager_column_picker_title' | skyLibResources }}
  </sky-modal-header>
  <sky-modal-content class="sky-data-manager-column-picker-content">
    <sky-data-manager>
      <sky-data-manager-toolbar />

      <sky-data-view [viewId]="viewConfig.id">
        <sky-repeater expandMode="none">
          @for (column of displayedColumnData; track column) {
            <sky-repeater-item
              [selectable]="true"
              [(isSelected)]="column.isSelected"
              (isSelectedChange)="onIsSelectedChange()"
            >
              <sky-repeater-item-title>
                {{ column.label }}
              </sky-repeater-item-title>
              <sky-repeater-item-content>
                {{ column.description }}
              </sky-repeater-item-content>
            </sky-repeater-item>
          }
        </sky-repeater>
      </sky-data-view>
    </sky-data-manager>
  </sky-modal-content>
  <sky-modal-footer>
    @if (!isAnyDisplayedColumnSelected) {
      <div class="sky-data-manager-column-picker-footer-stacked-indicator">
        <sky-status-indicator descriptionType="error" indicatorType="danger">
          {{
            'skyux_data_manager_select_column_status_indicator_title'
              | skyLibResources
          }}
        </sky-status-indicator>
      </div>
    }
    <button
      sky-cmp-id="apply-changes"
      class="sky-btn sky-btn-primary"
      type="button"
      [disabled]="!isAnyDisplayedColumnSelected"
      (click)="applyChanges()"
    >
      {{ 'skyux_data_manager_apply_changes_button_title' | skyLibResources }}
    </button>
    <button
      sky-cmp-id="cancel"
      class="sky-btn sky-btn-link"
      type="button"
      (click)="cancelChanges()"
    >
      {{ 'skyux_data_manager_cancel_button_title' | skyLibResources }}
    </button>
  </sky-modal-footer>
</sky-modal>
