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

        <ion-title>
            <h1 *ngIf="!changingPassword">{{ 'core.login.changepassword' | translate }}</h1>
            <h1 *ngIf="changingPassword">{{ 'core.login.reconnecttosite' | translate }}</h1>
        </ion-title>

        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
                <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list class="list-item-limited-width">
        <ng-container *ngIf="!changingPassword">
            <ion-item class="ion-text-wrap">
                <ion-label>
                    <h2>{{ 'core.login.forcepasswordchangenotice' | translate }}</h2>
                </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">
                <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">
            <ion-label>
                <p>{{ 'core.wanttochangesite' | translate }}</p>
            </ion-label>
        </ion-item>
        <ion-button class="ion-text-wrap ion-margin" expand="block" fill="outline" (click)="logout()">
            {{ logoutLabel | translate }}
        </ion-button>
    </ion-list>
</ion-content>
