<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
        </ion-buttons>

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

        <ion-buttons slot="end">
            <ion-button router-direction="forward" routerLink="/settings"
                [attr.aria-label]="'core.settings.appsettings' | translate">
                <ion-icon slot="icon-only" name="fas-cog" aria-hidden="true"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
    <core-loading [hideUntil]="pageLoaded">
        <div class="ion-text-wrap ion-text-center ion-margin-bottom">
            <div class="core-login-site-logo">
                <!-- Show site logo or a default image. -->
                <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" alt="" onError="this.src='assets/img/login_logo.png'">
                <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
            </div>

            <h3 *ngIf="siteName" class="ion-padding core-sitename">
                <core-format-text [text]="siteName" [filter]="false"></core-format-text>
            </h3>
            <p class="core-siteurl">{{siteUrl}}</p>
        </div>

        <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm>
            <ion-item *ngIf="siteChecked && !isBrowserSSO">
                <ion-label></ion-label>
                <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
                    formControlName="username" autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next"
                    required="true">
                </ion-input>
            </ion-item>
            <ion-item *ngIf="siteChecked && !isBrowserSSO" class="ion-margin-bottom">
                <ion-label></ion-label>
                <core-show-password name="password">
                    <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
                        formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go"
                        required="true">
                    </ion-input>
                </core-show-password>
            </ion-item>
            <ion-button expand="block" type="submit" [disabled]="siteChecked && !isBrowserSSO && !credForm.valid"
                class="ion-margin core-login-login-button">
                {{ 'core.login.loginbutton' | translate }}
            </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" />

            <ng-container *ngIf="showScanQR">
                <div class="ion-text-center ion-padding">{{ 'core.login.or' | translate }}</div>
                <ion-button expand="block" color="light" class="ion-margin" lines="none" (click)="showInstructionsAndScanQR()">
                    <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
                    <ion-label>{{ 'core.scanqr' | translate }}</ion-label>
                </ion-button>
            </ng-container>
        </form>

        <!-- Forgotten password option. -->
        <ion-list lines="none" *ngIf="showForgottenPassword" class="core-login-forgotten-password ion-no-padding">
            <ion-item button class="ion-text-center ion-text-wrap" (click)="forgottenPassword()" detail="false">
                <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
            </ion-item>
        </ion-list>

        <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
            <ion-item class="ion-text-wrap" lines="none">
                <ion-label><h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3></ion-label>
            </ion-item>
            <ion-item button *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-icon"
                (click)="oauthClicked(provider)" [attr.aria-label]="provider.name">
                <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
                <ion-label>{{provider.name}}</ion-label>
            </ion-item>
        </ion-list>

        <ion-list *ngIf="canSignup" class="ion-padding-top core-login-sign-up">
            <ion-item class="ion-text-wrap" lines="none">
                <ion-label><h3 class="item-heading">{{ 'core.login.firsttime' | translate }}</h3></ion-label>
            </ion-item>
            <ion-item class="ion-text-wrap" lines="none" *ngIf="authInstructions">
                <ion-label><p><core-format-text [text]="authInstructions" [filter]="false"></core-format-text></p></ion-label>
            </ion-item>
            <ion-button expand="block" class="ion-margin" color="light" router-direction="forward" routerLink="/login/emailsignup"
                [queryParams]="{siteUrl: siteUrl}">
                {{ 'core.login.startsignup' | translate }}
            </ion-button>
        </ion-list>
    </core-loading>
</ion-content>
