<h1>Создание администратора</h1>
<hr/>
<p class="mat-body-2 secondary">
  На этой странице вы можете создать учетную запись администратора.
</p>
<p class="mat-body-2 secondary">
  Заполните необходимые поля, такие как имя пользователя, адрес электронной почты и пароль, чтобы создать учетную запись
  с правами администратора для управления приложением.
</p>

<form [formGroup]="createAdminForm">
  <p>
    Ведите данные для создания аккаунта администратора:
  </p>
  <div style="display:flex; flex-direction: column;">
    <mat-form-field color="accent">
      <mat-label>Имя пользователя</mat-label>
      <input matInput
             matTooltip='Укажите имя пользователя используя латинские буквы и цифры без пробелов'
             required
             formControlName="user">

      @if (createAdminForm.get('user')?.hasError('required')) {
        <mat-error>
          Имя пользователя является <i>обязательным</i>
        </mat-error>
      }

      @if (createAdminForm.get('user')?.hasError('pattern')) {
        <mat-error>
          Имя пользователя должен содержать латинские символы и цифры и быть не менее 4 символов
        </mat-error>
      }
    </mat-form-field>

    <mat-form-field color="accent">
      <mat-label>Email</mat-label>
      <input matInput
             matTooltip="Укажите email администратора"
             required
             formControlName="email">

      @if (createAdminForm.get('email')?.hasError('required')) {
        <mat-error>
          Email является <i>обязательным</i>
        </mat-error>
      }

      @if (createAdminForm.get('email')?.hasError('email')) {
        <mat-error>
          Введите корректный Email адрес
        </mat-error>
      }
    </mat-form-field>

    <mat-form-field color="accent" style="margin-bottom: 20px">
      <mat-label>Пароль</mat-label>
      <input matInput
             matTooltip="Укажите пароль"
             formControlName="password"
             required
             [type]="hidePass ? 'password' : 'text'">

      <button mat-icon-button matSuffix (click)="togglePassword($event)" [attr.aria-label]="'Hide password'"
              [attr.aria-pressed]="hidePass">
        <mat-icon>{{ hidePass ? 'visibility_off' : 'visibility' }}</mat-icon>
      </button>

      @if (createAdminForm.get('password')?.hasError('required')) {
        <mat-error>
          Пароль является <i>обязательным</i>
        </mat-error>
      }

      @if (createAdminForm.get('password')?.hasError('minlength')) {
        <mat-error>
          Пароль должен быть не менее {{ policy.minimumLength }} символов
        </mat-error>
      }

      @if (createAdminForm.get('password')?.hasError('pattern')) {
        <mat-error>
          Пароль должен содержать:
          @if (policy.requireLettersDifferentCase) {
            * Латинские символы разных регистров
          } @else if (policy.requireLetter) {
            * Один латинский символ
          } @else if (policy.requireDigit) {
            * Одну цифру
          }
          @if (policy.requireSpecialCharacter) {
            * специальный символ
          }
        </mat-error>
      }
    </mat-form-field>

    <mat-form-field color="accent">
      <mat-label>Повторите пароль</mat-label>
      <input matInput
             matTooltip="Укажите пароль, который был указан ранее"
             formControlName="retype"
             required
             [type]="hideRetypePass ? 'password' : 'text'"
             onpaste="return false;">

      <button mat-icon-button matSuffix (click)="toggleRetypePassword($event)" [attr.aria-label]="'Hide password'"
              [attr.aria-pressed]="hideRetypePass">
        <mat-icon>{{ hideRetypePass ? 'visibility_off' : 'visibility' }}</mat-icon>
      </button>

      @if (createAdminForm.get('retype')?.hasError('passwordsMismatch')) {
        <mat-error>
          Пароли не совпадают
        </mat-error>
      }
    </mat-form-field>

    <OAuthProviders [canUnlink]="true" [activeProvidersId]="activatedProviders" (oAuthUpdateProviders)="updateProviders()"
                    [message]="'Или можете получить часть данных от сторонних сервисов'"/>
  </div>
</form>