<c8y-title>
  {{ (layout$ | async).pageTitle | translate }}
</c8y-title>

<div class="row">
  <div class="col-md-8 col-xs-12">
    <form class="card card--fullpage" (ngSubmit)="saveProviderConfiguration()">
      <div class="card-header separator">
        <h4 class="card-title">
          {{ (layout$ | async).cardTitle | translate }}
        </h4>
      </div>
      <div class="inner-scroll">
        <div class="card-block">
          <p *ngIf="!!(layout$ | async).description" class="m-b-8">
            {{ (layout$ | async).description | translate }}
          </p>
          <c8y-form-group>
            <label for="providerName">{{ (layout$ | async).providerName | translate }}</label>
            <c8y-typeahead
              [disabled]="!permissions.hasAllRoles((layout$ | async).saveRoles)"
              [ngModel]="selectedProvider$ | async"
              [displayProperty]="'displayName'"
              name="providerName"
              placeholder="{{ (layout$ | async).providerNamePlaceholder | translate }}"
              (onSearch)="providerInput$.next($event)"
              [allowFreeEntries]="false"
              [required]="true"
              [container]="'body'"
            >
              <c8y-li
                *ngFor="let provider of providers$ | async"
                class="p-l-8 p-r-8 c8y-list__item--link"
                (click)="changeProvider$.next(provider); providerInput$.next('')"
                [active]="(selectedProvider$ | async) === provider"
              >
                <c8y-highlight
                  [text]="provider.displayName || '--'"
                  [pattern]="providerInput$ | async"
                ></c8y-highlight>
              </c8y-li>
            </c8y-typeahead>
            <c8y-messages
              ><c8y-message
                name="notExisting"
                [text]="(layout$ | async).providerNameNoMatchesHint | translate"
              ></c8y-message>
            </c8y-messages>
          </c8y-form-group>
          <formly-form
            *ngIf="selectedProvider$ | async"
            [form]="form"
            [fields]="fields"
            [model]="model"
            [options]="options"
          ></formly-form>
        </div>
      </div>
      <div class="card-footer separator" *c8yIfAllowed="allRoles$ | async; allowAny">
        <button
          *c8yIfAllowed="(layout$ | async).deleteRoles"
          class="btn btn-default"
          type="button"
          (click)="deleteProviderConfiguration()"
          [disabled]="
            !(configuration$ | async)?.provider && !(configuration$ | async)?.providerName
          "
          title="{{ (layout$ | async).deleteBtnLabel | translate }}"
        >
          {{ (layout$ | async).deleteBtnLabel | translate }}
        </button>
        <button
          *c8yIfAllowed="(layout$ | async).saveRoles"
          class="btn btn-primary"
          type="submit"
          [disabled]="form.invalid || form.pristine"
          title="{{ (layout$ | async).saveBtnLabel | translate }}"
        >
          {{ (layout$ | async).saveBtnLabel | translate }}
        </button>
      </div>
    </form>
  </div>
</div>