<div *ngIf="(vm$ | async) as vm">

    <!-- Start of login form section -->

    <form name="login" class="login-form" #loginForm="ngForm">
        <div class="form-row form-group">
            <div class="col">
                <scrm-logo-ui></scrm-logo-ui>
            </div>
        </div>
        <div class="form-row" *ngIf="vm.showLanguages">
            <div class="col">
                <label class="" for="languages">{{vm.appStrings['LBL_LANGUAGE']}}</label>
            </div>
            <div class="w-100"></div>
            <div class="col">
                <div class="inner-addon left-addon">
                    <select #languageSelect id="languages"
                            (change)="doLanguageChange(languageSelect.value)">
                        <option [value]="item.key"
                                *ngFor="let item of vm.systemConfigs['languages'].items | keyvalue"
                                [selected]="doGetCurrentLanguage() === item.key">{{item.value}}</option>
                    </select>
                </div>
            </div>
        </div>


        <div class="form-row fade-card">

            <!-- Card front -->
            <div class="fade-card-front col"
                 *ngIf="cardState==='front'"
                 [@fade]>

                <div class="inner-addon left-addon">
                    <scrm-image image="login_user"></scrm-image>
                    <input [(ngModel)]="uname"
                           type="text"
                           name="username"
                           [class.is-invalid]="username.invalid && username.touched"
                           #username="ngModel"
                           placeholder="{{vm.appStrings['LBL_USER_NAME']}}"
                           aria-label="Username"
                           required>
                    <div *ngIf="username.invalid && username.touched" class="invalid-feedback">
                        {{vm.appStrings['ERR_MISSING_REQUIRED_FIELDS']}}
                    </div>
                </div>

                <div class="inner-addon left-addon">
                    <scrm-image image="login_password"></scrm-image>
                    <input [(ngModel)]="passw"
                           type="password"
                           name="password"
                           [class.is-invalid]="password.invalid && password.touched"
                           #password="ngModel"
                           placeholder="{{vm.appStrings['LBL_PASSWORD']}}"
                           aria-label="Password"
                           required>
                    <div *ngIf="password.invalid && password.touched" class="invalid-feedback">
                        {{vm.appStrings['ERR_MISSING_REQUIRED_FIELDS']}}
                    </div>
                </div>


                <button id="login-button" class="login-button"
                        [scrm-button-loading]="loading"
                        (click)="loginForm.control.markAllAsTouched(); loginForm.valid && doLogin()">
                    {{vm.appStrings['LBL_LOGIN_BUTTON_LABEL']}}
                </button>
                <div class="forgotten-password" *ngIf="vm.showForgotPassword">
                    <a href="#" class="forgotten-password-link" (click)="flipCard()">
                        {{vm.appStrings['LBL_LOGIN_FORGOT_PASSWORD']}}
                    </a>
                </div>

            </div>

            <!-- Card back-->
            <div class="fade-card-back col"
                 *ngIf="cardState==='back'"
                 [@fade]>
                <div class="inner-addon left-addon">
                    <scrm-image image="login_user"></scrm-image>
                    <input [(ngModel)]="uname"
                           type="text"
                           name="username"
                           [class.is-invalid]="username.invalid && username.touched"
                           #username="ngModel"
                           placeholder="{{vm.appStrings['LBL_USER_NAME']}}"
                           aria-label="Username"
                           required>
                    <div *ngIf="username.invalid && username.touched" class="invalid-feedback">
                        {{vm.appStrings['ERR_MISSING_REQUIRED_FIELDS']}}
                    </div>
                </div>

                <div class="inner-addon left-addon">
                    <scrm-image image="email"></scrm-image>
                    <input [(ngModel)]="email"
                           type="email"
                           name="email"
                           [class.is-invalid]="mail.invalid && mail.touched"
                           #mail="ngModel"
                           placeholder="{{vm.appStrings['LBL_EMAIL']}}"
                           aria-label="Email"
                           required>
                    <div *ngIf="mail.invalid && mail.touched" class="invalid-feedback">
                        {{vm.appStrings['ERR_MISSING_REQUIRED_FIELDS']}}
                    </div>
                </div>

                <button class="submit-button login-button"
                        scrm-button-loading
                        (click)="loginForm.control.markAllAsTouched(); loginForm.valid && recoverPassword()">
                    {{vm.appStrings['LBL_GENERATE_PASSWORD_BUTTON_TITLE']}}
                </button>
                <div>
                    <a href="#" class="back-link forgotten-password-link" (click)="flipCard()">
                        {{vm.appStrings['LBL_BACK']}}
                    </a>
                </div>
            </div>
        </div>
    </form>

    <!-- End of login form section -->

</div>

<!-- End of login component section -->
