{% extends "layouts/base.html" %}

{% block title %}Histograms{% endblock %}
{% block header %}
  {{ super() }}
{% endblock %}

{% block nav_active_histograms %}active{% endblock %}
{% block content %}
<div ng-app="myApp" ng-controller="hitogramsGraphCtrl as myCtrl">
<div class="alert alert-danger" ng-show="!myCtrl.connected" class="ng-hide">
  <strong>Disconnected!</strong> Retrying in [[myCtrl.next]] ...
</div>
<div class="panel-group" id="#accordion" aria-multiselectable="true">
<div class="row">
  <div ng-repeat="(graphDiv, g) in myCtrl.graphs track by $index" class="col-sm-4">
    <div class="panel panel-default">
      <!-- We use $index for id because slash is not allowed in id -->
      <div class="panel-heading">
        <h5 class="mb-0">
          <a data-toggle="collapse" href="#collapse-[[$index]]" aria-expanded="true" aria-controls="collapse-[[$index]]">
            [[g]]
          </a>
        </h5>
      </div>
      <div id="collapse-[[$index]]" class="panel-collapse collapse in">
        <div class="panel-body">
          <div id="[[graphDiv]]"></div>
        </div>
      </div>
    </div>
  </div>
</div>

</div>
</div>
{% endblock %}
{% block footer %}
  <script src="{{ url_for('static', filename='js/histograms.js') }}"></script>
{% endblock %}