@if (form) {
  @let SHOW_TIME_CONTEXT = settings.showTimeContext;
  @let SHOW_AUTO_REFRESH = settings.showAutoRefresh;

  <form [formGroup]="form">
    <div class="content-flex-82">
      <div class="col-5">
        @if (SHOW_TIME_CONTEXT) {
          <fieldset class="c8y-fieldset">
            <legend>
              <div class="standalone btn-icon-dot__item time-context m-r-4">
                <i [c8yIcon]="'calendar'"></i>
              </div>
              {{ 'Date & time' | translate }}
              <button
                class="btn-help btn-help--sm"
                [attr.aria-label]="'Help' | translate"
                [popover]="TIME_RANGE_PICKER_POPOVER | translate"
                placement="top"
                triggers="focus"
                container="body"
                type="button"
                [adaptivePosition]="true"
              ></button>
            </legend>
            <c8y-form-group class="m-b-4 p-t-16 p-b-16">
              <c8y-date-time-context-picker
                formControlName="dateTimeContext"
                [config]="{ showDateTo: false, showDateFrom: true }"
                [intervalOptions]="intervalOptions"
              ></c8y-date-time-context-picker>
            </c8y-form-group>
          </fieldset>
        }
      </div>
      <div class="col-3">
        @if (SHOW_AUTO_REFRESH) {
          <fieldset class="c8y-fieldset">
            <legend class="d-flex">
              <div class="standalone btn-icon-dot__item auto-refresh m-r-4">
                <i [c8yIcon]="'refresh'"></i>
              </div>
              {{ 'Auto refresh' | translate }}
              <button
                class="btn-help btn-help--sm"
                [attr.aria-label]="'Help' | translate"
                [popover]="REFRESH_POPOVER_MESSAGE | translate"
                placement="top"
                triggers="focus"
                container="body"
                type="button"
                [adaptivePosition]="true"
              ></button>
            </legend>
            <c8y-form-group class="m-b-8 form-group-sm p-t-16 p-b-16">
              <div class="d-flex gap-8 a-i-center">
                <label class="c8y-switch c8y-switch--inline">
                  <input
                    type="checkbox"
                    #arInput
                    formControlName="isAutoRefreshEnabled"
                  />
                  <span></span>
                  <span>
                    {{ 'Auto refresh enabled' | translate }}
                  </span>
                </label>
              </div>
            </c8y-form-group>
          </fieldset>
        }
      </div>
    </div>
  </form>
}