<div
    class="table-grid__cell table-grid__header-cell"
    [class.table-grid__cell--custom-cell]="columnSchema?.customColumn"
    [class.table-grid__cell--empty-head]="columnSchema?.th?.emptyHead"
    [class.table-grid__cell--is-model-cell]="columnSchema?.isModel"
    [class.table-grid__cell--resizable]="columnSchema?.resizable"
    [class.table-grid__cell--text-bold]="columnSchema?.th?.textBold"
    [class.table-grid__header-cell--is-clickable]="columnSchema?.sortable"
    [class.table-grid__header-cell--min-width]="columnWidth < limit"
    [ngClass]="columnSchema?.th?.class || []"
    [ngStyle]="columnSchema?.th?.style || []"
    [style.max-height.px]="headHeight || columnSchema?.th?.height || clientRowHeight"
    [style.min-height.px]="headHeight || columnSchema?.th?.height || clientRowHeight"
    (click)="sortIfEnabled()"
>
    <div
        class="table-grid__cell--content table-grid__header-cell--content"
        [class.table-grid__cell--content-sortable-is-active]="sortableDefinition[columnSchema?.key!]"
        [class.table-grid__cell--content-sortable]="columnSchema?.sortable"
        [class.table-grid__cell--nowrap]="columnSchema?.th?.nowrap!"
    >
        <ng-template
            [ngIf]="columnSchema?.th?.template!"
            [ngIfElse]="defaultTh"
            [ngTemplateOutlet]="columnSchema?.th?.template!"
        />
        <ng-template #defaultTh>
            <ng-template [ngIf]="!columnSchema?.th?.emptyHead!">
                {{ columnSchema?.th?.headTitle || (columnSchema?.key! | titlecase) }}
            </ng-template>
        </ng-template>
    </div>

    <div class="table-grid__header-cell-head--settings">
        <div
            *ngIf="columnSchema?.sortable"
            class="table-grid__column--sortable"
            [class.table-grid__column--sortable--active]="sortableDefinition[columnSchema?.key!]"
        >
            <svg
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
                class="table-grid-icon--sortable"
                [class.table-grid-icon--sortable__asc]="sortableDefinition[columnSchema?.key!] === orderType.ASC"
                [class.table-grid-icon--sortable__desc]="sortableDefinition[columnSchema?.key!] === orderType.DESC"
            >
                <path
                    d="M128.4,189.3L233.4,89c5.8-6,13.7-9,22.4-9c8.7,0,16.5,3,22.4,9l105.4,100.3c12.5,11.9,12.5,31.3,0,43.2  c-12.5,11.9-32.7,11.9-45.2,0L288,184.4v217c0,16.9-14.3,30.6-32,30.6c-17.7,0-32-13.7-32-30.6v-217l-50.4,48.2  c-12.5,11.9-32.7,11.9-45.2,0C115.9,220.6,115.9,201.3,128.4,189.3z"
                />
            </svg>
            <span
                *ngIf="sortableCount > 1"
                class="table-grid-icon--sortable-number"
                [@fadeInLinear]
            >
                {{ positionMap[columnSchema?.key!] }}
            </span>
        </div>

        <div
            *ngIf="columnSchema?.filterable"
            class="table-grid__column--filterable"
            [class.table-grid__column--filterable--active]="$any(filterableDefinition)[columnSchema?.key!] | isFilled"
            (click)="columnSchema?.filterable ? openFilter(columnSchema?.key, $event) : null"
        >
            <svg
                fill="none"
                height="24"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                width="24"
                xmlns="http://www.w3.org/2000/svg"
                class="table-grid-icon--filterable"
            >
                <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
            </svg>
        </div>

        <div
            *ngIf="columnSchema?.resizable"
            class="table-grid__column--resize"
            (click)="$event.stopPropagation()"
            (mousedown)="resizing.emit({event: $event, key: columnSchema?.key!})"
        >
            <div class="table-grid__column--resize--line"></div>
        </div>
    </div>
</div>
