<div class="container">
    <div class="flex column fill center middle">
        <form action="{{apiUrl}}/login" method="POST" #loginForm class="box">
            <mat-card>
                <mat-card-content>
                    <img class="logo" src="assets/images/banner.png">
                    <h2>{{'login.internal' | i18n}}</h2>
                    <mat-error *ngIf="loginInvalid">
                        {{'login.invalid' | i18n}}
                    </mat-error>
                    <mat-form-field>
                        <mat-label>{{'login.username' | i18n}}</mat-label>
                        <input id="username" name="username" matInput required matAutofocus [value]="username">
                        <mat-error>
                            {{'login.username.missing' | i18n}}
                        </mat-error>
                    </mat-form-field>
                    <mat-form-field>
                        <mat-label>{{'login.password' | i18n}}</mat-label>
                        <input id="password" name="password" matInput type="password" required>
                        <mat-error>
                            {{'login.password.invalid.hint' | i18n}}
                        </mat-error>
                    </mat-form-field>
                    <mat-slide-toggle (change)="rememberMe.value = '' + $event.checked">
                        {{'login.keepSession' | i18n}}
                    </mat-slide-toggle>
                    <input #rememberMe id="remember-me" name="remember-me" type="hidden">
                </mat-card-content>
                <mat-card-actions>
                    <button type="submit" (click)="loginForm.submit()" mat-raised-button color="primary"
                        [disabled]="loginForm.invalid">{{'login' |
                        i18n}}<mat-icon style="font-size: 1em;">open_in_new
                        </mat-icon></button>
                </mat-card-actions>
            </mat-card>
        </form>

        <mat-card *ngIf="externals && externals.length > 0" class="box">
            <mat-card-content>
                <h2>{{'login.external' | i18n}}</h2>
                <mat-error *ngIf="externalLoginInvalid">
                    {{'login.external.invalid' | i18n}}
                </mat-error>
            </mat-card-content>
            <mat-card-actions class="flex wrap">
                <a class="external-login" (click)="externalLogin(client)" *ngFor="let client of externals"
                    mat-raised-button color="accent">{{'login.external.client' | i18n:('login.provider.' + client.id |
                    i18n)}}</a>
                <mat-slide-toggle [(ngModel)]="autologin">
                    {{'login.autologin' | i18n}}
                </mat-slide-toggle>
            </mat-card-actions>
        </mat-card>
    </div>
</div>