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

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

{% block content %}

  <div class="container">

    <div class="row">
      <div class="ds-featured-dashboard">
      </div>
    </div>


    <div class="row">

      <div class="col-md-4">
        <div class="well" align="center">
          <a href="/dashboards"><h3><i class="fa fa-lg fa-bar-chart-o" style="font-size: 4em"></i>
              <br/><br/>Dashboards</h3></a>
        </div>
      </div>

      <div class="col-md-4">
        <div class="well" align="center">
          <a href="#"><h3><i class="fa fa-lg fa-tags" style="font-size: 4em"></i>
              <br/><br/>Tags</h3></a>
        </div>
      </div>

      <div class="col-md-4">
        <div class="well" align="center">
          <a href="/preferences"><h3><i class="fa fa-lg fa-cog" style="font-size: 4em"></i>
              <br/><br/>Preferences</h3></a>
        </div>
      </div>

    </div> <!-- row -->


    <div class="row" id="ds-featured-dashboards" style="display:none;">
      <div class="col-md-12">
        <h3>Featured Dashboards</h3>
        <div id="ds-dashboard-featured-listing"></div>
      </div>
    </div> <!-- row -->

  </div> <!-- container -->

  <script>
   /* Load featured dashboard list */
   ds.manager.list('/api/dashboard/tagged/featured', function(data) {
     if (data && data.length) {
       $("#ds-featured-dashboards").show()
       $("#ds-dashboard-featured-listing").html(ds.templates.listing.dashboard_list({dashboards: data}))
     }
   })

   /* Load the dashboards tagged with 'featured-billboard', and
    * select one of them at random to display at the top of the
    * page. */
   ds.manager.list('/api/dashboard/tagged/featured-billboard', function(data) {
     if (data && data.length > 0) {
       var dashboard = data[Math.floor(Math.random() * data.length)]
       ds.manager.load(dashboard.href, '.ds-featured-dashboard', {
         interactive: true,
         from: '-3h'
       })
     }
   })
  </script>

{% endblock %}
