<div class="form-wrapper">

    <!-- Install notice -->
    <div class="login-container" *ngIf="installationNotice">
        <mat-card [innerHTML]="(installationNotice) | translate"></mat-card>
    </div>

    <!-- login form -->
    <form [formGroup]="loginForm" class="login-container" (ngSubmit)="formLogin('default')">
        <mat-form-field>
            <input
                matInput
                osAutofocus
                required
                placeholder="{{ 'Username' | translate }}"
                formControlName="username"
                [errorStateMatcher]="parentErrorStateMatcher"
            />
        </mat-form-field>
        <br />
        <mat-form-field>
            <input
                matInput
                required
                placeholder="{{ 'Password' | translate }}"
                formControlName="password"
                [type]="!hide ? 'password' : 'text'"
                [errorStateMatcher]="parentErrorStateMatcher"
            />
            <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility_off' : 'visibility_on' }}</mat-icon>

            <mat-error>{{ loginErrorMsg | translate }}</mat-error>
        </mat-form-field>

        <!-- forgot password button -->
        <br />
        <button type="button" class="forgot-password-button" (click)="resetPassword()" mat-button>
            {{ 'Forgot Password?' | translate }}
        </button>

        <!-- login button -->
        <br />
        <!-- TODO: Next to each other...-->
        <button mat-raised-button color="primary" class="login-button" type="submit">{{ 'Login' | translate }}</button>
        <button
            mat-stroked-button
            *ngIf="areGuestsEnabled()"
            class="login-button"
            type="button"
            (click)="guestLogin()"
        >
            {{ 'Login as guest' | translate }}
        </button>
        <a
            mat-stroked-button
            *ngIf="samlLoginButtonText"
            class="login-button"
            type="button"
            (click)="formLogin('saml')"
        >
            {{ samlLoginButtonText | translate }}
        </a>
    </form>
</div>
