<ucap-authentication-login-local
  [companyList]="companyList"
  [fixedCompanyCode]="fixedCompanyCode"
  [companyCode]="userStore?.companyCode"
  [loginId]="userStore?.loginId"
  [disable]="disableLoginForm"
  [processing]="loginProcessing"
  [loginTry]="loginTry"
  (login)="onLogin($event)"
>
  <div ucapAuthenticationLogin="header">
    <div class="logo-img">
      <img src="../../../assets/images/logo_140.png" alt="" />
    </div>
    <h1>Welcome to Messenger</h1>
  </div>

  <div ucapAuthenticationLogin="footer">
    <div class="login-chk-area">
      <div>
        <mat-checkbox
          #chkUseRememberMe
          *ngIf="useRememberMe"
          aria-label="Remember Me"
          [checked]="!!userStore && userStore.rememberMe"
        >
          {{ 'login.labels.rememberMe' | ucapI18n }}
        </mat-checkbox>
      </div>

      <div>
        <mat-checkbox
          #chkUseAutoLogin
          *ngIf="useAutoLogin"
          aria-label="Auto Login"
          [checked]="
            !!userStore &&
            !!userStore.settings &&
            !!userStore.settings.general &&
            userStore.settings.general.autoLogin
          "
        >
          {{ 'login.labels.autoLogin' | ucapI18n }}
        </mat-checkbox>
      </div>
    </div>
    <div class="login-pass-info">
      <ul>
        <li>
          <a href="">{{ 'login.labels.forgotPassword' | ucapI18n }}</a>
        </li>
        <li>
          <a href="" class="fir-pass">{{
            'login.labels.resetPassword' | ucapI18n
          }}</a>
        </li>
      </ul>
    </div>
    <div class="login-button-area">
      <button type="button">{{ 'login.labels.NotesOnUse' | ucapI18n }}</button>
    </div>
  </div>
</ucap-authentication-login-local>
