<form [formGroup]="formGroup">
  <fieldset class="c8y-fieldset">
    <legend>{{ 'Date' | translate }}</legend>
    <div class="row tight-grid">
      <c8y-form-group class="m-b-16 form-group-sm">
        <div class="d-flex gap-8 a-i-center">
          <div class="c8y-select-wrapper">
            <select
              class="form-control"
              title="{{ 'Refresh options`options for refreshing a view`' | translate }}"
              [(ngModel)]="refreshOption"
              [ngModelOptions]="{ standalone: true }"
              (change)="updateRefreshOption()"
            >
              <option
                [title]="'Refreshing after the given interval' | translate"
                value="interval"
              >
                {{ 'Use refresh interval' | translate }}
              </option>
              <option
                [title]="'Refreshing after the given interval, synchronized globally' | translate"
                value="global-interval"
              >
                {{ 'Use global refresh interval' | translate }}
              </option>
            </select>
          </div>
          @if (formGroup?.controls?.refreshOption?.value !== GLOBAL_INTERVAL_OPTION) {
            <div
              class="c8y-select-wrapper grow flex-no-shrink"
              title=" {{ 'Interval' | translate }}"
            >
              <select
                class="form-control text-12"
                [title]="'Refresh interval in seconds' | translate"
                id="refreshInterval"
                formControlName="refreshInterval"
                data-cy="c8y-asset-table-widget-config--refresh-interval-selector"
              >
                @for (refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS; track refreshInterval) {
                  <option [value]="refreshInterval">
                    {{ '{{ seconds }}s' | translate: { seconds: refreshInterval / 1000 } }}
                  </option>
                }
              </select>
            </div>
          }
        </div>
      </c8y-form-group>
    </div>
  </fieldset>
  <fieldset class="c8y-fieldset">
    <legend>{{ 'Display options' | translate }}</legend>
    <div formGroupName="displayOptions">
      <!-- Data options -->
      <fieldset class="c8y-fieldset">
        <legend>{{ 'Data' | translate }}</legend>
        <c8y-form-group
          class="m-b-8 form-group-sm d-flex-md flex-wrap gap-16"
          [formGroup]="formGroup"
        >
          <!-- hierarchical data -->
          <label
            class="c8y-checkbox"
            [title]="'Show assets and all descendants' | translate"
            data-cy="c8y-asset-table-widget-config--include-descendants"
          >
            <input
              name="includeDescendants"
              type="checkbox"
              formControlName="includeDescendants"
            />
            <span></span>
            <span translate>Include descendants</span>
            <button
              class="btn-help m-l-8"
              [attr.aria-label]="includeDescendantsTooltip | translate"
              [popover]="includeDescendantsTooltip | translate"
              placement="top"
              triggers="focus"
              container="body"
              type="button"
              (click)="$event.stopPropagation()"
            ></button>
          </label>
          <!-- Status icon -->
          <label
            class="c8y-checkbox m-t-0"
            [title]="'Show status icon column' | translate"
            data-cy="c8y-asset-table-widget-config--show-status-icon"
          >
            <input
              name="showStatusIcon"
              type="checkbox"
              formControlName="showStatusIcon"
            />
            <span></span>
            <span translate>Show status icon column</span>
          </label>
        </c8y-form-group>
      </fieldset>
      <!-- Header options -->
      <fieldset class="c8y-fieldset">
        <legend>{{ 'Header' | translate }}</legend>
        <c8y-form-group class="m-b-8 form-group-sm d-flex-md flex-wrap gap-16">
          <!-- grid header -->
          <label
            class="c8y-checkbox"
            [title]="'Display the data grid header' | translate"
          >
            <input
              name="gridHeader"
              type="checkbox"
              formControlName="gridHeader"
            />
            <span></span>
            <span translate>Table header</span>
          </label>
          <!-- show filter label -->
          <label
            class="c8y-checkbox m-t-0"
            [title]="'Display applied filters in the header' | translate"
          >
            <input
              name="filter"
              type="checkbox"
              formControlName="filter"
            />
            <span></span>
            <span translate>Active filters</span>
          </label>
          <!-- enable configurable columns -->
          <label
            class="c8y-checkbox m-t-0"
            [title]="'Display columns configuration button' | translate"
          >
            <input
              name="configurableColumnsEnabled"
              type="checkbox"
              formControlName="configurableColumnsEnabled"
            />
            <span></span>
            <span translate>Configure columns</span>
          </label>
          <!-- footer -->
          <label
            class="c8y-checkbox m-t-0"
            [title]="'Display the table footer' | translate"
          >
            <input
              name="footer"
              type="checkbox"
              formControlName="footer"
            />
            <span></span>
            <span translate>Table footer</span>
          </label>
        </c8y-form-group>
      </fieldset>

      <!-- Row options -->
      <fieldset class="c8y-fieldset">
        <legend>{{ 'Row' | translate }}</legend>
        <c8y-form-group class="m-b-8 d-flex-md gap-16 flex-wrap form-group-sm">
          <!-- zebra stripes -->
          <label
            class="c8y-checkbox"
            [title]="'Alternate row background for readability' | translate"
          >
            <input
              name="striped"
              type="checkbox"
              formControlName="striped"
            />
            <span></span>
            <span translate>Striped rows</span>
          </label>
          <!-- hover effect -->
          <label
            class="c8y-checkbox m-t-0"
            [title]="'Change row background color on hover' | translate"
          >
            <input
              name="hover"
              type="checkbox"
              formControlName="hover"
            />
            <span></span>
            <span translate>Hover highlight</span>
          </label>
          <!-- show loading indicator -->
          <label
            class="c8y-checkbox m-t-0"
            [title]="'Show a spinner while data loads' | translate"
          >
            <input
              name="showLoadingIndicator"
              type="checkbox"
              formControlName="showLoadingIndicator"
            />
            <span></span>
            <span translate>Loading indicator</span>
          </label>
        </c8y-form-group>
      </fieldset>

      <!-- Cell options -->
      <fieldset class="c8y-fieldset">
        <legend>{{ 'Cell' | translate }}</legend>
        <div class="d-flex-md gap-16 flex-wrap m-b-8">
          <!-- cell borders (inside displayOptions) -->
          <c8y-form-group class="m-b-0 form-group-sm">
            <label
              class="c8y-checkbox"
              [title]="'Draw borders around table cells' | translate"
            >
              <input
                name="bordered"
                type="checkbox"
                formControlName="bordered"
              />
              <span></span>
              <span translate>Cell borders</span>
            </label>
          </c8y-form-group>
          <!-- Cell content options (outside displayOptions formGroup, at root form level) -->
          <c8y-form-group
            class="m-b-0 form-group-sm d-flex-md flex-wrap gap-16"
            [formGroup]="formGroup"
          >
            <!-- show icon and value -->
            <label
              class="c8y-checkbox"
              [title]="'When cell rendering is set to icon, show both icon and value' | translate"
              data-cy="c8y-asset-table-widget-config--show-icon-and-value"
            >
              <input
                name="showIconAndValue"
                type="checkbox"
                formControlName="showIconAndValue"
              />
              <span></span>
              <span translate>Icon with value</span>
            </label>
            <!-- show as link -->
            <label
              class="c8y-checkbox m-t-0"
              [title]="
                'Render the first column (excluding computed and alarm types) as a link to the asset details.'
                  | translate
              "
              data-cy="c8y-asset-table-widget-config--show-as-link"
            >
              <input
                name="showAsLink"
                type="checkbox"
                formControlName="showAsLink"
              />
              <span></span>
              <span translate>First column link</span>
            </label>
          </c8y-form-group>
        </div>
      </fieldset>
    </div>
  </fieldset>
