<ion-header [translucent]="true">
    <ion-toolbar color="primary">
        <ion-title>{{'lang.otpUser' | translate}}</ion-title>
        <ion-buttons slot="end">
            <ion-button (click)="dismissModal()">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-card *ngIf="sources.length > 1">
        <ion-item>
            <ion-label color="secondary">{{'lang.source' | translate}}</ion-label>
            <ion-select [value]="currentSource.id" cancelText="{{'lang.cancel' | translate}}">
                <ion-select-option *ngFor="let source of sources" [value]="source.id">
                    {{source.label | translate}}</ion-select-option>
            </ion-select>
        </ion-item>
    </ion-card>
    <app-otp-yousign #appOtpYousign *ngIf="currentSource.type === 'yousign'" [connectorId]="currentSource.id"></app-otp-yousign>
    <ion-card>
        <ion-item color="primary">
            <ion-label class="info" [innerHTML]="'lang.otpMsg' | translate : { security : appOtpYousign?.getSecurityMode()}"></ion-label>
        </ion-item>
    </ion-card>
</ion-content>
<ion-footer class="ion-no-border">
    <ion-toolbar>
        <ion-buttons class="ion-justify-content-center">
            <ion-button type="submit" color="primary" (click)="onSubmit()" [disabled]="!isValid()">
                <ion-label>{{'lang.save' | translate}}</ion-label>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-footer>