<ng-container *transloco="let t; prefix:'reset-password'">
  <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" style="width:100%">
          <label for="email" class="form-label visually-hidden">{{t('email-label')}}</label>
          <input class="form-control custom-input" type="email" inputmode="email" id="email" formControlName="email" [class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched" [placeholder]="t('email-label')">
          @if (registerForm.dirty || registerForm.touched) {
            <div id="inviteForm-validations" class="invalid-feedback">
              @if (registerForm.get('email')?.errors?.required) {
                <div>
                  {{t('required-field')}}
                </div>
              }
              @if (registerForm.get('email')?.errors?.email) {
                <div>
                  {{t('valid-email')}}
                </div>
              }
            </div>
          }
        </div>

        <div>
          <button class="btn btn-primary" type="submit">{{t('submit')}}</button>
        </div>
      </form>
    </ng-container>
  </app-splash-container>

</ng-container>
