<section class="container vertical-spacing">
  <div class="row">
    <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
      <form class="auth-form" (ngSubmit)="onSubmit(f)" #f="ngForm">
        <h1 class="heading heading--md heading--separator">
          {{ 'User.NewPasswordCreation' | translate }}
        </h1>

        <!-- FORM -->
        <ng-container *ngIf="!mailSent">
          <!-- api notifications -->
          <app-notifications aria-live="polite"></app-notifications>

          <p>
            {{ 'User.NewPasswordCreationDescription' | translate }}
          </p>

          <!-- EMAIL -->
          <div class="form-group" [ngClass]="{ 'form-group-invalid': !email.valid && email.touched }">
            <label for="email">E-mail</label>
            <input
              type="email"
              class="form-control"
              id="email"
              placeholder="{{ 'Action.Enter' | translate }} {{ 'User.Email' | translate | lowercase }}"
              ngModel
              name="email"
              required
              email
              #email="ngModel"
              [attr.aria-describedby]="'email_error'"
              [attr.aria-invalid]="!email.valid && email.touched" />

            <!-- email field validation error -->
            <small
              class="form-text text-danger"
              role="alert"
              id="email_error"
              *ngIf="!email.valid && email.touched"
              @toggleVertically>
              {{ 'Validation.RequiredEmail' | translate }}
            </small>
          </div>

          <!-- SUBMIT FORM -->
          <div class="form-check clearfix">
            <!-- fake button to indicate 'disabled' state -->
            <button
              type="button"
              class="btn btn-secondary disabled"
              *ngIf="!f.valid"
              aria-describedby="backend_notifications email_error"
              [attr.aria-disabled]="!f.valid || isSubmitDisabled">
              {{ 'Action.Send' | translate | uppercase }}
            </button>

            <!-- Submit form -->
            <button type="submit" class="btn btn-primary" *ngIf="f.valid">
              {{ 'Action.Send' | translate | uppercase }}
            </button>
          </div>
        </ng-container>

        <!-- form has been sent: success message -->
        <p class="alert alert-success" role="alert" aria-live="polite" *ngIf="mailSent">
          {{ 'User.NewPasswordCreationLinkSent' | translate }}
        </p>
      </form>
    </div>
  </div>
</section>
