<div class="main-container">
  <form *ngIf="loggedUserId" [formGroup]="profileForm" (ngSubmit)="onProfileSubmit()">
    <mat-card class="profile-card">
      <mat-card-header>
        <mat-card-title>
          <ng-template [ngIf]="editUserMode">
           {{ 'Profil uživatele ' + profileForm.controls['firstName'].value + ' ' + profileForm.controls['lastName'].value }}
          </ng-template>
          <ng-template [ngIf]="!editUserMode">
            Váš profil
          </ng-template>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div class="form-field-group">
          <mat-form-field>
            <input matInput placeholder="Křestní jméno *" formControlName="firstName" autocomplete="off">
            <mat-error *ngIf="profileForm.controls['firstName'].hasError('required')">
              Křestní jméno je <strong>povinné</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput placeholder="Příjmení *" formControlName="lastName" autocomplete="off">
            <mat-error *ngIf="profileForm.controls['lastName'].hasError('required')">
              Příjmení je <strong>povinné</strong>
            </mat-error>
          </mat-form-field>
        </div>
        <mat-form-field>
          <input matInput type="email" placeholder="Email *" formControlName="email" autocomplete="off">
          <mat-error *ngIf="profileForm.controls['email'].hasError('email') && !profileForm.controls['email'].hasError('required')">
            Emailová adresa je <strong>nevalidní</strong>
          </mat-error>
          <mat-error *ngIf="profileForm.controls['email'].hasError('userExists')">
            Uživatel s toutu emailovou adresou <strong>již existuje</strong>
          </mat-error>
          <mat-error *ngIf="profileForm.controls['email'].hasError('required')">
            Emailová adresa je <strong>povinná</strong>
          </mat-error>
        </mat-form-field>
        <div class="form-field-group">
          <mat-form-field>
            <input matInput placeholder="Firma/instituce" formControlName="company" autocomplete="off">
            <mat-error *ngIf="profileForm.controls['company'].hasError('required')">
              Firma/instituce je <strong>povinná</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput placeholder="Pozice ve firmě/instituci" formControlName="position" autocomplete="off">
            <mat-error *ngIf="profileForm.controls['position'].hasError('required')">
              Pozice ve firmě/instituci je <strong>povinná</strong>
            </mat-error>
          </mat-form-field>
        </div>
        <mat-form-field *ngIf="editUserMode">
          <mat-select placeholder="Role" formControlName="role">
            <mat-option value="ROLE_USER">Registrovaný uživatel</mat-option>
            <mat-option value="ROLE_ANALYST">Analytik</mat-option>
            <mat-option value="ROLE_ADMIN">Admin</mat-option>
          </mat-select>
        </mat-form-field>
      </mat-card-content>
      <mat-card-header>
        <mat-card-title>
          <mat-card-title>
            Změna hesla
          </mat-card-title>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <mat-form-field *ngIf="!editUserMode">
          <input matInput [type]="passwordInputs[oldPasswordInput.id] ? 'text' : 'password'" placeholder="Současné heslo" formControlName="oldPassword" #oldPasswordInput autocomplete="off">
          <button 
            tabIndex="-1"
            type="button" 
            *ngIf="profileForm.controls['oldPassword'].value" 
            matSuffix 
            mat-icon-button 
            (mousedown)="togglePasswordVisbility(oldPasswordInput, true); doNotRemoveFocus($event, oldPasswordInput);" 
            (mouseup)="togglePasswordVisbility(oldPasswordInput, false);" 
            (click)="doNotPropagateClick($event, oldPasswordInput);">
            <mat-icon>{{ passwordInputs[oldPasswordInput.id] ? 'visibility' : 'visibility_off' }}</mat-icon>
          </button>
          <mat-error *ngIf="profileForm.controls['oldPassword'].hasError('required') && !profileForm.controls['oldPassword'].hasError('wrongPassword')">
            Současné heslo je <strong>požadované</strong> pro změnu hesla
          </mat-error>
          <mat-error *ngIf="profileForm.controls['oldPassword'].hasError('wrongPassword')">
            <strong>Špatné</strong> heslo
          </mat-error>
        </mat-form-field>
        <div class="form-field-group">
          <mat-form-field>
            <input matInput [type]="passwordInputs[newPasswordInput.id] ? 'text' : 'password'" placeholder="Nové heslo" formControlName="newPassword" #newPasswordInput autocomplete="off">
            <button 
              tabIndex="-2"
              type="button" 
              *ngIf="profileForm.controls['newPassword'].value" 
              matSuffix 
              mat-icon-button 
              (mousedown)="togglePasswordVisbility(newPasswordInput, true); doNotRemoveFocus($event, newPasswordInput);" 
              (mouseup)="togglePasswordVisbility(newPasswordInput, false);" 
              (click)="doNotPropagateClick($event, newPasswordInput);">
              <mat-icon>{{ passwordInputs[newPasswordInput.id] ? 'visibility' : 'visibility_off' }}</mat-icon>
            </button>
            <mat-error *ngIf="profileForm.controls['newPassword'].hasError('required')">
              Nové heslo je <strong>povinné</strong>
            </mat-error>
            <mat-error *ngIf="profileForm.controls['newPassword'].hasError('strongPassword') && !profileForm.controls['newPassword'].hasError('required')">
              Nové heslo musí obsahovat <strong>velké písmeno</strong>,<strong>malé písmeno</strong> a <strong>číslo</strong>
            </mat-error>
            <mat-error *ngIf="profileForm.controls['newPassword'].hasError('minlength') && !profileForm.controls['newPassword'].hasError('strongPassword')">
              Nové heslo musí mít alespň <strong>8</strong> znaků
            </mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput [type]="passwordInputs[confirmNewPasswordInput.id] ? 'text' : 'password'" placeholder="Potvrzení nového hesla" formControlName="confirmNewPassword" #confirmNewPasswordInput autocomplete="off">
            <button 
              tabIndex="-3" 
              type="button"
              *ngIf="profileForm.controls['confirmNewPassword'].value" 
              matSuffix 
              mat-icon-button
              (mousedown)="togglePasswordVisbility(confirmNewPasswordInput, true); doNotRemoveFocus($event, confirmNewPasswordInput);" 
              (mouseup)="togglePasswordVisbility(confirmNewPasswordInput, false);" 
              (click)="doNotPropagateClick($event, confirmNewPasswordInput);">
              <mat-icon>{{ passwordInputs[confirmNewPasswordInput.id] ? 'visibility' : 'visibility_off' }}</mat-icon>
            </button>
            <mat-error *ngIf="profileForm.controls['confirmNewPassword'].hasError('required')">
              Potvrzovací heslo je <strong>povinné</strong>
            </mat-error>
            <mat-error *ngIf="profileForm.controls['confirmNewPassword'].hasError('passwordNotMatch')">
              Hesla <strong>nesouhlasí</strong>
            </mat-error>
            <mat-error *ngIf="profileForm.controls['confirmNewPassword'].hasError('passwordNotValid')">
              Nové heslo je <strong>nevalidní</strong>
            </mat-error>
          </mat-form-field>
        </div>
      </mat-card-content>
      <mat-card-actions align="end">
        <button clickOnEnter type="submit" mat-raised-button color="primary" [disabled]="!profileForm.valid">Uložit</button>
        <button type="button" mat-raised-button color="warn" (click)="onDeleteProfile();">Smazat</button>
      </mat-card-actions>
    </mat-card>
  </form>
</div>