<div class="container" *ngIf="(registration$ |async)">
    <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="font-weight-bold">{{'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>
