<div class="custom-table-header flex-spaced">
    <!-- Amount of filters -->
    <div class="filter-count">
        <span>{{ filterCount }}&nbsp;</span><span translate>of</span>
        <span>&nbsp;{{ totalCount }}</span>
        <span *ngIf="extraItemInfo">&nbsp;·&nbsp;{{ extraItemInfo }}</span>
    </div>

    <!-- Current filters -->
    <div class="current-filters h-scroller" *ngIf="filterService">
        <div *ngFor="let filter of filterService.filterStack">
            <button mat-stroked-button (click)="removeFilterFromStack(filter)">
                <os-icon-container icon="close" class="active-filter">
                    <span class="active-filter">
                        {{ filter.option.label | translate }}
                    </span>
                </os-icon-container>
            </button>
        </div>
    </div>

    <!-- Actions -->
    <div class="action-buttons">
        <!-- Filter button -->
        <button mat-button *ngIf="hasFilters" (click)="filterMenu.opened ? filterMenu.close() : filterMenu.open()">
            <span class="upper" [matBadge]="filterAmount" matBadgeColor="accent" [matBadgeOverlap]="false">
                {{ 'Filter' | translate }}
            </span>
        </button>

        <!-- Sort Button -->
        <button mat-button *ngIf="vp.isMobile && hasSorting" (click)="openSortDropDown()">
            <span class="upper" translate>Sort</span>
        </button>
        <button mat-button *ngIf="!vp.isMobile && hasSorting" [matMenuTriggerFor]="menu">
            <span class="upper" translate>Sort</span>
        </button>

        <!-- Search bar -->
        <os-rounded-input
            #searchField
            [model]="searchFieldInput"
            [size]="'small'"
            [fullWidth]="false"
            [lazyInput]="true"
            (oninput)="searchFieldChange.emit($event)"
            placeholder="{{ 'Search' | translate }}"
        ></os-rounded-input>
    </div>
</div>

<!-- Header for the filter side bar -->
<mat-drawer autoFocus="false" #filterMenu mode="push" position="end">
    <div class="custom-table-header filter-menu-head" (click)="this.filterMenu.toggle()">
        <span>
            <mat-icon>keyboard_arrow_right</mat-icon>
        </span>

        <button mat-button (click)="onClearAllButton($event)" *ngIf="filterAmount">
            <os-icon-container icon="clear">
                <span translate>Clear all filters</span>
            </os-icon-container>
        </button>
    </div>
    <os-filter-menu *ngIf="filterService" (dismissed)="this.filterMenu.close()" [service]="filterService">
    </os-filter-menu>
</mat-drawer>

<!-- non-mobile sorting menu -->
<mat-menu #menu>
    <div *ngIf="hasSorting">
        <mat-list-item *ngFor="let option of sortOptions" (click)="sortOption = option">
            <button mat-menu-item>
                <mat-icon>{{ getSortIcon(option) }}</mat-icon>
                <span>{{ sortService.getSortLabel(option) | translate }}</span>
            </button>
        </mat-list-item>
    </div>
</mat-menu>