</form>

<ng-template #assetTablePreview>
  @if (
    !formGroup ||
    columns?.length === 0 ||
    ((config.selectedProperties?.length === 0 || config.selectedProperties === null) &&
      (config.operationColumns?.length === 0 || config.operationColumns === null))
  ) {
    <c8y-ui-empty-state
      class="d-block m-t-24"
      [icon]="'search'"
      [title]="'No data to display' | translate"
      [subtitle]="'Start by selecting the properties' | translate"
    ></c8y-ui-empty-state>
  } @else {
    @if (!formGroup.controls.widgetInstanceGlobalTimeContext.value) {
      <c8y-asset-table-auto-refresh
        class="d-contents"
        [isIntervalRefresh]="!!formGroup.controls.refreshInterval.value"
        [refreshInterval]="formGroup.controls.refreshInterval.value"
        [config]="formGroup.value"
        [isRefreshDisabled]="false"
        [isLoading]="isLoading$"
        (onCountdownEnded)="updateSelectedAssets()"
      ></c8y-asset-table-auto-refresh>
    }
    <c8y-data-grid
      class="content-fullpage d-flex d-col border-top border-bottom"
      [title]="title"
      [displayOptions]="formGroup.controls.displayOptions.value"
      [columns]="columns"
      [serverSideDataCallback]="serverSideDataCallback"
      [configureColumnsEnabled]="formGroup.get('displayOptions.configurableColumnsEnabled')?.value"
      [refresh]="refresh"
      (onSort)="onGridSort($event)"
    >
      <c8y-ui-empty-state
        [icon]="'search'"
        [title]="'No results to display.' | translate"
        [subtitle]="'Refine your search terms or check your spelling.' | translate"
        [horizontal]="true"
      ></c8y-ui-empty-state>
    </c8y-data-grid>
  }
</ng-template>