<div class="login-form">
  <div
    class="mat-title"
    style="background-image: url(./assets/images/logo/bg_login_w160.png);"
  >
    {{ 'accounts.instructionsOfLogin' | translate }}
  </div>

  <form name="loginForm" [formGroup]="loginForm" novalidate>
    <mat-form-field [style.display]="!!curCompanyCode ? 'none' : 'block'">
      <mat-label>{{ 'accounts.fieldCompany' | translate }}</mat-label>
      <mat-select formControlName="companyCode" required>
        <mat-option
          *ngFor="let company of companyList"
          [value]="company.companyCode"
          >{{ company.companyName }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="loginForm.get('companyCode').hasError('required')">
        {{ 'accounts.errors.requireCompany' | translate }}
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-label>{{ 'accounts.fieldLoginId' | translate }}</mat-label>
      <input matInput formControlName="loginId" />
      <mat-error *ngIf="loginForm.get('loginId').hasError('required')">
        {{ 'accounts.errors.requireLoginId' | translate }}
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-label>{{ 'accounts.fieldLoginPw' | translate }}</mat-label>
      <input matInput type="password" formControlName="loginPw" #loginPw />
      <mat-error>
        {{ 'accounts.errors.requireLoginPw' | translate }}
      </mat-error>
    </mat-form-field>

    <button
      mat-raised-button
      class="submit-button bg-accent-dark"
      aria-label="LOG IN"
      [disabled]="loginForm.invalid || !loginBtnEnable"
      (click)="onClickLogin()"
    >
      {{ loginBtnText }}
    </button>

    <div
      class="remember-forgot-password"
      fxLayout="row"
      fxLayout.xs="column"
      fxLayoutAlign="space-between center"
    >
      <mat-checkbox
        *ngIf="useRememberMe"
        class="remember-me"
        formControlName="rememberMe"
        aria-label="Remember Me"
      >
        {{ 'accounts.rememberMe' | translate }}
      </mat-checkbox>

      <mat-checkbox
        *ngIf="useAutoLogin"
        class="auto-login"
        formControlName="autoLogin"
        aria-label="Auto Login"
      >
        {{ 'accounts.autoLogin' | translate }}
      </mat-checkbox>
    </div>
  </form>

  <div class="register" fxLayout="column" fxLayoutAlign="center center">
    <div *ngIf="false">
      <span class="text">Don't have an account?</span>
      <a class="link">Forgot Password?</a>
      <a class="link">Create an account</a>
    </div>
  </div>

  <div class="policy bg-accent-light">
    <a class="link" (click)="onClickNoti()">{{
      !!notiText ? notiText : '개인정보 처리방침'
    }}</a>
  </div>
</div>
