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

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

{% block nav_active_events %}active{% endblock %}
{% block content %}
<div ng-app="myApp" ng-controller="eventsGraphCtrl 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="(group, graphs) in myCtrl.groups" 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-[[group]]" ng-bind="myCtrl.graphNames[group]"></a>
          <a class="pull-right" data-toggle="modal" data-target="#config-modal-[[group]]"><span class="glyphicon glyphicon-cog"></span></a>
        </h5>
        <!-- Modal -->
        <div id="config-modal-[[group]]" class="modal fade" role="dialog">
          <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><span ng-bind="myCtrl.graphNames[group]"></span> Configuration</h4>
              </div>
              <div class="modal-body">
                 <form class="form-horizontal">
                    <div class="form-group">
                      <label class="col-sm-2 col-form-label">Window</label>
                      <div class="col-sm-4">
                        <input type="number" class="form-control" min=1 step=2 ng-model="myCtrl.movingAverageWindow[group]" ng-change="myCtrl.redraw(group)"/>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                          <label>
                              <input type="checkbox" ng-model="myCtrl.isLogarithmatic[group]" ng-change="myCtrl.redraw(group)"/> Logarithmatic
                          </label>
                        </div>
                      </div>
                    </div>
                 </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="collapse-[[group]]" class="panel-collapse collapse in">
        <div class="panel-body">
          <div id="[[group]]"></div>

        </div>
      </div>
    </div>
  </div>
</div>

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