<form class="form-inline">
  <div class="form-group">
    <div class="c8y-select-wrapper" data-cy="timeInterval--select-wrapper">
      <select
        aria-label="{{ 'Time interval' | translate }}"
        class="form-control"
        ng-hide="hideSelector"
        ng-options="(interval.txt | translate) for interval in timeIntervals"
        ng-model="selInterval"
        data-cy="timeInterval--selInterval"
        ng-change="onChange()"
      ></select>
      <span></span>
    </div>
  </div>

  <div class="form-group datepicker" ng-show="isCustom()">
    <input
      class="form-control"
      placeholder="{{ 'From`date`' | translate }}"
      is-open="openFrom"
      ng-model="dateFrom"
      data-cy="timeInterval--dateFrom"
      uib-datepicker-popup
      datepicker-options="{ maxDate: dateTo, showWeeks: true }"
      datepicker-append-to-body="true"
      show-button-bar="false"
      ng-click="openFrom=true"
    />
  </div>

  <div class="form-group datepicker" ng-show="isCustom()">
    <input
      class="form-control"
      placeholder="{{ 'To`date`' | translate }}"
      is-open="openTo"
      ng-model="dateTo"
      data-cy="timeInterval--dateTo"
      uib-datepicker-popup
      datepicker-options="{ minDate: dateFrom, showWeeks: true }"
      datepicker-append-to-body="true"
      show-button-bar="false"
      ng-click="openTo=true"
    />
  </div>

  <button
    title="{{ 'Reload' | translate }}"
    type="button"
    class="btn btn-link"
    ng-click="search(true)"
  >
    <i c8y-icon="refresh"></i>
    {{ 'Reload' | translate }}
  </button>
</form>
