@if (turnovers && turnovers.error) {
<div class="flex column fill">
    <mat-card class="accent box">
        <mat-card-header>
            <mat-card-title>{{ 'turnovers.error.' + turnovers.error.status | i18n}}</mat-card-title>
            <mat-card-subtitle>{{'turnovers.error' | i18n}}</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <p>
                {{ 'turnovers.error.' + turnovers.error.status + '.text' | i18n}}
            </p>
        </mat-card-content>
    </mat-card>
</div>
}

@if (turnovers) {

@if (turnovers.total == 0) {
<mat-list>
    <mat-list-item>
        <p>{{'paginator.empty' | i18n}}</p>
    </mat-list-item>
</mat-list>
}

@if(turnovers.total) {
<div class="scroll-container">
    <table class="default-table" mat-table [dataSource]="turnovers.results" matSort [matSortDisabled]="!enableSort"
        (matSortChange)="sort.emit($event)" [matSortDisableClear]="true">

        <ng-container matColumnDef="username">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'turnover.username' | i18n}}</th>
            <td mat-cell *matCellDef="let turnover">{{turnover.username}}</td>
        </ng-container>

        <ng-container matColumnDef="dueDate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header [disableClear]="false">{{'turnover.dueDate' |
                i18n}}
            </th>
            <td mat-cell *matCellDef="let turnover" matTooltip="{{turnover.dueDate | datef:'LL'}}">
                <span class="nowrap">{{turnover.dueDate | datef:'L'}}</span>
            </td>
        </ng-container>

        <ng-container matColumnDef="customer">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'turnover.customer' | i18n}}</th>
            <td mat-cell *matCellDef="let turnover">{{turnover.customer}}</td>
        </ng-container>

        <ng-container matColumnDef="motif">
            <th mat-header-cell *matHeaderCellDef>{{'turnover.motif' | i18n}}</th>
            <td mat-cell *matCellDef="let turnover">
                <span class="ellipsis" matTooltip="{{turnover.motif}}">{{turnover.motif}}</span>
            </td>
        </ng-container>

        <ng-container matColumnDef="price">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                <span class="spacer"></span>
                <span>{{'turnover.price' | i18n}}</span>
            </th>
            <td mat-cell *matCellDef="let turnover">
                <div class="flex">
                    <span class="spacer"></span>
                    <span>{{turnover.price | number: '1.2-2'}}</span>
                    <span>&nbsp;{{'turnover.price.suffix' | i18n}}</span>
                </div>
            </td>
        </ng-container>

        <ng-container matColumnDef="timeInvestment">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                <span class="spacer"></span>
                <span>{{'turnover.timeInvestment' | i18n}}</span>
            </th>
            <td mat-cell *matCellDef="let turnover">
                @if (turnover.timeInvestment) {
                <div class="flex">
                    <span class="spacer"></span>
                    <span>{{turnover.timeInvestment | number: '1.1-1'}}</span>
                    <span> &nbsp;{{'turnover.timeInvestment.suffix' | i18n}}</span>
                </div>
                }
            </td>
        </ng-container>

        <ng-container matColumnDef="remark">
            <th mat-header-cell *matHeaderCellDef>{{'turnover.remark' | i18n}}</th>
            <td mat-cell *matCellDef="let turnover">
                <span class="ellipsis" matTooltip="{{turnover.remark}}">{{turnover.remark}}</span>
            </td>
        </ng-container>

        <ng-container matColumnDef="materialConsumption">
            <th mat-header-cell *matHeaderCellDef>{{'turnover.materialConsumption' | i18n}}</th>
            <td mat-cell *matCellDef="let turnover">
                <span class="ellipsis"
                    matTooltip="{{turnover.materialConsumption}}">{{turnover.materialConsumption}}</span>
            </td>
        </ng-container>

        <ng-container matColumnDef="created">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'turnover.created' |
                i18n}}
            </th>
            <td mat-cell *matCellDef="let turnover" matTooltip="{{turnover.created | datef:'LLLL'}}">
                <span class="nowrap">{{turnover.created | datef}}</span>
            </td>
        </ng-container>

        <ng-container matColumnDef="updated">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                <span class="spacer"></span>
                <span>{{'turnover.updated' | i18n}}</span>
            </th>
            <td mat-cell *matCellDef="let turnover" matTooltip="{{turnover.updated | datef:'LLLL'}}">
                <div class="flex">
                    <span class="spacer"></span>
                    @if(turnover.created != turnover.updated) {
                    <span class="nowrap">{{turnover.updated | datef}}</span>
                    }
                </div>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
        <tr class="turnover" [ngClass]="{'disabled': !linkTurnover}" (click)="select(turnover)" mat-row
            *matRowDef="let turnover; columns: columns;"></tr>
    </table>
</div>
}



<span class="spacer"></span>

<div class="mat-mdc-paginator flex wrap">
    @if (overview && overview.length > 2) {
    <div class="overview flex middle">
        <span class="margin">{{'turnover.price.total' | i18n:(overview[1] | number: '1.2-2')}}</span> <span
            class="margin">{{'turnover.timeInvestment.total' | i18n:(overview[2] | number: '1.1-1')}}</span>
    </div>
    }
    <span class="spacer"></span>
    <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="turnovers.offset / turnovers.limit"
        [length]="turnovers.total" [pageSize]="turnovers.limit" (page)="page.emit($event)" showFirstLastButtons>
    </mat-paginator>
</div>
}

@if (!turnovers || !turnovers.results && !turnovers.error) {
<mat-progress-bar *ngIf="" mode="indeterminate"></mat-progress-bar>
}