<div class="kbn-timepicker" data-test-subj="timePicker">

  <div class="tab-content kbn-timepicker-content">
    <!-- Filters -->
    <div ng-show="activeTab === 'filter'" role="tabpanel" class="tab-pane active">
      <div class="kbn-timepicker-title">
        <h2 class="kuiLocalDropdownTitle kbn-timepicker-title__text">
          Time Range
        </h2>
      </div>

      <div class="kuiVerticalRhythmSmall">
        <div role="tablist" class="euiTabs euiTabs--small kbn-timepicker-modes kbn-timepicker-title__section">
          <button
            id="timepickerQuick"
            role="tab"
            class="euiTab"
            ng-class="{'euiTab-isSelected': mode === 'quick' }"
            ng-click="setMode('quick')"
            aria-selected="{{mode === 'quick'}}"
            data-test-subj="timepicker-quick-button"
          >
            Quick
          </button>

          <button
            id="timepickerRelative"
            role="tab"
            class="euiTab"
            ng-class="{'euiTab-isSelected': mode === 'relative' }"
            ng-click="setMode('relative')"
            aria-selected="{{mode === 'relative'}}"
            data-test-subj="timepicker-relative-button"
          >
            Relative
          </button>

          <button
            id="timepickerAbsolute"
            role="tab"
            class="euiTab"
            ng-class="{'euiTab-isSelected': mode === 'absolute' }"
            ng-click="setMode('absolute')"
            aria-selected="{{mode === 'absolute'}}"
            data-test-subj="timepicker-absolute-button"
          >
            Absolute
          </button>

          <button
            id="timepickerRecent"
            role="tab"
            class="euiTab"
            ng-class="{'euiTab-isSelected': mode === 'recent' }"
            ng-click="setMode('recent')"
            aria-selected="{{mode === 'recent'}}"
            data-test-subj="timepicker-recent-button"
          >
            Recent
          </button>
        </div>
      </div>

      <div
        class="kuiVerticalRhythmSmall"
        ng-switch
        on="mode"
      >
        <kbn-timepicker-quick-panel
          ng-switch-when="quick"
          set-quick="setQuick(from, to)"
          role="tabpanel"
          aria-labelledby="timepickerQuick"
        ></kbn-timepicker-quick-panel>

        <kbn-timepicker-recent-panel
          ng-switch-when="recent"
          set-quick="setQuick(from, to)"
          role="tabpanel"
          aria-labelledby="timepickerRecent"
        ></kbn-timepicker-recent-panel>

        <kbn-timepicker-relative-panel
          ng-switch-when="relative"
          apply-relative="applyRelative()"
          check-relative="checkRelative()"
          format-relative="formatRelative(key)"
          relative="relative"
          relative-options="relativeOptions"
          set-relative-to-now="setRelativeToNow(key)"
          units="units"
          role="tabpanel"
          aria-labelledby="timepickerRelative"
        ></kbn-timepicker-relative-panel>

        <kbn-timepicker-absolute-panel
          ng-switch-when="absolute"
          absolute="absolute"
          apply-absolute="applyAbsolute()"
          format="format"
          pick-from-date="pickFromDate"
          pick-to-date="pickToDate"
          set-to-now="setToNow(key)"
          role="tabpanel"
          aria-labelledby="timepickerAbsolute"
        ></kbn-timepicker-absolute-panel>
      </div>
    </div>

    <!-- Refresh Intervals -->
    <div ng-show="activeTab === 'interval'" role="tabpanel" class="tab-pane active">
      <h2 class="kuiLocalDropdownTitle">
        Refresh Interval
      </h2>

      <div ng-repeat="list in refreshLists" class="kbn-refresh-section">
        <ul class="list-unstyled">
          <li ng-repeat="inter in list">
            <a
              class="refresh-interval"
              ng-class="{ 'refresh-interval-active': interval.value === inter.value }"
              ng-click="setRefreshInterval(inter)"
              kbn-accessible-click
            >
              {{prettyInterval(inter)}}
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
