<nb-card accent="control" status="info" class="profile-setting-dialog">
  <nb-card-header fxLayoutAlign="start center" class="dialog-header">
    <fa-icon [icon]="fa.faUserCog"
             class="header-icon fa-lg">
    </fa-icon>
    <span class="header-text"> {{ 'profile.header' | translate }} </span>
  </nb-card-header>
  <nb-card-body class="dialog-body">
    <div class="user-properties" fxLayout="row" fxLayoutGap="2rem" fxLayoutAlign="center center">
      <div fxFlex="20">
        <img src="{{USER_IMG}}" alt="userimage" class="user-img">
      </div>
      <div fxFlex class="properties">
        <form [formGroup]="userFormGroup" fxLayout="column" fxLayoutGap="1rem" fxLayoutAlign="start start">
          <!--Username-->
          <nb-form-field class="user-form-field">
            <label for="username" class="label">
              {{'profile.username.title' | translate}}
            </label>
            <fa-icon nbPrefix class="prefix-icon" [icon]="fa.faAt"></fa-icon>
            <input formControlName="username"
                   type="text" required
                   id="username" nbInput
                   fullWidth
                   class="form-field untouchable"
                   status="control"
                   placeholder="{{'profile.username.placeholder' | translate}}">
          </nb-form-field>
          <div fxLayout="row" fxLayoutGap="1rem" fxLayoutAlign="start start">
            <!--Firstname-->
            <nb-form-field class="user-form-field">
              <label for="firstName" class="label">
                {{'profile.firstName.title' | translate}}
              </label>
              <input formControlName="firstName"
                     type="text" required
                     id="firstName" nbInput
                     fullWidth
                     class="form-field name"
                     [status]="userFormGroup.get('firstName').dirty ? (userFormGroup.get('firstName').invalid  ? 'danger' : 'basic') : 'basic'"
                     placeholder="{{'profile.firstName.placeholder' | translate}} *">
              <ng-container *ngIf="userFirstNameControl.dirty">
              <span class="error-text"
                    *ngIf="userFirstNameControl.hasError('required')">
                {{'profile.validationMessage.firstNameRequired' | translate}}
              </span>
              </ng-container>
            </nb-form-field>
            <!--Lastname-->
            <nb-form-field class="user-form-field">
              <label for="lastName" class="label">
                {{'profile.lastName.title' | translate}}
              </label>
              <input formControlName="lastName"
                     type="text" required
                     id="lastName" nbInput
                     fullWidth
                     class="form-field name"
                     [status]="userFormGroup.get('lastName').dirty ? (userFormGroup.get('lastName').invalid  ? 'danger' : 'basic') : 'basic'"
                     placeholder="{{'profile.lastName.placeholder' | translate}} *">
              <ng-container *ngIf="userLastNameControl.dirty">
              <span class="error-text"
                    *ngIf="userLastNameControl.hasError('required')">
                {{'profile.validationMessage.lastNameRequired' | translate}}
              </span>
              </ng-container>
            </nb-form-field>
          </div>
          <!--ToDo: Email?-->
        </form>
      </div>
    </div>
    <div fxLayout="row" fxLayoutGap="2rem" fxLayoutAlign="start center">
      <div class="user-password-change">
        <!--User password change-->
        <label class="password-selection-label">
          {{'profile.password.title' | translate}}
        </label>
        <div class="password-form">
          <button nbButton size="small"
                  class="password-btn"
                  status="info"
                  hero outline
                  (click)="changePasswordInKeycloak()">
            <fa-icon [icon]="fa.faPassport" class="btn-icon"></fa-icon>
            {{'profile.password.button' | translate}}
          </button>
          <!--ToDo: Remove unused feature-->
          <!--<form class="password-form" [formGroup]="passwordFormGroup">
            <app-password-input-from
              formControlName="passwordInput"
              [userServiceError$]="userServiceError"
              (passwordStrong)="passwordStrong = $event">
            </app-password-input-from>
          </form>-->
        </div>
      </div>
      <div class="language-settings">
        <!--Language radio selection-->
        <label class="language-selection-label">
          {{ 'profile.languageLabel' | translate }}
        </label>
        <div fxLayout="row" fxLayoutGap="1rem" fxLayoutAlign="start center">
          <nb-radio-group name="language" [formControl]="profileLanguageControl"
                          class="language-radio-buttons languageContainer" status="info">
            <nb-radio value="{{profileLanguages.ENGLISH}}" (click)="onClickLanguage(profileLanguages.ENGLISH)">
              <img src="../../assets/images/flags/{{profileLanguages.ENGLISH}}.svg" class="flag" width="25rem"
                   height="16rem"
                   alt="">
            </nb-radio>
            <nb-radio value="{{profileLanguages.GERMAN}}" (click)="onClickLanguage(profileLanguages.GERMAN)">
              <img src="../../assets/images/flags/{{profileLanguages.GERMAN}}.svg" class="flag" width="25rem"
                   height="16rem"
                   alt="">
            </nb-radio>
          </nb-radio-group>
        </div>
      </div>
    </div>
  </nb-card-body>
  <nb-card-footer fxLayout="row" fxLayoutGap="1.5rem" fxLayoutAlign="end end">
    <!--Not needed for now-->
   <!-- <button nbButton size="small"
            class="dialog-button"
            status="info"
            [disabled]="!allowConfirm()"
            (click)="onClickConfirm()">
      {{ 'global.action.confirm' | translate }}
    </button>
    <button nbButton size="small"
            class="dialog-button"
            (click)="onClickCancel()">
      {{ 'global.action.cancel' | translate }}
    </button>-->
    <button nbButton size="small"
            class="dialog-button"
            (click)="onClickCancel()">
      {{ 'global.action.exit' | translate }}
    </button>
  </nb-card-footer>
</nb-card>
