<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
        </ion-buttons>

        <ion-title>
            <h1>{{ 'core.login.passwordforgotten' | translate }}</h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <div class="list-item-limited-width">

        <ion-list>
            <ion-item class="ion-text-wrap">
                <ion-label>{{ 'core.login.passwordforgotteninstructions2' | translate }}</ion-label>
            </ion-item>
        </ion-list>
        <ion-card>
            <form [formGroup]="myForm" (ngSubmit)="resetPassword($event)" #resetPasswordForm>
                <ion-item-divider class="ion-text-wrap">
                    <ion-label>
                        <h2>{{ 'core.login.searchby' | translate }}</h2>
                    </ion-label>
                </ion-item-divider>
                <ion-radio-group formControlName="field">
                    <ion-item>
                        <ion-label>{{ 'core.login.username' | translate }}</ion-label>
                        <ion-radio slot="end" value="username"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'core.user.email' | translate }}</ion-label>
                        <ion-radio slot="end" value="email"></ion-radio>
                    </ion-item>
                </ion-radio-group>
                <ion-item>
                    <ion-label class="sr-only">{{ 'core.login.usernameoremail' | translate }}</ion-label>
                    <ion-input type="text" name="value" placeholder="{{ 'core.login.usernameoremail' | translate }}" formControlName="value"
                        autocapitalize="none" autocorrect="off" [core-auto-focus]="autoFocus">
                    </ion-input>
                </ion-item>
                <ion-button type="submit" class="ion-margin" expand="block" [disabled]="!myForm.valid">
                    {{ 'core.courses.search' | translate }}
                </ion-button>
            </form>
        </ion-card>
    </div>
</ion-content>
