<ion-header>
    <ion-toolbar>
        <ion-title>{{ 'core.login.password' | translate }}</ion-title>

        <ion-buttons slot="end">
            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
                <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding addon-mod_lesson-password-modal">
    <form (ngSubmit)="submitPassword($event, passwordinput)" #passwordForm>
        <ion-item>
            <ion-label>{{ 'addon.mod_lesson.enterpassword' | translate }}</ion-label>
            <core-show-password name="password">
                <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
                    [autofocus]="true" #passwordinput [clearOnEdit]="false">
                </ion-input>
            </core-show-password>
        </ion-item>
        <ion-button expand="block" type="submit">
            {{ 'addon.mod_lesson.continue' | translate }}
            <ion-icon slot="end" name="fas-chevron-right" aria-hidden="true"></ion-icon>
        </ion-button>
        <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
        <input type="submit" class="core-submit-hidden-enter" />
    </form>
</ion-content>
