<div #columnHeader class="column-header-wrapper" tabindex="-1" (keydown.f1)="onF1KeyDown($event)"
         (click)="tableNotEmpty && column.sortable && sortFn($event)"
         (contextmenu)="onHeaderRightClick($event)">
    <!-- Name -->
    <div class="column-header-name">
        <!-- Facet filter icon -->
        <i *ngIf="column.facetsOn" class="fa fa-filter sdi-icon info facets-applied-icon"
           i18n-title="@@facetFilterOnTitle" title="Фасетный фильтр включен">
        </i>

        <!-- Optional icon -->
        <i *ngIf="column.iconStyleClass" class="fa sdi-icon info name-prefix"
           [ngClass]="column.iconStyleClass">
        </i>

        <!-- Caption -->
        <span class="datatable-header-cell-label draggable" title="{{column.name}}">
            {{column.name}}
        </span>

        <!-- Units -->
        <span *ngIf="column.unit" (click)="$event.stopPropagation()">
            <select class="units" [class.is-selected]="column.unit.isSelected"
                    tabindex="-1" title="{{column.unit.name}}"
                    [(ngModel)]="column.unit"
                    (change)="onColumnUnitChanged()" >
                <option *ngFor="let u of column.units" [ngValue]="u" [innerHTML]="u.code" class="std-color"></option>
            </select>
        </span>
    </div>

    <!-- Facet toggle -->
    <div *ngIf="!column.notFaceted && (tableNotEmpty || column.facetsOn) && !hideFacetsToggle"
         class="facets-toggle interactive"
         (click)="onFacetToggleClick($event, columnHeader)"
         i18n-title="@@facetFilterTitle" title="Фасетный фильтр">
        <i class="fa fa-fw fa-angle-down"></i>
    </div>
</div>