<div class="login-screen__wrapper">
    <div class="login-screen">
        <div class="login-screen__content">
            <div class="login-screen__logo">
                <img src="assets/stork-logo-big.png" />
                <a href="https://stork.isc.org" target="_blank" class="no-underline">Stork</a>
            </div>
            <div class="login-screen__version">version: {{ version }}</div>

            <div class="login-screen-intro">
                Dashboard for
                <a href="https://kea.isc.org" target="_blank">ISC Kea</a>
                and
                <a href="https://bind.isc.org" target="_blank">ISC BIND 9</a>
            </div>

            <div class="login-screen__authentication">
                <p-progressSpinner
                    class="login-screen__authentication-loader"
                    *ngIf="!authenticationMethods"
                ></p-progressSpinner>
                <form [formGroup]="loginForm" *ngIf="authenticationMethods">
                    <div class="login-screen__authentication-selector" *ngIf="authenticationMethods.length > 1">
                        <div class="p-float-label w-full">
                            <p-dropdown
                                [options]="authenticationMethods"
                                formControlName="authenticationMethod"
                                optionLabel="name"
                                name="authenticationMethod"
                                inputId="authenticationMethod"
                                styleClass="w-full"
                            >
                                <ng-template let-item pTemplate="item">
                                    <div class="flex align-items-center gap-2">
                                        <img
                                            src="/assets/authentication-methods/{{ item.id }}.png"
                                            (error)="onMissingIcon($event)"
                                        />
                                        <div>{{ item.name }}</div>
                                    </div>
                                </ng-template>
                                <ng-template pTemplate="selectedItem">
                                    <div
                                        class="flex align-items-center gap-2"
                                        *ngIf="loginForm.get('authenticationMethod').value"
                                    >
                                        <img
                                            src="/assets/authentication-methods/{{
                                                loginForm.get('authenticationMethod').value.id
                                            }}.png"
                                            (error)="onMissingIcon($event)"
                                        />
                                        <div>{{ loginForm.get('authenticationMethod').value.name }}</div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <label for="authenticationMethod" class="text-white">Pick a Method</label>
                        </div>
                        <p>
                            {{ loginForm.get('authenticationMethod')?.value.description }}
                        </p>
                    </div>
                    <div class="login-screen__authentication-inputs">
                        <div
                            *ngIf="loginForm.get('authenticationMethod')?.value.formLabelIdentifier"
                            class="p-float-label"
                        >
                            <input
                                type="text"
                                name="identifier"
                                id="identifier"
                                formControlName="identifier"
                                pInputText
                                autofocus
                            />
                            <label htmlFor="identifier">{{
                                loginForm.get('authenticationMethod')?.value.formLabelIdentifier
                            }}</label>
                        </div>
                        <div *ngIf="loginForm.get('authenticationMethod')?.value.formLabelSecret" class="p-float-label">
                            <p-password
                                name="secret"
                                id="secret"
                                formControlName="secret"
                                styleClass="password-component"
                                (keyup)="keyUp($event)"
                                [feedback]="false"
                                [toggleMask]="true"
                            />
                            <label for="secret">{{
                                loginForm.get('authenticationMethod')?.value.formLabelSecret
                            }}</label>
                        </div>
                        <div>
                            <button
                                pButton
                                id="sign-in-button"
                                type="button"
                                label="Sign In"
                                (click)="signIn()"
                                [disabled]="!loginForm.valid"
                            ></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!--
            Optionally render a custom welcome message fetched from the
            assets/static-page-content/login-screen-welcome.html
        -->
        <div *ngIf="welcomeMessage" class="login-screen__welcome">
            <p-messages severity="warn">
                <ng-template pTemplate>
                    <div [innerHTML]="welcomeMessage"></div>
                </ng-template>
            </p-messages>
        </div>

        <div class="login-screen__footer">Copyright 2019-2024 by ISC. All Rights Reserved.</div>
    </div>
</div>
