<div class="login-box">
  <ng-content select="[ucapAuthenticationLogin='header']"></ng-content>

  <div class="login-content">
    <form name="loginForm" [formGroup]="loginForm" novalidate>
      <mat-form-field
        [style.display]="!!fixedCompanyCode ? 'none' : 'block'"
        class="login-company"
        appearance="none"
      >
        <mat-select
          [formControl]="companyCodeFormControl"
          [value]="companyCode || fixedCompanyCode"
          class="login-input-area login-select-form"
        >
          <mat-option
            *ngFor="let company of companyList"
            [value]="company.companyCode"
            >{{ company.companyName }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <div class="login-input-area idpass-type">
        <mat-form-field
          class="login-idpass-txt"
          appearance="none"
          floatLabel=""
        >
          <!-- <mat-label>{{ 'login.fields.loginId' | ucapI18n }}</mat-label> -->
          <input
            matInput
            [formControl]="loginIdFormControl"
            placeholder="{{ 'login.fields.loginId' | ucapI18n }}"
          />
        </mat-form-field>
      </div>

      <div class="login-input-area idpass-type pass-type">
        <mat-form-field class="login-idpass-txt" appearance="none">
          <!-- <mat-label>{{ 'login.fields.loginPw' | ucapI18n }}</mat-label> -->
          <input
            matInput
            type="password"
            [formControl]="loginPwFormControl"
            placeholder="{{ 'login.fields.loginPw' | ucapI18n }}"
            #loginPw
          />
        </mat-form-field>
      </div>

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

      <button
        mat-raised-button
        class="login-input-submit"
        aria-label="LOG IN"
        [disabled]="
          loginForm.invalid ||
          disable ||
          (!!loginTry && !!loginTry.remainTimeForNextTry)
        "
        (click)="onClickLogin()"
      >
        <ng-container
          *ngIf="!processing && (!loginTry || !loginTry.remainTimeForNextTry)"
        >
          {{ 'login.labels.doLogin' | ucapI18n }}
        </ng-container>

        <ng-container *ngIf="!!loginTry && !!loginTry.remainTimeForNextTry">
          {{ 'login.errors.attemptsExceeded' | ucapI18n }}
          (
          {{
            moment
              .utc(
                moment
                  .duration(loginTry.remainTimeForNextTry, 'seconds')
                  .asMilliseconds()
              )
              .format('mm:ss')
          }}
          )
        </ng-container>

        <mat-spinner
          *ngIf="processing && (!loginTry || !loginTry.remainTimeForNextTry)"
        >
        </mat-spinner>
      </button>
    </form>

    <ng-content select="[ucapAuthenticationLogin='footer']"></ng-content>
  </div>
</div>
