<div
  class="top-chart-bar d-flex flex-wrap"
  ng-class="{ showtime: showTime(), 'has-data-selector': $parent.child.templateUrl }"
>
  <div class="inner-alert" ng-show="chart.truncated" style="pointer-events: none;">
    <div class="alert alert-warning">
      <p>
        <strong translate>Truncated data.</strong>
        <translate>Change aggregation or select shorter date range.</translate>
      </p>
    </div>
  </div>

  <!-- icon bar -->
  <c8y-measurements-icon-bar
    ng-show="showIconBar"
    class="measurement-icon-bar-wrapper p-static"
    aggregation="aggregation"
    realtime="realtime"
    show-aggregation="true"
    show-loading="chart.loading"
    show-realtime="true"
    on-realtime-toggle="onRealtimeToggle()"
  ></c8y-measurements-icon-bar>

  <!-- datapoints selection -->
  <c8y-item-selector
    class="m-l-auto"
    items="seriesAvailable"
    items-selected="seriesSelected"
    on-apply="onSeriesSelectionChanged(items)"
    text-apply="{{ 'Apply' | translate }}"
    text-placeholder="{{ 'Select data points' | translate }}"
    dropdown-menu-classes="{'dropdown-menu-right': true}"
  ></c8y-item-selector>

  <!-- datetime selection -->
  <!-- be careful here, if you use ng-if, it will create a new scope.
       ng-model for dates will break because we are not obeying
       the dot rule due to shortcoming of angular 1.2 (lack of
       bindToController directive option).
       @TODO: Now this option should be available. Try to fix it when feasible.
  -->
  <div class="measurements-time-control m-l-auto" ng-show="showTime()">
    <div
      class="measurements-date-from"
      uib-tooltip="{{ realtime ? (realtimeActiveInfo | translate) : undefined }}"
      tooltip-append-to-body="{{ realtime ? 'true' : undefined }}"
      tooltip-placement="{{ realtime ? 'bottom' : undefined }}"
      tooltip-popup-delay="500"
    >
      <label class="small m-r-4 m-b-0" translate>From`date`</label>
      <c8y-date-time-picker
        class="d-inline-block text-center"
        inputs-size="sm"
        placeholder="{{ 'From`date`' | translate }}"
        ng-model="internalDates.dateFrom"
        max-date="internalDates.dateTo"
        ng-disabled="realtime"
        append-to-body="true"
        ng-required="true"
      ></c8y-date-time-picker>
    </div>

    <div
      class="measurements-date-to"
      uib-tooltip="{{ realtime ? (realtimeActiveInfo | translate) : undefined }}"
      tooltip-append-to-body="{{ realtime ? 'true' : undefined }}"
      tooltip-placement="{{ realtime ? 'bottom' : undefined }}"
      tooltip-popup-delay="500"
    >
      <label class="small m-r-4 m-b-0" translate>To`date`</label>
      <c8y-date-time-picker
        class="d-inline-block text-center"
        inputs-size="sm"
        placeholder="{{ 'To`date`' | translate }}"
        ng-model="internalDates.dateTo"
        min-date="internalDates.dateFrom"
        ng-disabled="realtime"
        append-to-body="true"
        ng-required="true"
      ></c8y-date-time-picker>
    </div>
  </div>
</div>

<hr />

<div class="chart-container"></div>
