<div class="container-fluid">
  <form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        <p class="text-center fw-bold">{{ "welcome" | i18n }}</p>
        <p class="text-center">{{ "logInDesc" | i18n }}</p>
        <div class="card">
          <h5 class="card-header">{{ "logIn" | i18n }}</h5>
          <div class="card-body">
            <div class="mb-3">
              <label for="client_id" class="form-label">{{ "clientId" | i18n }}</label>
              <input id="client_id" name="ClientId" [(ngModel)]="clientId" class="form-control" />
            </div>
            <div class="mb-3">
              <label for="client_secret" class="form-label">{{ "clientSecret" | i18n }}</label>
              <div class="input-group">
                <input
                  type="{{ showSecret ? 'text' : 'password' }}"
                  id="client_secret"
                  name="ClientSecret"
                  [(ngModel)]="clientSecret"
                  class="form-control"
                />
                <button
                  type="button"
                  class="btn btn-outline-secondary"
                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                  (click)="toggleSecret()"
                >
                  <i class="bwi" [ngClass]="showSecret ? 'bwi-eye-slash' : 'bwi-eye'"></i>
                </button>
              </div>
            </div>
            <div class="d-flex">
              <div>
                <button type="submit" class="btn btn-primary" [disabled]="form.loading">
                  <i class="bwi bwi-spinner bwi-fw bwi-spin" [hidden]="!form.loading"></i>
                  <i class="bwi bwi-sign-in bwi-fw" [hidden]="form.loading"></i>
                  {{ "logIn" | i18n }}
                </button>
              </div>
              <button type="button" class="btn btn-link ms-auto" (click)="settings()">
                {{ "settings" | i18n }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
<ng-template #environment></ng-template>
