<fieldset class="c8y-fieldset">
  <legend>{{ 'General' | translate }}</legend>
  <div class="d-flex a-i-center gap-8 p-b-8">
    <label class="m-b-0 text-label-small">{{ 'Display as' | translate }}</label>
    <div class="c8y-select-wrapper form-group-sm">
      <select
        class="form-control"
        title="{{ 'Refresh options`options for refreshing a view`' | translate }}"
        [formControl]="displayOptionControl"
      >
        <option [value]="DisplayOption.GRID">
          {{ DisplayOption.GRID | translate }}
        </option>
        <option [value]="DisplayOption.LIST">
          {{ DisplayOption.LIST | translate }}
        </option>
      </select>
    </div>
    <label
      class="c8y-checkbox m-l-auto"
      title="{{ 'Translate labels if possible' | translate }}"
    >
      <input
        type="checkbox"
        [formControl]="translateLinkLabelsControl"
      />
      <span></span>
      <span>{{ 'Translate labels if possible' | translate }}</span>
    </label>
  </div>
</fieldset>

<fieldset class="c8y-fieldset">
  <legend>{{ 'Links' | translate }}</legend>
  <div class="d-flex a-i-center gap-8 p-b-8">
    <button
      class="btn btn-clean btn-sm"
      title="{{ 'Add a quick link' | translate }}"
      type="button"
      (click)="addLinkIsCollapsed = !addLinkIsCollapsed"
    >
      <i [c8yIcon]="'plus-circle'"></i>
      {{ 'Add a quick link' | translate }}
    </button>

    <button
      class="btn btn-clean btn-sm"
      title="{{ 'Reset links' | translate }}"
      [popover]="confirmPopover"
      placement="bottom"
      container="body"
      type="button"
      [adaptivePosition]="false"
      [outsideClick]="true"
      #pop="bs-popover"
    >
      <i [c8yIcon]="'reset'"></i>
      {{ 'Reset links' | translate }}
    </button>
    <ng-template #confirmPopover>
      <p class="m-b-8">
        {{
          'Resetting links removes all custom links and resets the widget to its default state.'
            | translate
        }}
      </p>
      <button
        class="btn btn-default btn-sm"
        (click)="pop.hide()"
      >
        {{ 'Cancel' | translate }}
      </button>
      <button
        class="btn btn-primary btn-sm"
        (click)="resetLinks(); pop.hide()"
      >
        {{ 'Reset links' | translate }}
      </button>
    </ng-template>
  </div>
  <div
    class="collapse bg.component"
    #collapse="bs-collapse"
    [collapse]="addLinkIsCollapsed"
    [isAnimated]="true"
  >
    <fieldset class="c8y-fieldset">
      <legend>{{ 'Add a quick link' | translate }}</legend>
      <c8y-quick-links-widget-config-add-link
        class="d-block p-b-16 p-l-8 p-r-8"
        (onQuickLinkCreated)="addQuickLink($event); addLinkIsCollapsed = true"
        (onCancel)="addLinkIsCollapsed = true"
      ></c8y-quick-links-widget-config-add-link>
    </fieldset>
  </div>

  @if (config().links.length) {
    <c8y-quick-links-widget-config-list
      class="separator-top"
      [quickLinksForm]="quickLinksForm"
      [config]="config()"
      [quickLinksFormArray]="quickLinksFormArray"
      [appsNameChanged]="appsNameChanged"
    ></c8y-quick-links-widget-config-list>
  } @else {
    <c8y-ui-empty-state
      [icon]="DEFAULT_QUICK_LINK_ICON"
      [title]="'No quick links to display' | translate"
      [horizontal]="true"
    >
      <div>
        <button
          class="btn btn-primary m-t-16"
          title="{{ 'Reset links' | translate }}"
          type="button"
          (click)="resetLinks()"
          translate
        >
          Reset links
        </button>
      </div>
    </c8y-ui-empty-state>
  }
</fieldset>

<ng-template #quickLinksPreview>
  <c8y-quick-links-widget-view
    [config]="previewConfig()"
    [isPreview]="true"
  ></c8y-quick-links-widget-view>
</ng-template>