<div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
    <div class="login-gradient-bar">
    </div>
</div>
<div class="small-middle-container">
    <div *ngIf="form && customizationSettings && authenticationSettings">

        <mat-card class="mat-elevation-z8 top-margin login-card">
            <H1 *ngIf="!customizationSettings.logo && !customizationSettings.applicationName" class="login_logo">OMBI</H1>
            <H1 *ngIf="customizationSettings.applicationName && !customizationSettings.logo" [ngClass]="{'bigText': customizationSettings.applicationName.length >= 7 && customizationSettings.applicationName.length < 14, 'hugeText': customizationSettings.applicationName.length >= 14 }" class="login_logo custom">{{customizationSettings.applicationName}}</H1>
            <img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo" class="logo-img">
            <mat-card-content id="login-box" *ngIf="!authenticationSettings.enableOAuth || loginWithOmbi">
                <form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">


                    <mat-form-field class="dark full-width" appearance="outline">
                        <mat-label>{{'Login.UsernamePlaceholder' | translate}}</mat-label>
                        <input id="username-field" type="text" matInput formControlName="username" />
                        <mat-error id="username-error" *ngIf="form.get('username').hasError('required')">
                            {{'Login.UsernamePlaceholder' | translate}} is <strong>required</strong></mat-error>
                    </mat-form-field>

                    <mat-form-field *ngIf="!authenticationSettings.allowNoPassword" class="full-width" appearance="outline">
                        <mat-label>{{'Login.PasswordPlaceholder' | translate}}</mat-label>
                        <input id="password-field" color="black" type="password" matInput formControlName="password" />
                    </mat-form-field>

                    <mat-checkbox formControlName="rememberMe">{{'Login.RememberMe' | translate}}</mat-checkbox>

                    <button id="sign-in" mat-raised-button color="accent"  data-cy="OmbiButton"  type="submit">{{'Login.SignInButton' | translate}}</button>

                    <a [routerLink]="['/reset']" class="forgot-password col-md-12">
                        <b [translate]="'Login.ForgottenPassword'"></b>
                    </a>
                </form>
            </mat-card-content>

            <mat-card-content *ngIf="authenticationSettings.enableOAuth && !loginWithOmbi" class="login-buttons">
                <div>

                    <button id="sign-in" mat-raised-button color="primary" type="submit" data-cy="OmbiButton" (click)="loginWithOmbi = true">{{'Login.SignInWith' | translate:appNameTranslate}}</button>
                    <button id="sign-plex" mat-raised-button color="accent" type="button" data-cy="oAuthPlexButton" (click)="oauth()">
                        <span *ngIf="!oauthLoading">{{'Login.SignInWithPlex' | translate}}</span>
                        <span *ngIf="oauthLoading"><i class="fas fa-circle-notch fa-spin fa-fw"></i></span>
                    </button>
                </div>
            </mat-card-content>

        </mat-card>

    </div>
</div>