<div class="sky-data-manager-toolbar">
  <sky-toolbar [listDescriptor]="dataManagerConfig?.listDescriptor">
    <sky-toolbar-section>
      <ng-content select="sky-data-manager-toolbar-primary-item" />

      @if (activeView?.filterButtonEnabled) {
        <sky-toolbar-item>
          <sky-filter-button
            [showButtonText]="activeView?.showFilterButtonText"
            (filterButtonClick)="filterButtonClicked()"
          />
        </sky-toolbar-item>
      }

      @if (activeView?.sortEnabled) {
        <sky-toolbar-item>
          <sky-sort [showButtonText]="activeView?.showSortButtonText">
            @for (item of dataManagerConfig?.sortOptions; track item) {
              <sky-sort-item
                [active]="!!(dataState?.activeSortOption?.id === item.id)"
                (itemSelect)="sortSelected(item)"
              >
                {{ item.label }}
              </sky-sort-item>
            }
          </sky-sort>
        </sky-toolbar-item>
      }

      @if (activeView?.columnPickerEnabled) {
        <sky-toolbar-item>
          <button
            class="sky-btn sky-btn-default sky-col-picker-btn"
            type="button"
            [attr.aria-label]="
              dataManagerConfig?.listDescriptor
                ? ('skyux_data_manager_columns_button_aria_label'
                  | skyLibResources: dataManagerConfig?.listDescriptor)
                : ('skyux_data_manager_columns_button_title' | skyLibResources)
            "
            [attr.title]="
              'skyux_data_manager_columns_button_title' | skyLibResources
            "
            (click)="openColumnPicker()"
          >
            <sky-icon icon="columns" />
            <span class="sky-column-selector-action-btn-text">
              {{ 'skyux_data_manager_columns_button_title' | skyLibResources }}
            </span>
          </button>
        </sky-toolbar-item>
      }

      <ng-content select="sky-data-manager-toolbar-left-item" />

      @if (activeView?.searchEnabled) {
        <sky-toolbar-item>
          <sky-search
            [expandMode]="activeView?.searchExpandMode"
            [placeholderText]="activeView?.searchPlaceholderText"
            [searchText]="dataState?.searchText"
            (searchApply)="searchApplied($event)"
          />
        </sky-toolbar-item>
      }

      <sky-toolbar-view-actions>
        <ng-content select="sky-data-manager-toolbar-right-item" />
        @if (activeView && views && views.length > 1) {
          <sky-radio-group
            class="sky-switch-icon-group"
            [ariaLabel]="'data view switcher'"
            [(ngModel)]="activeView.id"
          >
            @for (view of views; track view.id) {
              <sky-radio
                [attr.aria-label]="view.name"
                [icon]="view.icon"
                [value]="view.id"
                [label]="view.name"
                (change)="onViewChange(view.id)"
              />
            }
          </sky-radio-group>
        }
      </sky-toolbar-view-actions>
    </sky-toolbar-section>
    <ng-content select="sky-data-manager-toolbar-section" />
  </sky-toolbar>

  @if (activeView?.multiselectToolbarEnabled) {
    <sky-toolbar class="sky-data-manager-multiselect-toolbar">
      <sky-toolbar-section>
        <sky-toolbar-item>
          <button
            class="sky-btn sky-btn-link sky-data-manager-select-all-btn"
            type="button"
            [attr.aria-label]="
              dataManagerConfig?.listDescriptor
                ? ('skyux_data_manager_select_all_button_aria_label'
                  | skyLibResources: dataManagerConfig?.listDescriptor)
                : undefined
            "
            (click)="selectAll()"
          >
            {{ 'skyux_data_manager_select_all_button_title' | skyLibResources }}
          </button>
        </sky-toolbar-item>
        <sky-toolbar-item>
          <button
            class="sky-btn sky-btn-link sky-data-manager-clear-all-btn"
            type="button"
            [attr.aria-label]="
              dataManagerConfig?.listDescriptor
                ? ('skyux_data_manager_clear_all_button_aria_label'
                  | skyLibResources: dataManagerConfig?.listDescriptor)
                : undefined
            "
            (click)="clearAll()"
          >
            {{ 'skyux_data_manager_clear_all_button_title' | skyLibResources }}
          </button>
        </sky-toolbar-item>
        <sky-toolbar-view-actions>
          <sky-checkbox
            [checked]="onlyShowSelected"
            [label]="
              dataManagerConfig?.listDescriptor
                ? ('skyux_data_manager_show_selected_option_aria_label'
                  | skyLibResources: dataManagerConfig?.listDescriptor)
                : undefined
            "
            (change)="onOnlyShowSelected($event)"
          >
            <sky-checkbox-label>
              {{
                'skyux_data_manager_show_selected_option_title'
                  | skyLibResources
              }}
            </sky-checkbox-label>
          </sky-checkbox>
        </sky-toolbar-view-actions>
      </sky-toolbar-section>
    </sky-toolbar>
  }
</div>
