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

        <ion-title>{{ 'core.login.changepassword' | translate }}</ion-title>

        <ion-buttons slot="end">
            <ion-button (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
                <ion-icon slot="icon-only" name="far-question-circle" aria-hidden="true"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list>
        <ng-container *ngIf="!changingPassword">
            <ion-item class="ion-text-wrap" lines="none">
                <ion-label>
                    <h2>{{ 'core.login.forcepasswordchangenotice' | translate }}</h2>
                    <p class="ion-padding-top">{{ 'core.login.changepasswordinstructions' | translate }}</p>
                </ion-label>
            </ion-item>
            <ion-button class="ion-text-wrap ion-margin" expand="block" (click)="openChangePasswordPage()">
                {{ 'core.login.changepasswordbutton' | translate }}
            </ion-button>
        </ng-container>
        <ng-container *ngIf="changingPassword">
            <ion-item class="ion-text-wrap" lines="none">
                <ion-label>
                    <p>{{ 'core.login.changepasswordreconnectinstructions' | translate }}</p>
                </ion-label>
            </ion-item>
            <ion-button class="ion-text-wrap ion-margin" expand="block" (click)="login()">
                {{ 'core.login.reconnect' | translate }}
            </ion-button>
        </ng-container>
        <ion-item class="ion-text-wrap" lines="none">
            <ion-label>
                <p>{{ 'core.login.changepasswordlogoutinstructions' | translate }}</p>
            </ion-label>
        </ion-item>
        <ion-button class="ion-text-wrap ion-margin" expand="block" color="light" (click)="logout()">
            {{ logoutLabel | translate }}
        </ion-button>
    </ion-list>
</ion-content>
