<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="profileForm" layoutDirection="column" *ngIf="createOptions" class="fl-content">
  <app-form-errors #formErrors [formGroup]="profileForm"></app-form-errors>
  <div layoutDirection="row" layoutDirection-lt-md="column">
    <mat-form-field appFlex="50">
      <mat-label i18n>First name</mat-label>
      <input matInput placeholder="First name" i18n-placeholder type="text" formControlName="first_name" required>
      <mat-error>{{fieldErrors['first_name']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="50" class="offset-2-gt-sm">
      <mat-label i18n>Last name</mat-label>
      <input matInput placeholder="Last name" i18n-placeholder type="text" formControlName="last_name" required>
      <mat-error>{{fieldErrors['last_name']}}</mat-error>
    </mat-form-field>
  </div>
  <div layoutDirection="row" layoutDirection-lt-md="column">
    <mat-form-field appFlex="48">
      <mat-label i18n>Email address</mat-label>
      <input matInput placeholder="Email address" i18n-placeholder type="email" formControlName="email" required>
      <mat-error>{{fieldErrors['email']}}</mat-error>
    </mat-form-field>
    <app-phone-input [control]="profileForm.controls.mobile_phone_number"
                     [countrySelectorFlex]="'30'"
                     [phoneInputFlex]="'70'"
                     appFlex="50"
                     class="offset-2-gt-sm">
    </app-phone-input>
    <input type="hidden" formControlName="mobile_phone_number">
  </div>
  <div *ngIf="profileForm.contains('unverified_email')">
    <mat-form-field appFlex="48">
      <mat-label i18n>Unverified email address</mat-label>
      <input matInput placeholder="Unverified email address" i18n-placeholder type="email" formControlName="unverified_email">
      <mat-error>{{fieldErrors['unverified_email']}}</mat-error>
    </mat-form-field>
    <app-icon [icon]="unverifiedEmailInfo"></app-icon>
    <a class="fl-margin-top-medium fl-margin-left-medium" (click)="resendVerificationCode()"
       mat-button i18n>Resend code</a>
  </div>
  <div layoutDirection="row" appLayoutGap="10px" layoutDirection-lt-md="column"
       *ngIf="config.authService.feature('enduser.allow_changing_password') ||
       config.authService.feature('ui.core.allow-changing-password')">
    <div appFlex="33" layoutDirection="row">
      <mat-form-field appFlex="auto" subscriptSizing="dynamic">
        <mat-label i18n>Current password</mat-label>
        <input matInput placeholder="Current password" i18n-placeholder
               autocomplete="off"
               [attr.type]="showOldPasswordText ? 'text' : 'password'" formControlName="old_password">
        <mat-error>{{fieldErrors['old_password']}}</mat-error>
        <a (mousedown)="showOldPasswordText = true;"
           (mouseup)="showOldPasswordText = false;"
           mat-icon-button matSuffix
           [attr.fl-tooltip]="holdButtonTxt">
          <mat-icon>visibility</mat-icon>
        </a>
      </mat-form-field>
    </div>
    <div appFlex="33" layoutDirection="row">
      <mat-form-field appFlex="auto" subscriptSizing="dynamic">
        <mat-label i18n>New password</mat-label>
        <input matInput placeholder="New password" i18n-placeholder
               autocomplete="off"
               [attr.type]="showPasswordText ? 'text' : 'password'" formControlName="password">
        <mat-error>{{passwordErrors()}}</mat-error>
        <a (mousedown)="showPasswordText = true;"
           (mouseup)="showPasswordText = false;"
           mat-icon-button matSuffix
           [attr.fl-tooltip]="holdButtonTxt">
          <mat-icon>visibility</mat-icon>
        </a>
      </mat-form-field>
    </div>
    <div appFlex="33" layoutDirection="row">
      <mat-form-field appFlex="auto" subscriptSizing="dynamic">
        <mat-label i18n>Confirm password</mat-label>
        <input matInput placeholder="Confirm password" i18n-placeholder
               autocomplete="off"
               [attr.type]="showPasswordConfirmText ? 'text' : 'password'" formControlName="password_confirm">
        <mat-error>{{passwordErrors()}}</mat-error>
        <a (mousedown)="showPasswordConfirmText = true;"
           (mouseup)="showPasswordConfirmText = false;"
           mat-icon-button matSuffix
           [attr.fl-tooltip]="holdButtonTxt">
          <mat-icon>visibility</mat-icon>
        </a>
      </mat-form-field>
    </div>
  </div>
  <p class="fl-detail fl-margin-bottom fl-margin-top" i18n>Changing password will log you out from all sessions, including current session.</p>
  <div layoutDirection="row">
    <mat-form-field appFlex="48">
      <mat-label i18n>Language</mat-label>
      <mat-select formControlName="language" placeholder="Language" i18n-placeholder>
        <mat-option *ngFor="let languageOpt of createOptions.languages" [value]="languageOpt[0]">
          {{languageOpt[1]}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field class="offset-2" appFlex="50">
      <mat-label i18n>Theme</mat-label>
      <mat-select formControlName="theme" placeholder="Theme" i18n-placeholder>
        <mat-option *ngFor="let themeName of config.current.settings.availableThemes" [value]="themeName">
          {{themeName}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</form>
