<div class="no-card-context d-flex-md fit-h--md">
  <div class="col-md-5 bg-level-1 conf-col inner-scroll p-l-0">
    <div class="p-l-24">
      <form [formGroup]="formGroup">
        <c8y-datapoint-selection-list
          class="bg-level-1 separator-bottom d-block"
          name="datapoints"
          [minActiveCount]="1"
          [defaultFormOptions]="datapointSelectDefaultFormOptions"
          [config]="datapointSelectionConfig"
          formControlName="datapoints"
        ></c8y-datapoint-selection-list>

        <c8y-alarm-event-selection-list
          class="bg-level-1 separator-bottom d-block"
          name="alarms"
          formControlName="alarms"
          [timelineType]="'ALARM'"
          [datapoints]="config?.datapoints"
        ></c8y-alarm-event-selection-list>

        <c8y-alarm-event-selection-list
          class="bg-inherit"
          name="events"
          formControlName="events"
          [timelineType]="'EVENT'"
          [datapoints]="config?.datapoints"
        ></c8y-alarm-event-selection-list>
      </form>
    </div>
  </div>

  <div class="col-md-7 sticky-top p-t-8 inner-scroll widget-preview">
    <div class="p-r-24 d-col fit-h">
      <div class="form-group p-t-8 form-group-sm d-flex a-i-center m-b-8">
        <div class="d-flex a-i-center m-r-4">
          <label
            class="m-b-0"
            translate
          >
            Date selection
          </label>
          <button
            class="btn-help btn-help--sm"
            [attr.aria-label]="'Help' | translate"
            [popover]="dateSelectionHelpTemplate"
            placement="bottom"
            triggers="focus"
            container="body"
            [adaptivePosition]="false"
          ></button>
        </div>
        <div class="c8y-select-wrapper">
          <select
            class="form-control input-sm"
            [ngModel]="dateSelection"
            (ngModelChange)="dateSelectionChange($event)"
            [ngModelOptions]="{ standalone: true }"
          >
            <option
              title="{{ 'Dashboard time range' | translate }}"
              [value]="DATE_SELECTION.DASHBOARD_CONTEXT"
            >
              {{ 'Dashboard time range' | translate }}
            </option>
            <option
              title="{{ 'Widget configuration' | translate }}"
              [value]="DATE_SELECTION.CONFIG"
            >
              {{ 'Widget configuration' | translate }}
            </option>
          </select>
          <span></span>
        </div>
      </div>
      <label class="text-12">{{ 'Options' | translate }}</label>
      <c8y-time-context
        *ngIf="
          dateSelection === DATE_SELECTION.CONFIG &&
          formGroup.get('displayDateSelection').value === true
        "
        [changedDateContext]="timeProps"
        [controlsAvailable]="{
          realtime: true,
          timeRange: config?.displayDateSelection,
          interval: config?.displayDateSelection,
          aggregation: config?.displayAggregationSelection
        }"
        (contextChange)="timePropsChanged($event)"
      ></c8y-time-context>
      <c8y-charts
        class="d-block p-relative"
        *ngIf="activeDatapointsExists"
        [config]="config"
        [alerts]="alerts"
        (timeRangeChangeOnRealtime)="updateTimeRangeOnRealtime($event)"
        (configChangeOnZoomOut)="updateDashboardTimeContext($event)"
      ></c8y-charts>

      <c8y-ui-empty-state
        class="d-block m-t-24"
        [icon]="'search'"
        [title]="'No data points selected' | translate"
        [subtitle]="'Select data point to render chart' | translate"
        *ngIf="!activeDatapointsExists"
      ></c8y-ui-empty-state>

      <form
        class="d-block p-t-8"
        [formGroup]="formGroup"
      >
        <label>{{ 'Display options' | translate }}</label>
        <fieldset class="c8y-fieldset m-b-24 m-t-0">
          <legend>{{ 'Axis' | translate }}</legend>
          <c8y-form-group class="p-b-16 m-b-0 p-t-8 form-group-sm">
            <label
              class="c8y-checkbox"
              [title]="'Y axis helper lines' | translate"
            >
              <input
                name="yAxisSplitLines"
                type="checkbox"
                formControlName="yAxisSplitLines"
              />
              <span></span>
              <span translate>Y axis helper lines</span>
            </label>
            <label
              class="c8y-checkbox"
              [title]="'X axis helper lines' | translate"
            >
              <input
                name="xAxisSplitLines"
                type="checkbox"
                formControlName="xAxisSplitLines"
              />
              <span></span>
              <span translate>X axis helper lines</span>
            </label>
            <label
              class="c8y-checkbox"
              [title]="'Merge axis' | translate"
            >
              <input
                name="mergeMatchingDatapoints"
                type="checkbox"
                formControlName="mergeMatchingDatapoints"
              />
              <span></span>
              <span translate>Merge matching datapoints into single axis.</span>
            </label>
          </c8y-form-group>
        </fieldset>
        <fieldset class="c8y-fieldset m-b-24 m-t-0">
          <legend>{{ 'Alarms & Events' | translate }}</legend>
          <c8y-form-group class="p-b-16 m-b-0 p-t-8 form-group-sm">
            <label
              class="c8y-checkbox"
              [title]="'Show vertical line on every occurrence' | translate"
            >
              <input
                name="displayMarkedLine"
                type="checkbox"
                formControlName="displayMarkedLine"
              />
              <span></span>
              <span translate>Show vertical line on every occurrence</span>
            </label>
            <label
              class="c8y-checkbox"
              [title]="'Show icon when triggered' | translate"
            >
              <input
                name="displayMarkedPoint"
                type="checkbox"
                formControlName="displayMarkedPoint"
              />
              <span></span>
              <span translate>Show icon when triggered</span>
              <button
                class="btn-clean m-l-8"
                [attr.aria-label]="
                  'Some alarms or events have no matching data points. No icons will be shown for them.'
                    | translate
                "
                [tooltip]="
                  'Some alarms or events have no matching data points. No icons will be shown for them.'
                    | translate
                "
                container="body"
                type="button"
                *ngIf="alarmsOrEventsHaveNoMatchingDps"
                (click)="$event.stopPropagation()"
                [adaptivePosition]="false"
              >
                <i
                  class="text-warning"
                  c8yIcon="exclamation-triangle"
                ></i>
              </button>
            </label>
          </c8y-form-group>
        </fieldset>
        <fieldset class="c8y-fieldset m-b-24 m-t-0">
          <legend>{{ 'Chart' | translate }}</legend>
          <c8y-form-group class="p-b-16 m-b-0 p-t-8 form-group-sm">
            <label
              class="c8y-checkbox"
              [title]="'Enable date selection in the widget view.' | translate"
            >
              <input
                name="displayDateSelection"
                type="checkbox"
                formControlName="displayDateSelection"
              />
              <span></span>
              <span translate>Date selection in the widget view.</span>
              <button
                class="btn-clean m-l-8"
                [attr.aria-label]="
                  'Date selection in widget view is not possible when using dashboard time range.'
                    | translate
                "
                [tooltip]="
                  'Date selection in widget view is not possible when using dashboard time range.'
                    | translate
                "
                container="body"
                type="button"
                *ngIf="dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT"
                (click)="$event.stopPropagation()"
                [adaptivePosition]="false"
              >
                <i
                  class="text-info"
                  c8yIcon="info"
                ></i>
              </button>
            </label>
            <label
              class="c8y-checkbox"
              [title]="'Aggregation selection' | translate"
            >
              <input
                name="displayAggregationSelection"
                type="checkbox"
                formControlName="displayAggregationSelection"
              />
              <span></span>
              <span translate>Aggregation selection</span>
            </label>
            <label
              class="c8y-checkbox"
              [title]="'Show labels and units' | translate"
            >
              <input
                name="showLabelAndUnit"
                type="checkbox"
                formControlName="showLabelAndUnit"
              />
              <span></span>
              <span translate>Display labels and units on y-axis</span>
            </label>
            <label
              class="c8y-checkbox"
              [title]="'Show slider' | translate"
            >
              <input
                name="showSlider"
                type="checkbox"
                formControlName="showSlider"
              />
              <span></span>
              <span translate>Show slider</span>
            </label>
          </c8y-form-group>
        </fieldset>
      </form>
    </div>
  </div>
</div>
<ng-template #dateSelectionHelpTemplate>
  <div [innerHTML]="dateSelectionHelp"></div>
</ng-template>