<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'"
      class="login-company"
    >
      <mat-label>{{ 'accounts.fieldCompany' | translate }}</mat-label>
      <mat-select [formControl]="companyCodeFormControl">
        <mat-option
          *ngFor="let company of companyList"
          [value]="company.companyCode"
          >{{ company.companyName }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field class="login-id">
      <mat-label>{{ 'accounts.fieldLoginId' | translate }}</mat-label>
      <input matInput [formControl]="loginIdFormControl" />
    </mat-form-field>

    <mat-form-field class="login-pw">
      <mat-label>{{ 'accounts.fieldLoginPw' | translate }}</mat-label>
      <input
        matInput
        type="password"
        [formControl]="loginPwFormControl"
        #loginPw
      />
    </mat-form-field>

    <div class="error-container">
      <mat-error
        *ngIf="
          companyCodeFormControl.dirty &&
          companyCodeFormControl.hasError('required')
        "
      >
        {{ 'accounts.errors.requireCompany' | translate }}
      </mat-error>
      <mat-error
        *ngIf="
          loginIdFormControl.dirty && loginIdFormControl.hasError('required')
        "
      >
        {{ 'accounts.errors.requireLoginId' | translate }}
      </mat-error>
      <mat-error
        *ngIf="
          loginPwFormControl.dirty && loginPwFormControl.hasError('required')
        "
      >
        {{ 'accounts.errors.requireLoginPw' | translate }}
      </mat-error>
    </div>

    <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>
