<ombi-image-background></ombi-image-background>
    <div class="small-middle-container">
        <div *ngIf="form && customizationSettings">

            <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">
                <mat-card-content id="login-box">
                    <div *ngIf="form.value.password !== form.value.confirmPassword" class="alert alert-danger">The passwords do not match</div>
                    <div *ngIf="form.invalid && form.dirty" class="alert alert-danger">

                        <div *ngIf="form.get('password').hasError('required')">The Password is required</div>
                        <div *ngIf="form.get('email').hasError('required')">The Email is required</div>
                        <div *ngIf="form.get('confirmPassword').hasError('required')">The Confirm Password is required</div>
                    </div>

                    <form class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
                        <mat-form-field class="dark full-width" appearance="outline">
                            <mat-label>{{'PasswordReset.EmailAddressPlaceholder' | translate}}</mat-label>
                            <input type="email"  id="username-field" matInput formControlName="email" autofocus/>
                            <mat-error id="username-error" *ngIf="form.get('email').hasError('required')">
                                {{'PasswordReset.EmailAddressPlaceholder' | translate}} is <strong>required</strong></mat-error>
                        </mat-form-field>

                        <mat-form-field class="dark full-width" appearance="outline">
                            <mat-label>New Password</mat-label>
                            <input type="password"  id="username-field" matInput formControlName="password" autofocus/>
                            <mat-error id="username-error" *ngIf="form.get('password').hasError('required')">
                                Password is <strong>required</strong></mat-error>
                        </mat-form-field>

                        <mat-form-field class="dark full-width" appearance="outline">
                            <mat-label>Confirm Password</mat-label>
                            <input type="password"  id="username-field" matInput formControlName="confirmPassword" autofocus/>
                            <mat-error id="username-error" *ngIf="form.get('confirmPassword').hasError('required')">
                                Password is <strong>required</strong></mat-error>
                        </mat-form-field>

                    <button id="reset" mat-raised-button color="accent" [disabled]="form.invalid" type="submit">{{'Reset Password' | translate}}</button>

                    </form>
                </mat-card-content>



            </mat-card>

        </div>
    </div>
