<ng-container *transloco="let t; prefix: 'register'">
  <app-splash-container>
    <ng-container title><h2>{{t('title')}}</h2></ng-container>
    <ng-container body>
      <p>{{t('description')}}</p>
      <form [formGroup]="registerForm" (ngSubmit)="submit()">
        <div class="mb-3 text-start">
          <label for="username" class="form-label">{{t('username-label')}}</label>
          <input id="username" class="form-control custom-input" formControlName="username" type="text" autocomplete="username"
                 [class.is-invalid]="registerForm.get('username')?.invalid && registerForm.get('username')?.touched" aria-describedby="username-validations">
          @if (registerForm.dirty || registerForm.touched) {
            <div id="username-validations" class="invalid-feedback">
              @if (registerForm.get('username')?.errors?.required) {
                <div>{{t('required-field')}}</div>
              }
            </div>
          }
        </div>

        <div class="mb-3 text-start">
          <label for="email" class="form-label float-start">{{t('email-label')}}</label>
          <i class="fa fa-info-circle ms-1" placement="right" [ngbTooltip]="emailTooltip" role="button" tabindex="0"></i>
          <ng-template #emailTooltip>{{t('email-tooltip')}}</ng-template>
          <span class="visually-hidden" id="email-help">
            <ng-container [ngTemplateOutlet]="emailTooltip" />
          </span>
          <input class="form-control custom-input" type="email" inputmode="email" id="email" autocomplete="email" formControlName="email" aria-describedby="email-help"
                 [class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
          @if (registerForm.dirty || registerForm.touched) {
            <div id="email-validations" class="invalid-feedback">
              @if (registerForm.get('email')?.errors?.required) {
                <div>{{t('required-field')}}</div>
              } @else if (registerForm.get('email')?.errors?.email) {
                <div>{{t('valid-email')}}</div>
              }
            </div>
          }

        </div>

        <div class="mb-3 text-start">
          <label for="password" class="form-label">Password</label>
          <i class="fa fa-info-circle ms-1" placement="right" [ngbTooltip]="passwordTooltip" role="button" tabindex="0"></i>
          <ng-template #passwordTooltip>
            {{t('password-validation')}}
          </ng-template>
          <span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip" /></span>
          <input id="password" class="form-control custom-input" maxlength="256" minlength="6" pattern="^.{6,256}$" formControlName="password" autocomplete="new-password"
                 type="password" aria-describedby="password-help" [class.is-invalid]="registerForm.get('password')?.invalid && registerForm.get('password')?.touched">
          @if (registerForm.dirty || registerForm.touched) {
            <div id="password-validations" class="invalid-feedback">
              @if (registerForm.get('password')?.errors?.required) {
                <div>{{t('required-field')}}</div>
              }
              @if (registerForm.get('password')?.errors?.minlength || registerForm.get('password')?.errors?.maxLength || registerForm.get('password')?.errors?.pattern) {
                <div>{{t('password-validation')}}</div>
              }
            </div>
          }
        </div>

        <div>
          <button class="btn btn-primary" type="submit" [disabled]="!registerForm.valid">{{t('register')}}</button>
        </div>
      </form>
    </ng-container>
  </app-splash-container>

</ng-container>
