<div id="oauth" *ngIf="oauthOptions.initRequest && oauthOptions.visibleOnLoginPage">
  <button
    title="{{ oauthOptions.buttonName | translate }}"
    (click)="redirectToOauth()"
    class="btn btn-block btn-lg form-group"
  >
    <i [c8yIcon]="'sign-in'" class="pull-left"></i>
    {{ oauthOptions.buttonName | translate }}
  </button>
</div>

<form class="loginForm" (ngSubmit)="login()" #loginForm="ngForm" *ngIf="showLoginForm" novalidate>
  <h1>
    <span
      class="legend form-block center"
      *ngIf="!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend"
      translate
    >
      Login
    </span>
  </h1>
  <ng-template #orLegend>
    <div class="legend form-block center" translate>or</div>
  </ng-template>

  <c8y-form-group class="tenantField" id="tenantField" *ngIf="showTenant">
    <label for="tenant" translate>Tenant ID</label>
    <input
      [(ngModel)]="model.tenant"
      #tenant="ngModel"
      type="text"
      name="tenant"
      id="tenant"
      autocapitalize="off"
      autocorrect="off"
      class="form-control"
      placeholder="{{ 'e.g.' | translate }} t12345"
      placeholder-no-required-hint
      [readonly]="loginViewParams.disableTenant"
      required
    />
  </c8y-form-group>
  <c8y-form-group>
    <label for="user" translate>Username</label>
    <input
      [(ngModel)]="model.user"
      #user="ngModel"
      type="text"
      name="user"
      id="user"
      autocapitalize="off"
      autocorrect="off"
      class="form-control"
      placeholder="{{ 'e.g. joe or joe.doe@example.com`LOCALIZE`' | translate }}"
      placeholder-no-required-hint
      required
    />
  </c8y-form-group>
  <c8y-form-group>
    <label for="password" translate>Password</label>
    <input
      [(ngModel)]="model.password"
      #password="ngModel"
      type="password"
      name="password"
      id="password"
      class="form-control"
      placeholder-no-required-hint
      required
    />
  </c8y-form-group>
  <div class="form-group" *ngIf="showBasicAuth">
    <label title="{{ 'Remember me' | translate }}" class="c8y-checkbox">
      <input type="checkbox" name="remember" [(ngModel)]="loginService.rememberMe" />
      <span></span>
      <span>{{ 'Remember me' | translate }}</span>
    </label>
  </div>
  <button
    title="{{ 'Log in' | translate }}"
    [disabled]="!loginForm.form.valid || isLoading"
    type="submit"
    class="btn btn-primary btn-lg btn-block form-group"
  >
    {{ 'Log in' | translate }}
  </button>
  <div class="text-center m-t-8">
    <button
      title="{{ 'Forgot password?' | translate }}"
      class="btn btn-link btn-sm"
      (click)="onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })"
    >
      {{ 'Forgot password?' | translate }}
    </button>
  </div>
  <div class="text-center m-t-8" *ngIf="!!(ui.state$ | async).loginExtraLink">
    <a
      role="button"
      title="{{ (ui.state$ | async).loginExtraLink.label }}"
      [href]="(ui.state$ | async).loginExtraLink.url"
      class="btn btn-link btn-sm"
    >
      {{ (ui.state$ | async).loginExtraLink.label }}
    </a>
  </div>
</form>