<div class="btn-group ds-refresh-button-group" align="left" data-ds-hide="edit">

  <button type="button"
          class="btn btn-default ds-refresh-button"
          data-toggle="tooltip"
          data-placement="bottom"
          title="Refresh (current: {{ctx.get_int('refresh', config['DEFAULT_REFRESH_INTERVAL'])}}s)">
    <i class="fa fa-refresh"></i>
  </button>

  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"
          data-toggle="tooltip"
          data-placement="bottom"
          title="Set Refresh Options"
          ></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>

  <ul class="dropdown-menu dropdown-menu-right ds-refresh-menu" role="menu">
    <li style="display:none" data-ds-show="display" role="presentation" class="dropdown-header"><i class="fa fa-clock-o"></i> Recent Time Range</li>
    <li style="display:none" data-ds-show="display" class="divider"></li>
    {% for item in config['DASHBOARD_RANGE_PICKER'] %}
    <li style="display:none" data-ds-show="display" data-ds-range="{{item[1]}}"><a href="#">{{item[0]}}</a></li>
    {% endfor %}
    <br style="display:none" data-ds-show="display" />
    <li role="presentation" class="dropdown-header"><i class="fa fa-clock-o"></i> Auto Refresh</li>
    <li class="divider"></li>
    {% for item in config['DASHBOARD_REFRESH_INTERVALS'] %}
    <li data-ds-interval="{{item[1]}}"><a href="#">{{item[0]}}</a></li>
    {% endfor %}
  </ul>

</div>
