<form class="form-inline">
  <div class="form-group">
    <div class="c8y-select-wrapper">
      <select
        class="form-control"
        [attr.aria-label]="'Time interval' | translate"
        name="interval"
        [(ngModel)]="selectedInterval"
        (ngModelChange)="changeInterval($event)"
        data-cy="c8y-time-interval--select"
      >
        <option
          *ngFor="let interval of intvervals"
          [ngValue]="interval"
        >
          {{ interval.label | translate }}
        </option>
      </select>
    </div>
  </div>

  <div
    class="form-group datepicker"
    *ngIf="selectedInterval === CUSTOM"
  >
    <input
      class="form-control"
      [placeholder]="'Select date range' | translate"
      bsDaterangepicker
      [bsConfig]="dateRangePickerConfig"
      [minDate]="minCustomDate"
      [maxDate]="maxCustomDate"
      [(bsValue)]="customRange"
      (bsValueChange)="changeCustomRange($event)"
    />
  </div>

  <button
    class="btn btn-link"
    [title]="'Reload' | translate"
    type="button"
    [disabled]="selectedInterval === CUSTOM && (!customRange || customRange.length === 0)"
    (click)="reload()"
  >
    <i c8yIcon="refresh"></i>
    {{ 'Reload' | translate }}
  </button>
</form>