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

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