<div class="container">
    <h3 class="mb-4">{{'forgot-password.form.head' | translate}}</h3>
    <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">
                    <label class="font-weight-bold"
                           for="email">{{'forgot-password.form.identification.email' | translate}}</label>
                    <span id="email">{{(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
                    [disabled]="isInValid"
                    class="btn btn-default btn-primary"
                    (click)="submit()">{{'forgot-password.form.submit' | translate}}</button>
        </div>
    </div>
</div>