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

{% block pagetitle %}
  <span class="ds-primary-title">{{config['DASHBOARD_APPNAME']}}</span> <span class="ds-secondary-title">{{title}}</span>
{% endblock %}

{% block content %}

  <div class="container">

    {% include "snippets/breadcrumbs.html" %}

    <div class="row">
      <div class="col-md-8">
        <div class="row">
          <div class="col-md-10">
            <h3>{% if tag %}Dashboards{% else %}All Dashboards{% endif %}</h3>
          </div>
          <div class="col-md-2" align="right">

            <!-- sort menu -->
            <div class="btn-group" align="left">
              <button style="margin-top:1.75em;" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
                Sort <span class="caret"></span>
              </button>
              <ul class="dropdown-menu ds-dashboard-sort-menu" role="menu">
                <li class="active"><a data-ds-sort-col="default" data-ds-sort-order="asc" href="#">Default</a></li>
                <li class="divider"/>
                <li><a data-ds-sort-col="title" data-ds-sort-order="asc" href="#">Title (A-Z)</a></li>
                <li><a data-ds-sort-col="title" data-ds-sort-order="desc" href="#">Title (Z-A)</a></li>
                <li><a data-ds-sort-col="category" data-ds-sort-order="asc" href="#">Category (A-Z)</a></li>
                <li><a data-ds-sort-col="category" data-ds-sort-order="desc" href="#">Category (Z-A)</a></li>
                <li class="divider"/>
                <li><a data-ds-sort-col="modified" data-ds-sort-order="desc" href="#">Last Modified Time (newest first)</a></li>
                <li><a data-ds-sort-col="modified" data-ds-sort-order="asc" href="#">Last Modified Time (oldest first)</a></li>
                <li><a data-ds-sort-col="created" data-ds-sort-order="desc" href="#">Creation Date (newest first)</a></li>
                <li><a data-ds-sort-col="created" data-ds-sort-order="asc" href="#">Creation Date (oldest first)</a></li>
              </ul>
            </div> <!-- sort menu -->

          </div>
        </div>
        <div id="ds-dashboard-main-listing"></div>
      </div>
      <div class="col-md-4">
        <h3>Actions</h3>
        <ul class="list-group">
          <li class="list-group-item"><a href="/dashboards/create/">New dashboard&hellip;</a></li>
        </ul>
        <h3>Tags</h3>
        <div id="ds-dashboard-tag-listing"></div>
      </div>
    </div>
  </div> <!-- container -->

  <script>
   {% if tag %}
      var path = '/api/dashboard/tagged/{{tag}}?sort={{ctx.get('sort', 'created')}}&order={{ctx.get('order', 'desc')}}'
    {% else %}
      var path = '/api/dashboard/?sort={{ctx.get('sort', 'created')}}&order={{ctx.get('order', 'desc')}}'
    {% endif %}
    ds.manager.list(path, function(data) {
      var rendered = ds.templates.listing.dashboard_list({ dashboards: data })
      $("#ds-dashboard-main-listing").html(rendered)
    })

    $.ajax({
      dataType: 'json',
      url: '/api/tag/'
    }).done(function(data) {
      var context = { tags: data }
    {% if tag %}
      context.tag = '{{ tag }}'
    {% endif %}
      var rendered = ds.templates.listing.dashboard_tag_list(context)
      $("#ds-dashboard-tag-listing").html(rendered)
      $("[data-ds-tag={{tag}}]").addClass("active")
    })
  </script>

{% endblock %}
