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

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [label]="'Settings' | translate"
    [icon]="'cog'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item *ngIf="(layout$ | async)?.pageTitle !='Connectivity'"
    [label]="'SMS provider' | translate"
    [icon]="'cog'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item *ngIf="(layout$ | async)?.pageTitle =='Connectivity'"
    [label]="'Connectivity' | translate"
    [icon]="'cog'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item *ngIf="(layout$ | async)?.pageTitle =='Connectivity'"
    [icon]="'cog'"
    [label]="'SIM provider settings' | translate"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<div class="row">
  <div class="col-md-8 col-xs-12">
    <form class="card card--fullpage" (ngSubmit)="saveProviderConfiguration()">
      <div class="card-header separator">
        <div class="card-title">
          {{ (layout$ | async)?.cardTitle | translate }}
        </div>
      </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"
                [attr.role]="'menuitem'"
              >
                <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>