<div class="modal-header">
    <h2 class="modal-title" mat-dialog-title *ngIf="updating" trans>Update User Details</h2>
    <h2 class="modal-title" mat-dialog-title *ngIf="!updating" trans>Create a New User</h2>
    <button type="button" (click)="close()" class="close-button no-style icon-button"><mat-icon svgIcon="close"></mat-icon></button>
</div>

<form autocomplete="off" (ngSubmit)="confirm()" ngNativeValidate>
    <div class="many-inputs mat-dialog-content" mat-dialog-content>
        <div class="input-container" *ngIf="!updating">
            <label for="email" trans>Email</label>
            <input type="email" id="email" name="email" [(ngModel)]="model.email" required>
            <div class="error" *ngIf="errors?.email">{{errors?.email}}</div>
        </div>

        <div class="input-container" *ngIf="!updating">
            <label for="password" trans>Password</label>
            <input type="password" id="password" name="password" [(ngModel)]="model.password" required>
            <div class="error" *ngIf="errors?.password">{{errors?.password}}</div>
        </div>

        <div class="input-container">
            <label for="avatar" trans>Avatar</label>
            <input type="text" id="avatar" name="avatar" [(ngModel)]="model.avatar">
            <div class="error" *ngIf="errors?.avatar">{{errors?.avatar}}</div>
        </div>

        <div class="input-container">
            <label for="first_name" trans>First Name</label>
            <input type="text" id="first_name" name="first_name" [(ngModel)]="model.first_name">
            <div class="error" *ngIf="errors?.first_name">{{errors?.first_name}}</div>
        </div>

        <div class="input-container">
            <label for="last_name" trans>Last Name</label>
            <input type="text" id="last_name" name="last_name" [(ngModel)]="model.last_name">
            <div class="error" *ngIf="errors?.last_name">{{errors?.last_name}}</div>
        </div>

        <div class="input-container">
            <label for="confirmed" trans>Email Confirmed</label>
            <select type="text" id="confirmed" name="confirmed" [(ngModel)]="model.confirmed">
                <option value="1">Yes</option>
                <option value="0">No</option>
            </select>
            <div class="error" *ngIf="errors?.confirmed">{{errors?.confirmed}}</div>
        </div>

        <space-input label="Available Space" [(ngModel)]="model.available_space" name="available_space">
            <p class="description" trans>Disk space available to user. Leave empty for unlimited.</p>
            <div class="error" *ngIf="errors?.available_space">{{errors?.available_space}}</div>
        </space-input>

        <user-access-manager [user]="model"></user-access-manager>

        <div class="errors">
            <div class="error" *ngIf="errors?.roles">{{errors?.roles}}</div>
            <div class="error" *ngIf="errors?.permissions">{{errors?.permissions}}</div>
        </div>
    </div>

    <div class="buttons right mat-dialog-actions" mat-dialog-actions>
        <button (click)="close()" type="button" mat-button class="button cancel" trans>Cancel</button>
        <button type="submit" class="button primary" mat-raised-button color="accent" [disabled]="loading">
            <span *ngIf="updating" trans>Update User</span>
            <span *ngIf="!updating" trans>Create User</span>
        </button>
    </div>
</form>