<!-- -*- mode:jinja2 -*- -->
{% extends "base.html" %}

{% block pagetitle %}
  <span class="ds-primary-title">{{dashboard.category}}</span> <span class="ds-secondary-title">{{dashboard.title}}</span>
  <small class="ds-summary">{% if dashboard.summary %}{{dashboard.summary}}{% endif %}</small>
{% endblock %}

{% block content %}

  <div class="container ds-header-container">
    <!-- Navigation and toolbar -->
    <div data-ds-hide="display">
      <div>
        {% include "snippets/breadcrumbs.html" %}
      </div>
      {% include "snippets/dashboard-toolbar.html" %}
      {% include "snippets/dashboard-info-edit-panel.html" %}
    </div> <!-- end nav and toolbar -->

    <!-- Fullscreen top bar -->
    <div class="ds-fullscreen-titlebar" data-ds-show="display" style="display:none">
      <div class="row">

        <div class="col-md-7">
          <h1 class="page-title">
            <span class="ds-primary-title">{{dashboard.category}}</span> <span class="ds-secondary-title">{{dashboard.title}}</span>
          </h1>
        </div>

        <div class="col-md-5" align="right">
          <div class="btn-group pull-right" style="height:4em; padding-top:1em">
            {% include "snippets/refresh-button.html" %}
            <button type="button"
                    data-toggle="tooltip" title="Exit Display Mode"
                    data-placement="bottom"
                    id="ds-exit-display-mode-button"
                    class="btn btn-default"
                    style="margin-top: 1em; ">
                    <i class="fa fa-compress"></i>
            </button>
          </div>

          <div class="pull-right" style="margin-left:1em;margin-right:.5em;margin-top:1.8em;">
            <ul class="nav nav-pills">
              <li class="active">
                <a class="ds-fullscreen-range-indicator">Past Hour</a>
              </li>
            </ul>
            <script>
              ds.manager.onRangeChanged(function(data) {
                var description = ds.manager.getRangeDescription(data.from);
                if ( description ) {
                  $("a.ds-fullscreen-range-indicator").text(description);
                }
              });
            </script>
          </div>

          <div class="ds-time-container pull-right" align="right">
            <h2><span class="time"></span><small class="ampm"></small></h2>
            <h6 class="date"></h6>
          </div>
        </div>
      </div>
      <hr style="margin:.25em"/>
    </div> <!-- end fullscreen titlebar -->

    <hr data-ds-hide="display"/>
  </div> <!-- container -->

  <div class="ds-grid" id="dashboard"></div>

  <!-- Hack: make sure we have room for comfortably accessing edit
       menus at the bottom of the dashboard -->
  <div data-ds-show="edit" style="height:600px;display:none;"></div>

  <script>

    ds.manager.onDashboardLoaded(function(dashboard) {
      dashboard.on('change', function(e) {
        $(".ds-primary-title").text(e.target.category || '')
        $(".ds-secondary-title").text(e.target.title || '')
        $(".ds-summary").text(e.target.summary || '')
      })
    })

    {% if transform %}
      ds.manager.onDashboardLoaded(function(dashboard) {
          var item = ds.manager.current.dashboard.get_item('{{transform.element}}')
          var transform = ds.transforms.get('{{transform.name}}')
          ds.manager.current_transform = {
              transform: transform,
              target: item
          }
      })
    {% endif %}

    var url = '/api/dashboard/{{dashboard.id}}'
    ds.manager.load(url, "#dashboard")
    $("[data-toggle=tooltip]").tooltip({
     animation:false,
     container: 'body',
     delay: { show:300, hide:100}
   })

    {% if ctx.get_int('refresh', config['DEFAULT_REFRESH_INTERVAL']) != 0 %}
      var interval = {{ctx.get_int('refresh', config['DEFAULT_REFRESH_INTERVAL'])}}
      ds.manager.set_refresh_interval(interval)
      $("ul.ds-refresh-menu li[data-ds-interval]").removeClass('active')
      $("ul.ds-refresh-menu li[data-ds-interval=" + interval + "]").addClass('active')
    {% endif %}

  </script>

{% endblock %}
