<div class="p-l-16 p-r-16">
  <div class="d-flex gap-16 a-i-start">
    <div
      class="btn-group btn-group-sm flex-no-shrink"
      *ngIf="!displayConfig?.widgetInstanceGlobalTimeContext"
    >
      <button
        class="btn btn-default"
        [attr.aria-label]="'Aggregation' | translate"
        tooltip="{{
          (displayConfig?.aggregation
            ? AGGREGATION_TEXTS[displayConfig.aggregation]
            : AGGREGATION_TEXTS.undefined
          ) | translate
        }}"
        placement="top"
        container="body"
        type="button"
        [adaptivePosition]="false"
        [delay]="500"
      >
        <i
          class="icon-14"
          [c8yIcon]="
            displayConfig?.aggregation
              ? AGGREGATION_ICONS[displayConfig.aggregation]
              : AGGREGATION_ICONS.undefined
          "
        ></i>
      </button>

      <c8y-time-context
        class="d-contents"
        (contextChange)="timePropsChanged($event)"
        [changedDateContext]="timeProps"
        [controlsAvailable]="{
          realtime: true,
          timeRange: displayConfig?.displayDateSelection,
          interval: displayConfig?.displayDateSelection,
          aggregation: displayConfig?.displayAggregationSelection
        }"
      ></c8y-time-context>
    </div>
    <c8y-alarms-filter
      class="d-contents form-group-sm"
      *ngIf="hasAtLeastOneAlarmActive"
      (filterApplied)="filterSeverity($event)"
    ></c8y-alarms-filter>

    <div class="m-l-auto btn-group btn-group-sm flex-no-shrink">
      <button
        class="btn btn-default"
        [attr.aria-label]="'Save as image' | translate"
        tooltip="{{ 'Save as image' | translate }}"
        container="body"
        type="button"
        (click)="chart.saveAsImage()"
        [adaptivePosition]="false"
      >
        <i
          class="icon-14"
          c8yIcon="image-file-checked"
        ></i>
      </button>
    </div>
  </div>
  <div
    class="d-flex"
    style="align-items: center"
  >
    <button
      class="btn-help btn-help--sm m-r-8"
      [attr.aria-label]="'Help' | translate"
      [popover]="legendHelpTemplate"
      placement="bottom"
      triggers="focus"
      container="body"
      [adaptivePosition]="false"
    ></button>
    <div class="inner-scroll">
      <div class="flex-grow p-t-8 d-flex a-i-start gap-8 p-b-4">
        <div
          class="c8y-datapoint-pill flex-no-shrink"
          title="{{ datapoint.label }} - {{ datapoint.__target.name }}"
          *ngFor="let datapoint of displayConfig.datapoints"
          [ngClass]="{ active: datapoint.__active }"
        >
          <i
            class="text-warning m-l-4"
            c8yIcon="exclamation-triangle"
            [tooltip]="'At least 1 data point must be active.' | translate"
            container="body"
            *ngIf="!hasAtLeastOneDatapointActive && datapoint.__active"
            [adaptivePosition]="false"
          ></i>
          <button
            class="c8y-datapoint-pill__btn"
            title="{{
              (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate
            }} "
            type="button"
            (click)="toggleChart(datapoint)"
          >
            <i
              class="icon-14"
              [c8yIcon]="datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'"
            ></i>
          </button>
          <div class="c8y-datapoint-pill__label c8y-datapoint-pill__btn">
            <i
              class="m-r-4 icon-14"
              c8yIcon="circle"
              [ngStyle]="{
                color: datapoint.color
              }"
            ></i>
            <span
              class="text-truncate"
              [ngClass]="{ 'text-muted': !datapoint.__active }"
            >
              <span class="text-truncate">
                {{ datapoint.label }}
              </span>
              <small class="text-muted text-10">
                {{ datapoint.__target.name }}
              </small>
            </span>
            <i
              class="text-warning m-l-4"
              c8yIcon="exclamation-triangle"
              [tooltip]="
                'Measurements received for this data point may be out of sync.' | translate
              "
              container="body"
              *ngIf="datapointsOutOfSync.get(datapoint)"
              [adaptivePosition]="false"
            ></i>
          </div>
        </div>
        <!-- Alarms  -->

        <ng-container *ngFor="let alarm of alarms">
          <div
            class="c8y-alarm-pill flex-no-shrink"
            title="{{ alarm.filters.type }} "
            *ngIf="alarm.__active"
          >
            <i
              class="text-warning m-l-4"
              c8yIcon="exclamation-triangle"
              [tooltip]="
                'Alarm of this type is currently active and outside of the selected time range'
                  | translate
              "
              container="body"
              *ngIf="displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)"
              [adaptivePosition]="false"
            ></i>
            <button
              class="c8y-alarm-pill__btn"
              title="{{ alarm.filters.type }} "
              type="button"
              (click)="toggleAlarmEventType(alarm)"
            >
              <i
                class="icon-14"
                [c8yIcon]="alarm.__hidden ? 'eye-slash text-muted' : 'eye text-primary'"
              ></i>
            </button>
            <button
              class="c8y-alarm-pill__label c8y-alarm-pill__btn"
              (click)="toggleMarkedArea(alarm)"
              [ngClass]="{
                active: !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType
              }"
            >
              <span
                class="circle-icon-wrapper circle-icon-wrapper--small m-r-4"
                [style.background-color]="alarm.color"
              >
                <i
                  class="stroked-icon"
                  c8yIcon="bell"
                ></i>
              </span>
              <span
                class="text-truncate"
                [ngClass]="{ 'text-muted': alarm.__hidden }"
              >
                <span class="text-truncate">
                  {{ alarm.filters.type }}
                </span>
                <small class="text-muted text-10">
                  {{ alarm.__target.name }}
                </small>
              </span>
            </button>
          </div>
        </ng-container>

        <!-- Events -->
        <ng-container *ngFor="let event of events">
          <div
            class="c8y-event-pill flex-no-shrink"
            title="{{ event.filters.type }}"
            *ngIf="event.__active"
          >
            <button
              class="c8y-event-pill__btn"
              title="{{ event.filters.type }} "
              type="button"
              (click)="toggleAlarmEventType(event)"
            >
              <i
                class="icon-14"
                [c8yIcon]="event.__hidden ? 'eye-slash text-muted' : 'eye text-primary'"
              ></i>
            </button>
            <div class="c8y-event-pill__label c8y-event-pill__btn">
              <span
                class="circle-icon-wrapper circle-icon-wrapper--small m-r-4"
                [ngStyle]="{ 'background-color': event.color }"
              >
                <i
                  class="stroked-icon"
                  c8yIcon="c8y-events"
                ></i>
              </span>
              <span
                class="text-truncate"
                [ngClass]="{ 'text-muted': event.__hidden }"
              >
                <span class="text-truncate">
                  {{ event.filters.type }}
                </span>
                <small class="text-muted text-10">
                  {{ event.__target.name }}
                </small>
              </span>
            </div>
          </div>
        </ng-container>
      </div>
    </div>
  </div>
</div>

<c8y-charts
  #chart
  [config]="displayConfig"
  [alerts]="alerts"
  (updateAlarmsAndEvents)="updateAlarmsAndEvents($event)"
  (configChangeOnZoomOut)="updateDashboardTimeContext($event)"
  (datapointOutOfSync)="handleDatapointOutOfSync($event)"
  (timeRangeChangeOnRealtime)="updateTimeRangeOnRealtime($event)"
  (isMarkedAreaEnabled)="isMarkedAreaEnabled = $event"
></c8y-charts>

<ng-template #legendHelpTemplate>
  <div [innerHTML]="legendHelp"></div>
</ng-template>