<div class="flex column fill">
    <div class="flex wrap filter-container">
        <a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'turnovers.filter' | i18n}}"
            [color]="filterOpen ? 'primary': 'accent'">
            <mat-icon>filter_alt</mat-icon>
        </a>

        <form class="flex wrap filter" *ngIf="filterOpen">
            <mat-form-field class="margin">
                <mat-label>{{'turnovers.filter.created' | i18n}}</mat-label>
                <mat-date-range-input [rangePicker]="picker">
                    <input matStartDate placeholder="{{'turnovers.filter.created.from' | i18n}}"
                        [value]="turnovers && turnovers.filter && turnovers.filter.from"
                        (dateChange)="setFilter('from', $event.value && $event.value.toISOString() || undefined)">
                    <input matEndDate placeholder="{{'turnovers.filter.created.to' | i18n}}"
                        [value]="turnovers && turnovers.filter && turnovers.filter.to"
                        (dateChange)="setFilter('to', $event.value && $event.value.endOf('day').toISOString() || undefined)">
                </mat-date-range-input>
                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-date-range-picker #picker></mat-date-range-picker>
            </mat-form-field>


            <mat-form-field class="margin">
                <mat-label>{{'turnovers.filter.username' | i18n}}</mat-label>
                <input type="text" matInput [matAutocomplete]="auto" [formControl]="usersFormControl"
                    (change)="setInputFilter('username', $event.target)">
                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="setFilter('username', $event.option.value)">
                    @for (user of users | async; track user.username) {
                    <mat-option [value]="user.username">{{user.username}}</mat-option>
                    }
                </mat-autocomplete>
            </mat-form-field>

            <mat-form-field class="margin">
                <mat-label>{{'turnovers.filter.customer' | i18n}}</mat-label>
                <input type="text" matInput (input)="setInputFilter('customer', $event.target)">
            </mat-form-field>

            <mat-form-field class="margin">
                <mat-label>{{'turnovers.filter.motif' | i18n}}</mat-label>
                <input type="text" matInput (input)="setInputFilter('motif', $event.target)">
            </mat-form-field>
        </form>
    </div>

    <ui-turnovers class="flex column grow" [turnovers]="turnovers" (page)="applyPage($event)" (sort)="applySort($event)"
        [username]="true"></ui-turnovers>
</div>