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

    <div class="flex wrap filter-container">
        <form class="flex wrap filter">
            <mat-form-field class="margin">
                <mat-label>{{'management.filter.created' | i18n}}</mat-label>
                <mat-date-range-input [rangePicker]="picker">
                    <input matStartDate placeholder="{{'turnovers.filter.created.from' | i18n}}"
                        [value]="entries && entries.filter && entries.filter.from"
                        (dateChange)="setFilter('from', $event.value && $event.value.toISOString() || undefined)">
                    <input matEndDate placeholder="{{'turnovers.filter.created.to' | i18n}}"
                        [value]="entries && entries.filter && entries.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>{{'management.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>
        </form>
    </div>

    @if (entries) {
    <div class="scroll-container">
        <table class="default-table" mat-table [dataSource]="entries.results || []" matSort
            (matSortChange)="applySort($event)" [matSortDisableClear]="true">
            <ng-container matColumnDef="username">
                <th mat-header-cell *matHeaderCellDef mat-sort-header [disableClear]="false">{{'user.username' |
                    i18n}}
                </th>
                <td mat-cell *matCellDef="let entry">
                    <div class="flex middle">
                        {{entry[0]}}
                    </div>
                </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 entry">
                    <div class="flex">
                        <span class="spacer"></span>
                        <span>{{entry[1] | 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 entry">
                    <div class="flex">
                        <span class="spacer"></span>
                        <span>{{entry[2] | number: '1.1-1'}}</span>
                        <span> &nbsp;{{'turnover.timeInvestment.suffix' | i18n}}</span>
                    </div>
                </td>
            </ng-container>


            <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
            <tr class="entry" mat-row *matRowDef="let row; columns: columns;"></tr>
        </table>
    </div>
    @if (entries.total == 0) {
    <mat-list>
        <mat-list-item>
            <p>{{'paginator.empty' | i18n}}</p>
        </mat-list-item>
    </mat-list>
    }

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

    <div class="mat-mdc-paginator flex">
        <span class="spacer"></span>
        <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="entries.offset / entries.limit"
            [length]="entries.total" [pageSize]="entries.limit" (page)="applyPage($event)" showFirstLastButtons>
        </mat-paginator>
    </div>
    }

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