{% extends "panoramix/basic.html" %}

{% block head_css %}
    {{ super() }}
    <style id="user_style" type="text/css">
      {{ dashboard.css or '' }}
    </style>
{% endblock %}

{% block body %}
<div class="dashboard container-fluid" data-dashboard="{{ dashboard.json_data }}">

<!-- Modal -->
<div class="modal fade" id="css_modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content css">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Dashboard CSS</h4>
      </div>
      <div class="modal-body">
        <select id="css_template" class="select2" style="margin-bottom: 5px;">
          <option value="" data-css="">-= CSS templates =-</option>
          {% for t in templates %}
            <option value="{{ t.id }}" data-css="{{t.css}}">
              {{ t.template_name }}
            </option>
          {% endfor %}
        </select><br>
        <textarea id="dash_css" rows="30" cols="60">{{ dashboard.css }}</textarea>
        <input type="hidden" id="dashboard_id" value="{{ dashboard.id }}" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

<div class="title">
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <h2>
          {{ dashboard.dashboard_title }}
        </h2>
      </div>
      <div class="col-md-2">
        <div class="btn-group pull-right" role="group" >
          <button type="button" id="filters" class="btn btn-default" data-toggle="tooltip" title="View the list of active filters">
            <i class="fa fa-filter"></i>
          </button>
          <button type="button" id="css" class="btn btn-default" data-toggle="modal" data-target="#css_modal">
            <i class="fa fa-css3" data-toggle="tooltip" title="CSS"></i>
          </button>
          <a id="editdash" class="btn btn-default" href="/dashboardmodelview/edit/{{ dashboard.id }}">
              <i class="fa fa-edit"></i>
          </a>
          <button type="button" id="savedash" class="btn btn-default">
            <i class="fa fa-save"></i>
          </button>
        </div>
      </div>
    </div>
</div>
<div class="gridster content_fluid" style="visibility: hidden;">
    <ul>
        {% for slice in dashboard.slices %}
          {% set pos = pos_dict.get(slice.id, {}) %}
          {% set viz = slice.viz %}
          <li
              id="slice_{{ slice.id }}"
              slice_id="{{ slice.id }}"
              class="widget {{ slice.viz.viz_type }}"
              data-row="{{ pos.row or 1 }}"
              data-col="{{ pos.col or loop.index }}"
              data-sizex="{{ pos.size_x or 4 }}"
              data-sizey="{{ pos.size_y or 4 }}">
              <table class="slice_header">
                <tbody>
                  <tr>
                    <td class="icons">
                      <nobr class="icons">
                        <a><i class="fa fa-arrows drag"></i></a>
                        <a class="refresh"><i class="fa fa-refresh"></i></a>
                      </nobr>
                    </td>
                    <td>
                      <div class="text-center header">
                        <nobr>
                          {{ slice.slice_name }}
                          {% if slice.description %}
                          <i class="fa fa-info-circle slice_info" slice_id="{{ slice.id }}"></i>
                          {% endif %}
                        </nobr>
                      </div>
                    </td>
                    <td class="icons text-right">
                      <nobr>
                      <a href="{{ slice.slice_url }}"><i class="fa fa-play"></i></a>
                      <a href="{{ slice.edit_url }}"><i class="fa fa-edit"></i></a>
                      <a class="closeslice"><i class="fa fa-close"></i></a>
                      </br>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div class="slice_description bs-callout bs-callout-default" style="{{ 'display: none;' if "{}".format(slice.id) not in dashboard.metadata_dejson.expanded_slices }}">
                {{ slice.description_markeddown | safe }}
              </div>
              <input type="hidden" slice_id="{{ slice.id }}" value="false">
              <div id="{{ viz.token }}" class="token">
                <img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading" alt="loading">
                <div class="slice_container" id="{{ viz.token }}_con"></div>
              </div>
          </li>
        {% endfor %}
    </ul>
</div>
</div>
{% endblock %}

{% block tail_js %}
  <script src="/static/assets/javascripts/dist/dashboard.entry.js"></script>
{% endblock %}
