@if (users && users.error) {
<div class="flex column fill">
    <mat-card class="accent 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>
}

@if (users) {
<div class="flex column fill">
    <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>


    <form [formGroup]="form" (ngSubmit)="createUser()" #formDirective="ngForm">
        <div class="flex middle">
            <mat-form-field class="margin">
                <mat-label>{{'profile.username' | i18n}}</mat-label>
                <input matInput formControlName="username" type="text" [required]="true">
            </mat-form-field>

            <mat-form-field class="margin">
                <mat-label>{{'profile.name' | i18n}}</mat-label>
                <input matInput formControlName="name" type="text">
            </mat-form-field>

            <mat-form-field class="margin">
                <mat-label>{{'profile.email' | i18n}}</mat-label>
                <input matInput formControlName="email" type="email">
            </mat-form-field>

            <mat-form-field class="margin">
                <mat-label>{{'user.password' | i18n}}</mat-label>
                <input matInput formControlName="password" type="password">
            </mat-form-field>

            <mat-slide-toggle class="margin" (change)="isAdmin=$event.checked">
                {{'user.admin' | i18n}}
            </mat-slide-toggle>

            <button type="submit" mat-raised-button color="primary" [disabled]="form.invalid">{{'user.create' |
                i18n}}<mat-icon style="font-size: 1em;">person_add</mat-icon></button>
        </div>
    </form>

    <div class="mat-mdc-paginator flex">
        <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>
</div>
}

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