<app-logingovpl-notification
  [styleClass]="'mt-30'"
  [hideAfter]="30000"
  [contrastMode]="highContrastMode"></app-logingovpl-notification>

<ng-container *ngIf="!isEmailLoginChoose">
  <div class="container vertical-spacing">
    <div class="row">
      <div class="col-12 col-lg-10 offset-lg-1 col-xl-10 offset-xl-1">
        <h1 class="heading heading--md heading--separator">{{ 'Login.ChooseMethod' | translate }}</h1>
        <div class="login-start-container">
          <div [ngClass]="['login-start-tile', highContrastMode]">
            <div class="login-start-image login-start-image__wk">
              <svg class="icon icon-login" aria-hidden="true" role="img">
                <ng-container *ngIf="highContrastMode === 'normal'; else contrastTheme">
                  <use href="/assets/icomoon/SVG/logo-login.svg#logo_login"></use>
                </ng-container>
                <ng-template #contrastTheme>
                  <use href="/assets/icomoon/SVG/logo-login-black.svg#logo_login"></use>
                </ng-template>
              </svg>
            </div>
            <div [ngClass]="['login-start-header', highContrastMode]">{{ 'Login.LoginGovPl.Header' | translate }}</div>
            <div class="login-start-text">{{ 'Login.LoginGovPl.Desc' | translate }}</div>
            <hr [ngClass]="[highContrastMode]" />
            <a class="btn btn-primary login-start-button login-start-button__wk" (click)="loginViaWk()">{{
              'Login.Choose' | translate
            }}</a>
          </div>

          <div [ngClass]="['login-start-tile', highContrastMode]">
            <div class="login-start-image login-start-image__form">
              <svg class="icon icon-form" aria-hidden="true" role="img">
                <use href="/assets/icomoon/SVG/form_icon.svg#form_icon"></use>
              </svg>
            </div>
            <div [ngClass]="['login-start-header', highContrastMode]">{{ 'Login.Email.Header' | translate }}</div>
            <div class="login-start-text">{{ 'Login.Email.Desc' | translate }}</div>
            <hr [ngClass]="[highContrastMode]" />
            <a
              class="btn btn-outline-primary login-start-button login-start-button__form"
              id="email-button"
              (click)="chooseEmailLogin()"
              >{{ 'Login.Choose' | translate }}</a
            >
          </div>
        </div>
        <div>
          {{ 'Login.NoAccount' | translate
          }}<a [routerLink]="['/', '!user', '!register'] | localize">
            {{ 'Login.Register' | translate }}
          </a>
        </div>
      </div>
    </div>
  </div>
</ng-container>
<ng-container *ngIf="isEmailLoginChoose">
  <section>
    <div class="container vertical-spacing">
      <div class="row">
        <div class="btn prev-btn login-start-back" (click)="returnToLoginMethod()">
          &lsaquo; {{ 'Login.BackToLogin' | translate }}
        </div>
      </div>
      <div class="row">
        <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
          <form class="auth-form" (ngSubmit)="onSubmit(f)" #f="ngForm">
            <h1 class="heading heading--md heading--separator">
              {{ 'User.Login' | translate }}
            </h1>

            <!-- api notifications  -->
            <app-notifications aria-live="assertive"></app-notifications>
            <app-notifications-front></app-notifications-front>

            <!-- EMAIL -->
            <div class="form-group" [ngClass]="{ 'form-group-invalid': !email.valid && email.touched }">
              <label for="email">
                E-mail <small>({{ 'Validation.RequiredField' | translate | lowercase }})</small>
              </label>
              <input
                type="email"
                class="form-control"
                id="email"
                placeholder="{{ 'Action.Enter' | translate }} {{ 'User.Email' | translate | lowercase }}"
                ngModel
                name="email"
                required
                email
                #email="ngModel"
                [attr.aria-invalid]="!email.valid && email.touched" />

              <!-- email field validation error -->
              <small
                class="form-text"
                [ngClass]="'text-err'"
                role="alert"
                id="email_error"
                aria-live="polite"
                *ngIf="!email.valid && email.touched"
                @toggleVertically>
                {{ 'Validation.RequiredEmail' | translate }}
              </small>
            </div>

            <!-- PASSWORD -->
            <div class="form-group" [ngClass]="{ 'form-group-invalid': !password.valid && password.touched }">
              <label for="password">
                {{ 'User.Password' | translate }}
                <small>({{ 'Validation.RequiredField' | translate | lowercase }})</small>
              </label>
              <input
                type="password"
                class="form-control"
                id="password"
                placeholder="{{ 'Action.Enter' | translate }} {{ 'User.Password' | translate | lowercase }}"
                ngModel
                name="password"
                required
                #password="ngModel"
                [attr.aria-invalid]="!password.valid && password.touched" />

              <!-- password field validation error -->
              <small
                class="form-text"
                [ngClass]="'text-err'"
                role="alert"
                id="password_error"
                aria-live="polite"
                *ngIf="!password.valid && password.touched"
                @toggleVertically>
                "{{ 'User.Password' | translate }}"
                {{ 'Validation.IsRequired' | translate }}
              </small>
            </div>

            <!-- REMEMBER ME & SUBMIT -->
            <div class="form-check clearfix">
              <input
                type="checkbox"
                class="form-check-input"
                id="rememberCheck"
                ngModel
                name="rememberCheck"
                #rememberCheck="ngModel"
                [checked]="f.value.rememberCheck || false"
                [attr.aria-checked]="f.value.rememberCheck || false" />

              <label class="form-check-label" for="rememberCheck">
                {{ 'Action.RememberMe' | translate | uppercase }}
              </label>

              <!-- fake button to indicate 'disabled' state -->
              <button
                type="button"
                class="btn btn-secondary disabled"
                *ngIf="!f.valid"
                [attr.aria-label]="
                  'Validation.InvalidEmailOrPassword' | translate: { param: 'Action.Login' | translate }
                "
                [attr.aria-disabled]="true">
                {{ 'Action.Login' | translate | uppercase }}
              </button>

              <!-- submit form -->
              <button type="submit" class="btn btn-primary" id="submit-button" *ngIf="f.valid">
                {{ 'Action.Login' | translate | uppercase }}
              </button>
            </div>

            <!-- FORGOTTEN PASSWORD -->
            <p class="forgotten">
              <a [routerLink]="['/!user', '!lost-password'] | localize">
                {{ 'User.ForgottenPassword' | translate }} &raquo;
              </a>
            </p>

            <p>
              {{ 'User.Unregistered' | translate }}
              <a [routerLink]="['/!user', '!register'] | localize">
                {{ 'Action.Register' | translate }}
              </a>
            </p>
          </form>
        </div>
      </div>
    </div>
  </section>
</ng-container>
