<h4>
  {{ "external-login.provide-email.header" | translate }}
</h4>

<form [formGroup]="emailForm" (ngSubmit)="submitForm()">
  <div class="form-group">
    <div class="form-row">
      <div class="col-12 my-2">
        <input
          type="email"
          id="email"
          formControlName="email"
          class="form-control form-control-lg position-relative"
          [attr.aria-label]="'external-login.confirmation.email' | translate"
        />

        @if (emailForm.get('email').hasError('required') && emailForm.get('email').touched) {
          <div class="text-danger">
            {{ "external-login.confirmation.email-required" | translate }}
          </div>
        }
        @if (emailForm.get('email').hasError('email') && emailForm.get('email').touched) {
          <div class="text-danger">
            {{ "external-login.confirmation.email-invalid" | translate }}
          </div>
        }
      </div>
    </div>
    <div class="form-row">
      <div class="col-12">
        <button type="submit" class="btn btn-lg btn-primary w-100">
          {{ "external-login.provide-email.button.label" | translate }}
        </button>
      </div>
    </div>
  </div>
</form>
