<c8y-title>{{ 'Authentication' | translate }}</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'cog'"
    [label]="'Settings' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'cog'"
    [label]="'Authentication' | translate"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    title="{{ 'Reload' | translate }}"
    (click)="loadAuthConfig()"
  >
    <i
      c8yIcon="refresh"
      [ngClass]="{ 'icon-spin': reloading$ | async }"
    ></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-help src="/docs/authentication/basic-settings/#basic-settings"></c8y-help>

<form
  class="card card--fullpage"
  #authConfigurationForm="ngForm"
  novalidate
>
  <div class="card-header separator">
    <div class="card-title">
      {{ 'Authentication' | translate }}
    </div>
  </div>
  <div
    class="inner-scroll"
    *ngIf="authConfiguration"
  >
    <c8y-login-settings [authConfiguration]="authConfiguration"></c8y-login-settings>
    <c8y-basic-auth-settings [authConfiguration]="authConfiguration"></c8y-basic-auth-settings>
    <c8y-session-configuration [authConfiguration]="authConfiguration"></c8y-session-configuration>
    <c8y-auth-tfa [authConfiguration]="authConfiguration"></c8y-auth-tfa>
  </div>
  <div class="card-footer separator">
    <button
      class="btn btn-primary"
      title="{{ 'Save' | translate }}"
      type="submit"
      (click)="save()"
      [disabled]="!authConfigurationForm.form.valid || authConfigurationForm.form.pristine"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</form>