<os-head-bar (mainEvent)="goBack()" [hasMainButton]="true" [nav]="false" [editMode]="true" (saveEvent)="save()">a
    <!-- Title -->
    <div class="title-slot"><h2 translate>Change password</h2></div>
</os-head-bar>
<mat-card class="os-card">
    <div *ngIf="!this.canManage && !this.ownPage">
        <!-- no Admin, cannot Manage (a.k.a Attack Prevention) -->
        <span translate>You are not supposed to be here...</span>
    </div>
    <div *ngIf="this.canManage && !this.ownPage">
        <!-- can Manage, but not own Page (a.k.a. Admin) -->
        <div *ngIf="user">
            <h1><span translate>Change password for</span> {{ user.full_name }}</h1>
            <mat-icon>warning</mat-icon>
            &nbsp;<span translate>You override the personally set password!</span>
        </div>
        <br>
        <form [formGroup]="adminPasswordForm" (keydown)="onKeyDown($event)">
            <mat-form-field>
                <input
                    [type]="hidePassword ? 'password' : 'text'"
                    matInput
                    formControlName="newPassword"
                    placeholder="{{ 'New password' | translate }}"
                    required
                />
                <mat-icon
                    class="pointer"
                    matSuffix
                    mat-icon-button
                    matTooltip="{{ hidePassword ? ('Show password' | translate) : ('Hide password' | translate) }}"
                    (click)="hidePassword = !hidePassword">
                    {{ hidePassword ? 'visibility' : 'visibility_off' }}
                </mat-icon>
                <mat-icon
                    class="pointer spacer-left-10"
                    matSuffix
                    mat-icon-button
                    matTooltip="{{ 'Generate password' | translate }}"
                    (click)="generatePassword()">
                    settings
                </mat-icon>

            </mat-form-field>
        </form>
        <br>
        <div *ngIf="user">
            <span translate>Initial password</span>: {{ user.default_password }}<br>
            <span translate>Username</span>: {{ user.username }}
        </div>
    </div>

    <div *ngIf="this.ownPage">
        <!-- can not Manage, but own Page (a.k.a. User) -->
        <form [formGroup]="userPasswordForm" (keydown)="onKeyDown($event)">
            <mat-form-field>
                <input
                    [type]="hideOldPassword ? 'password' : 'text'"
                    matInput
                    formControlName="oldPassword"
                    placeholder="{{ 'Old password' | translate }}"
                    required
                />
                <mat-icon mat-button matSuffix mat-icon-button (click)="hideOldPassword = !hideOldPassword">
                    {{ hideOldPassword ? 'visibility' : 'visibility_off' }}
                </mat-icon>
            </mat-form-field><br>
            <mat-form-field>
                <input
                    [type]="hidePassword ? 'password' : 'text'"
                    matInput
                    formControlName="newPassword1"
                    placeholder="{{ 'New password' | translate }}"
                    required
                />
                <mat-icon
                    mat-button matSuffix mat-icon-button
                    (click)="hidePassword = !hidePassword">
                    {{ hidePassword ? 'visibility' : 'visibility_off' }}
                </mat-icon>
            </mat-form-field><br>
            <mat-form-field>
                <input
                    [type]="hidePassword ? 'password' : 'text'"
                    matInput
                    formControlName="newPassword2"
                    placeholder="{{ 'Confirm new password' | translate }}"
                    required
                />
            </mat-form-field>
        </form>
    </div>
</mat-card>
