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

    <div class="flex wrap filter-container">
        <a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'users.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>{{'users.filter.search' | i18n}}</mat-label>
                <input type="text" matInput [value]="users && users.filter && users.filter || ''"
                    (input)="setFilter( $event.target)">
            </mat-form-field>
        </form>
        }
    </div>

    @if (users) {
    <div class="scroll-container">
        <table class="default-table" mat-table [dataSource]="users.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 user">
                    <div class="flex middle">
                        @if (user.roles && user.roles.indexOf('ROLE_ADMIN') != -1) {
                        <mat-icon>admin_panel_settings</mat-icon>
                        }
                        {{user.username}}
                    </div>
                </td>
            </ng-container>

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

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

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

            <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
            <tr class="user" mat-row *matRowDef="let user; columns: columns;" [routerLink]="'/u/' + user.username">
            </tr>
        </table>
    </div>
    @if (users.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 wrap middle">
        <a class="margin" routerLink="/user" mat-raised-button color="primary">
            <mat-icon>person_add</mat-icon>
            <span class="hide-small">{{'user.create' | i18n}}</span>
        </a>
        <span class="spacer"></span>
        <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="users.offset / users.limit"
            [length]="users.total" [pageSize]="users.limit" (page)="applyPage($event)" showFirstLastButtons>
        </mat-paginator>
    </div>
    }

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