{% extends "_base.jinja" %}

{% block css %}
  {{ super() }}
  <link rel="stylesheet" href="{{ cdn_url_for('jquery.powertip.css') }}">
{% endblock %}

{% block script %}
  {{ super() }}
  <script src="{{ cdn_url_for('script.min.js') }}"></script>
  <script src="{{ cdn_url_for('d3.js') }}"></script>
  <script src="{{ cdn_url_for('d3.layout.cloud.js') }}"></script>
  <script src="{{ cdn_url_for('jquery.powertip.js') }}"></script>
  <script src="{{ cdn_url_for('vega.js') }}"></script>
  <script type="text/ng-template" id="chart.html">
    <div>
      <div style="height:100%;">
        <div class="chart-title">
          <span ng-bind="name"></span>
        </div>
        <div style="height:100%;padding-bottom:32px;">
          <div style="height:100%;overflow:scroll;">
            <div class="canvas" ng-hide="hideCanvas"></div>
            <div class="table-responsive" ng-hide="hideTable">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th ng-repeat="col in chartColumns"><span ng-bind="col"></span></th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="item in chartData">
                    <td ng-repeat="col in item track by $index"><span ng-bind="col"></span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div ng-hide="hideLoading" class="loading">
        <div class="aligner"></div>
        <div class="spinner">
          <div class="rect1"></div>
          <div class="rect2"></div>
          <div class="rect3"></div>
          <div class="rect4"></div>
          <div class="rect5"></div>
        </div>
      <div>
    </div>
  </script>
  <script>
    $.fn.powerTip.smartPlacementLists = {
      e: ['e', 'w']
    };
  </script>
{% endblock %}
