<div *ngIf="loginMethods.length || identityProviders.length || showScanQR" class="ion-text-center ion-padding core-login-methods-separator">
    <span>{{ 'core.login.or' | translate }}</span>
</div>

<div class="core-login-methods" *ngIf="loginMethods.length">
    <ion-button [fill]="'outline'" class="ion-text-wrap ion-margin" *ngFor="let method of loginMethods" (click)="method.action()"
        [attr.aria-label]="method.name" expand="block">
        <ion-icon *ngIf="method.icon" [name]="method.icon" slot="start" />
        <ion-label>{{ method.name }}</ion-label>
    </ion-button>
</div>

<ng-container *ngIf="showScanQR">
    <ion-button expand="block" fill="outline" class="ion-margin core-login-site-qrcode" (click)="showInstructionsAndScanQR()">
        <ion-icon slot="start" name="fas-qrcode" aria-hidden="true" />
        {{ 'core.scanqr' | translate }}
    </ion-button>
</ng-container>

<!-- Identity providers. -->
<ion-list *ngIf="identityProviders.length" class="core-login-identity-providers">
    <h2 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h2>
    <ion-button [fill]="'outline'" *ngFor="let provider of identityProviders" class="ion-text-wrap ion-margin core-oauth-provider"
        (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
        <img *ngIf="provider.iconurl" [src]="provider.iconurl" alt="" width="32" height="32" slot="start" aria-hidden="true">
        <ion-label>{{ provider.name }}</ion-label>
    </ion-button>
</ion-list>
