<div class="flex column fill">
    @if (turnovers && !turnovers.error) {
    <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>

        @if (filterOpen) {
        <form class="flex wrap filter">
            <mat-form-field class="margin">
                <mat-label>{{'turnovers.filter.dueDate' | i18n}}</mat-label>
                <mat-date-range-input [rangePicker]="picker">
                    <input matStartDate placeholder="{{'turnovers.filter.dueDate.from' | i18n}}"
                        [value]="turnovers && turnovers.filter && turnovers.filter.from"
                        (dateChange)="setFilter('from', $event.value && $event.value.toISOString() || undefined)">
                    <input matEndDate placeholder="{{'turnovers.filter.dueDate.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.customer' | i18n}}</mat-label>
                <input type="text" matInput [value]="turnovers && turnovers.filter && turnovers.filter.customer || ''"
                    (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 [value]="turnovers && turnovers.filter && turnovers.filter.motif || ''"
                    (input)="setInputFilter('motif', $event.target)">
            </mat-form-field>
        </form>
        }
        <span class="spacer"></span>
        <a class="margin" mat-icon-button (click)="export()" title="{{'turnovers.export' | i18n}}" color="primary"
            [disabled]="!turnovers.total">
            <mat-icon>file_download</mat-icon>
        </a>
    </div>
    }

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