<div class="ag-cell-label-container" role="presentation">
  @if (params?.enableMenu) {
    <span
      class="ag-header-icon ag-header-cell-menu-button"
      aria-hidden="true"
      (click)="onMenuClick($event)"
    >
      <sky-icon icon="ellipsis" />
    </span>
  }
  <div class="ag-header-cell-label" role="presentation">
    <span class="ag-header-cell-label-and-icons">
      @if (params?.enableSorting) {
        <button
          aria-hidden="true"
          class="ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline"
          tabindex="-1"
          type="button"
          [attr.aria-label]="accessibleHeaderText"
          [innerText]="displayName ?? ''"
          [skyThemeClass]="{ 'sky-font-heading-4': 'modern' }"
          (click)="onSortRequested($event)"
        ></button>
      } @else if (displayName) {
        <span
          aria-hidden="true"
          class="ag-header-cell-text"
          [skyThemeClass]="{ 'sky-font-heading-4': 'modern' }"
          >{{ displayName }}</span
        >
      }
      @if (filterEnabled$ | async) {
        <span
          aria-hidden="true"
          class="ag-header-icon ag-header-label-icon ag-filter-icon"
          ><sky-icon icon="filter"
        /></span>
      }
      @if (params?.enableSorting) {
        @if (sortOrder$ | async; as sortDirection) {
          <button
            class="ag-sort-indicator-container sky-btn sky-btn-icon-borderless"
            type="button"
            (click)="onSortRequested($event)"
          >
            @if (sortDirection === 'desc') {
              <span class="ag-header-icon ag-header-label-icon">
                <sky-icon *skyThemeIf="'default'" icon="caret-down" />
                <sky-icon *skyThemeIf="'modern'" icon="chevron-down" />
                <span class="sky-screen-reader-only">{{
                  'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'
                    | skyLibResources: displayName ?? accessibleHeaderText
                }}</span></span
              >
            }
            @if (sortDirection === 'asc') {
              <span class="ag-header-icon ag-header-label-icon">
                <sky-icon *skyThemeIf="'default'" icon="caret-up" />
                <sky-icon *skyThemeIf="'modern'" icon="chevron-up" />
                <span class="sky-screen-reader-only">{{
                  'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'
                    | skyLibResources: displayName ?? accessibleHeaderText
                }}</span></span
              >
            }

            @if (sortIndexDisplay$ | async; as sortIndexDisplay) {
              <span
                aria-hidden="true"
                class="ag-sort-indicator-icon ag-sort-order"
                >{{ sortIndexDisplay }}</span
              >
            }
          </button>
        } @else {
          <span class="sky-screen-reader-only">{{
            'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'
              | skyLibResources: displayName ?? accessibleHeaderText
          }}</span>
        }
      }
    </span>
    <span #inlineHelpContainer class="sky-control-help-container"></span>
  </div>
</div>
