<div class="row export-timespan">
  <div class="form-group">
    <div class="col-sm-4 col-xs-12">
      <div class="c8y-select-wrapper">
        <select
          aria-label="{{ 'Time range' | translate }}"
          class="form-control input-sm"
          ng-model="timespan.dateType"
          ng-options="key as (label | translate) for (key, label) in types"
        ></select>
        <span></span>
      </div>
    </div>
    <button
      data-cy="c8y-export-details--timerange-help-btn"
      class="btn-help btn-help--sm m-t-8"
      type="button"
      aria-label="{{ 'Help' | translate }}"
      uib-popover-template="'helpContent.html'"
      popover-placement="right"
      popover-trigger="'focus'"
    ></button>
    <script
      id="helpContent.html"
      type="text/ng-template"
    >
      <div translate>
        Find out more about each option in the
        <a ng-href="{{ ::helpLink }}" target="_blank" rel="noopener noreferrer">user documentation</a>.
      </div>
    </script>
  </div>
  <div
    class="col-xs-12"
    ng-if="timespan.dateType === 'CUSTOM'"
  >
    <div class="row">
      <div class="col-sm-6 col-xs-12">
        <div class="timespan-label">
          <label
            class="small"
            translate
          >
            From`date`
          </label>
        </div>
        <div class="d-inline-block">
          <c8y-date-time-picker
            max-date="timespan.to"
            ng-model="timespan.from"
            class="form-group-sm"
            append-to-body="true"
          ></c8y-date-time-picker>
        </div>
      </div>
      <div class="col-sm-6 col-xs-12">
        <div class="timespan-label">
          <label
            class="small"
            translate
          >
            To`date`
          </label>
        </div>
        <div class="d-inline-block">
          <c8y-date-time-picker
            min-date="timespan.from"
            ng-model="timespan.to"
            class="form-group-sm"
            append-to-body="true"
          ></c8y-date-time-picker>
        </div>
      </div>
    </div>
  </div>
</div>
