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

<form class="loginForm" #loginForm="ngForm" *ngIf="showLoginForm" (ngSubmit)="login()" novalidate>
  <span
    class="legend form-block center"
    *ngIf="!(oauthOptions.initRequest && oauthOptions.visibleOnLoginPage); else orLegend"
    translate
  >
    Login
  </span>
  <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
      class="form-control"
      id="tenant"
      #tenant="ngModel"
      [(ngModel)]="model.tenant"
      [readonly]="loginViewParams.disableTenant"
      type="text"
      name="tenant"
      autocapitalize="off"
      autocorrect="off"
      placeholder="{{ 'e.g.' | translate }} t12345"
      placeholder-no-required-hint
      required
    />
  </c8y-form-group>
  <c8y-form-group>
    <label for="user" translate>Username</label>
    <input
      class="form-control"
      id="user"
      #user="ngModel"
      [(ngModel)]="model.user"
      type="text"
      name="user"
      autocapitalize="off"
      autocorrect="off"
      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
      class="form-control"
      id="password"
      #password="ngModel"
      [(ngModel)]="model.password"
      type="password"
      name="password"
      placeholder-no-required-hint
      required
    />
  </c8y-form-group>
  <div class="form-group" *ngIf="showBasicAuth">
    <label class="c8y-checkbox" title="{{ 'Remember me' | translate }}">
      <input [(ngModel)]="loginService.rememberMe" type="checkbox" name="remember" />
      <span></span>
      <span>{{ 'Remember me' | translate }}</span>
    </label>
  </div>
  <button
    class="btn btn-primary btn-lg btn-block form-group"
    [disabled]="!loginForm.form.valid || isLoading"
    title="{{ 'Log in' | translate }}"
    type="submit"
  >
    {{ 'Log in' | translate }}
  </button>
  <div class="text-center m-t-8">
    <button
      class="btn btn-link btn-sm"
      (click)="onChangeView.emit({ view: LOGIN_VIEWS.RecoverPassword })"
      type="button"
      title="{{ 'Forgot password?' | translate }}"
    >
      {{ 'Forgot password?' | translate }}
    </button>
  </div>
  <div class="text-center m-t-8" *ngIf="!!(ui.state$ | async).loginExtraLink">
    <a
      class="small"
      [href]="(ui.state$ | async).loginExtraLink.url"
      title="{{ (ui.state$ | async).loginExtraLink.label }}"
    >
      {{ (ui.state$ | async).loginExtraLink.label }}
    </a>
  </div>
</form>