@if ((registration$ |async)) {
  <div class="container">
    <h1 class="mb-4">{{'forgot-password.form.head' | translate}}</h1>
    <div class="card mb-4">
      <div class="card-header">{{'forgot-password.form.identification.header' | translate}}</div>
      <div class="card-body">
        <div class="row">
          <div class="col-12">
            <span class="fw-bold form-label">{{'forgot-password.form.identification.email' | translate}} </span>
            <span [attr.data-test]="'email' | dsBrowserOnly">{{(registration$ |async).email}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card mb-4">
      <div class="card-header">{{'forgot-password.form.card.security' | translate}}</div>
      <div class="card-body">
        <ds-profile-page-security-form
          [passwordCanBeEmpty]="false"
          [FORM_PREFIX]="'forgot-password.form.'"
          (isInvalid)="setInValid($event)"
          (passwordValue)="setPasswordValue($event)"
        ></ds-profile-page-security-form>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <button
          [dsBtnDisabled]="isInValid"
          class="btn btn-default btn-primary"
        (click)="submit()">{{'forgot-password.form.submit' | translate}}</button>
      </div>
    </div>
  </div>
}
