<div
  ng-show="timefilterValues.isAutoRefreshSelectorEnabled || timefilterValues.isTimeRangeSelectorEnabled"
  data-shared-timefilter-from="{{ getSharedTimeFilterFromDate() }}"
  data-shared-timefilter-to="{{ getSharedTimeFilterToDate() }}"
  class="kuiLocalMenu"
  data-test-subj="globalTimepicker"
>
  <button
    class="kuiLocalMenuItem"
    aria-label="{{ timefilterValues.refreshInterval.pause ? 'Resume refreshing data' : 'Pause refreshing data' }}"
    ng-click="toggleRefresh()"
    ng-show="timefilterValues.isAutoRefreshSelectorEnabled && (timefilterValues.refreshInterval.value > 0)"
    data-test-subj="globalTimepickerAutoRefreshButton"
    data-test-subj-state="{{ timefilterValues.refreshInterval.pause ? 'inactive' : 'active' }}"
  >
    <span
      class="kuiIcon"
      aria-hidden="true"
      ng-class="timefilterValues.refreshInterval.pause ? 'fa-play' : 'fa-pause'"
    ></span>
  </button>

  <button
    class="kuiLocalMenuItem navbar-timepicker-auto-refresh-desc"
    ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent('interval') }"
    ng-show="timefilterValues.isAutoRefreshSelectorEnabled"
    ng-click="kbnTopNav.toggle('interval')"
    data-test-subj="globalRefreshButton"
  >
    <span ng-show="timefilterValues.refreshInterval.value === 0">
      <span aria-hidden="true" class="kuiIcon fa-repeat"></span> 
      <span 
        i18n-id="common.ui.timepicker.autoRefresh"
        i18n-default-message="Auto-refresh"
      >
      </span>
    </span>

    <span
      ng-show="timefilterValues.refreshInterval.value > 0"
      aria-label="Data will refresh every {{timefilterValues.display.refreshInterval}}"
    >
      {{ timefilterValues.display.refreshInterval }}
    </span>
  </button>

  <button
    ng-show="timefilterValues.isTimeRangeSelectorEnabled"
    class="kuiLocalMenuItem"
    ng-click="back()"
    aria-label="{{ ::'common.ui.timepicker.moveBackardInTime' | i18n: { defaultMessage: 'Move backward in time' } }}"
  >
    <span
      class="kuiIcon fa-chevron-left"
      aria-hidden="true"
      tooltip="{{ ::'common.ui.timepicker.moveBackardInTime' | i18n: { defaultMessage: 'Move backward in time' } }}"
    ></span>
  </button>

  <button
    ng-show="timefilterValues.isTimeRangeSelectorEnabled"
    data-test-subj="globalTimepickerButton"
    class="kuiLocalMenuItem navbar-timepicker-time-desc"
    ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent('filter')}"
    ng-click="kbnTopNav.toggle('filter')"
    aria-label="Open time range picker"
    aria-haspopup="true"
  >
    <span aria-hidden="true" class="kuiIcon fa-clock-o"></span>
    <span
      aria-label="Current time range is {{timefilterValues.display.time}}"
      data-test-subj="globalTimepickerRange"
    >
      {{timefilterValues.display.time}}
    </span>
  </button>

  <button
    ng-show="timefilterValues.isTimeRangeSelectorEnabled"
    class="kuiLocalMenuItem"
    ng-click="forward()"
    aria-label="{{ ::'common.ui.timepicker.moveForwardInTime' | i18n: { defaultMessage: 'Move forward in time' } }}"
  >
    <span
      aria-hidden="true"
      class="kuiIcon fa-chevron-right"
      tooltip="{{ ::'common.ui.timepicker.moveForwardInTime' | i18n: { defaultMessage: 'Move forward in time' } }}"
    ></span>
  </button>
</div>
