<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>

<c8y-time-context
  (contextChange)="onTimeContextChange($event)"
  [changedDateContext]="timeProps"
></c8y-time-context>

<c8y-action-bar-item [placement]="'left'">
  <c8y-workspace-config
    [updatedConfig]="config"
    (onConfigurationChange)="onConfigurationChange($event)"
  ></c8y-workspace-config>
</c8y-action-bar-item>

<c8y-action-bar-item placement="right">
  <c8y-datapoints-export-selector [exportConfig]="exportConfig"></c8y-datapoints-export-selector>
</c8y-action-bar-item>

<c8y-action-bar-item
  [placement]="'more'"
  [priority]="-2000"
>
  <button
    title="{{ 'Send as widget to report' | translate }}"
    type="button"
    data-cy="widgets-dashboard--copy-dashboard"
    (click)="sendAsWidgetToReport()"
    [disabled]="config?.datapoints?.length === 0 || !canAddReport"
  >
    <i c8yIcon="c8y-reports"></i>
    <span>{{ 'Send as widget to report' | translate }}</span>
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item
  [placement]="'more'"
  [priority]="-2000"
>
  <button
    title="{{ 'Create a new report with widget' | translate }}"
    type="button"
    data-cy="widgets-dashboard--copy-dashboard"
    (click)="createNewReportWithWidget()"
    [disabled]="config?.datapoints?.length === 0 || !canAddReport"
  >
    <i c8yIcon="c8y-reports"></i>
    <span>{{ 'Create a new report with widget' | translate }}</span>
  </button>
</c8y-action-bar-item>

<div class="content-fullpage d-grid grid_col--auto-360 gap-24">
  <div class="d-col gap-16">
    <c8y-charts
      class="flex-grow data-point-explorer"
      #chart
      [config]="config"
      [alerts]="alerts"
      (updateAlarmsAndEvents)="updateAlarmsAndEvents($event)"
      (configChangeOnZoomOut)="onSliderZoom($event)"
      (datapointOutOfSync)="handleDatapointOutOfSync($event)"
      (timeRangeChangeOnRealtime)="updateTimeRangeOnRealtime($event)"
      (isMarkedAreaEnabled)="isMarkedAreaEnabled = $event"
    ></c8y-charts>
    <form
      class="m-l-48 m-r-48"
      [formGroup]="formGroup"
    >
      <div class="d-grid-md grid__col--4-4-4 gap-16">
        <fieldset class="c8y-fieldset form-group-sm m-t-md-0 p-b-8">
          <legend>{{ 'Axis' | translate }}</legend>
          <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 matching data points into single axis' | translate"
          >
            <input
              name="mergeMatchingDatapoints"
              type="checkbox"
              formControlName="mergeMatchingDatapoints"
            />
            <span></span>
            <span translate>Merge matching data points into single axis</span>
          </label>
        </fieldset>
        <fieldset class="c8y-fieldset form-group-sm m-t-md-0 p-b-8">
          <legend>{{ 'Alarms & events' | translate }}</legend>
          <label
            class="c8y-checkbox"
            [title]="'Show vertical line when alarm occurs' | 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 alarm or event occurs' | translate"
          >
            <input
              name="displayMarkedPoint"
              type="checkbox"
              formControlName="displayMarkedPoint"
            />
            <span></span>
            <span>
              {{
                'Show icon when triggered`When alarms and events occur the icon will be shown`'
                  | translate
              }}
            </span>
            <button
              class="btn-dot 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-info"
                c8yIcon="info"
              ></i>
            </button>
          </label>
        </fieldset>
        <fieldset class="c8y-fieldset form-group-sm m-t-md-0 p-b-8">
          <legend>{{ 'Chart' | translate }}</legend>
          <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>
        </fieldset>
      </div>
    </form>
  </div>
  <div class="card inner-scroll bg-level-1">
    <form
      class="bg-inherit"
      [formGroup]="formGroup"
    >
      <c8y-datapoint-selection-list
        class="bg-inherit separator-top d-block"
        name="datapoints"
        [minActiveCount]="0"
        [defaultFormOptions]="datapointSelectDefaultFormOptions"
        [config]="{ contextAsset: contextAsset }"
        formControlName="datapoints"
        [allowDragAndDrop]="true"
      ></c8y-datapoint-selection-list>

      <c8y-alarm-event-selection-list
        class="bg-inherit"
        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>