<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title"> {{ monitor.name }}
        <div style="float: right">
            <button type="button" class="btn btn-default btn-xs"
                    {% if monitor.enabled %}
                    title="Disable"
                    onclick="change_mon_status(1)"
                     {% else %}
                    title="Enable"
                    onclick="change_mon_status(0)"
                    {% endif %}
            >
                <span class="glyphicon {% if monitor.enabled %} glyphicon-eye-open {% else %} glyphicon-eye-close {% endif %}"
                      aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-default btn-xs" title="Restart">
                <span class="glyphicon glyphicon-flash" aria-hidden="true"></span>
            </button>
            <a type="button" class="btn btn-default btn-xs" title="Audit" href="{% url 'monitor_violations' monitor.id %}">
                <span class="glyphicon glyphicon-education" aria-hidden="true"></span>
            </a>
        </div>
        </h3>
    </div>
    <div class="panel-body">
        <table class="table">
            <tbody>
                <tr>
                  <td class="mon_details_row_name"> Name </td>
                  <td>{{ monitor.name }}</td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> Id </td>
                  <td>{{ monitor.id }}</td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> Target </td>
                  <td>{{ monitor.target }}</td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> Location </td>
                  <td>{{ monitor.location }}</td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> Kind </td>
                  <td>{{ monitor.kind }}</td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> Control type </td>
                  <td>{{ monitor.control_type.name }}
                    <button type="button" class="btn btn-primary btn-xs navbar-right" title="Trigger remediation"
                            onclick="change_mon_control_type('{% if monitor.control_type.name == "POSTERIORI" %}REAL_TIME{% else %}POSTERIORI{% endif %}')">
                        Switch to
                        {% if monitor.control_type.name == "POSTERIORI" %} Real time {% else %} Posteriori {% endif %}
                    </button>
                  </td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> Formula </td>
                  <td>{{ monitor.formula }}</td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> Enabled </td>
                  <td>{{ monitor.enabled }}</td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> Result </td>
                  <td>{{ monitor.mon.last }}</td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> Global step </td>
                  <td>{{ monitor.mon.counter }}</td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> last result step </td>
                  <td>{{ monitor.mon.counter2 }}</td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> Result </td>
                  <td>{{ monitor.mon.last }}</td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> Rewritten formula </td>
                  <td>{{ monitor.mon.rewrite }}</td>
                </tr>
                <tr>
                  <td class="mon_details_row_name"> Violations </td>
                  <td><a href="{% url 'monitor_violations' monitor.id %}">{{ monitor.violations|length }}</a></td>
                </tr>
                {% if monitor.liveness != None and monitor.is_liveness_expired != False %}
                   <tr>
                      <td class="mon_details_row_name"> Liveness </td>
                      <td> Potentially violated ahead of {{ monitor.is_liveness_expired }} steps !
                        <span class="glyphicon glyphicon-warning-sign btn-group" style="color: orange;"></span>
                      </td>
                    </tr>
                {% endif %}
                <tr>
                  <td class="mon_details_row_name"> Trace (only last 50) : </td>
                  <td> <a href="{% url 'traces' %}">See full trace</a> </td>
                </tr>
            </tbody>
          </table>
    </div>
        <div id="trace_vis"></div>
</div>

<script type="application/javascript">
    var container = document.getElementById('trace_vis');

    // Create a DataSet
    var items = new vis.DataSet([
        {% for e in monitor.mon.trace.events|slice:"-50:" %}
            {% with i=forloop.counter %}
                {% for p in e.predicates %}
                    {id: '{{ i }}_{{ forloop.counter }}', content: '{{ p }}', start: new Date("{{ e.step.isoformat }}")},
                {% endfor %}
            {% endwith %}
        {% endfor %}
    ]);

    // Configuration for the Timeline
    var options = {
        autoResize: true,
        minHeight: '200px',
        maxHeight: '800px'
    };

    // Create the Timeline
    var timeline = new vis.Timeline(container, items, options);

    function change_mon_status(v) {
        var status = 0;
        if(v === 0)
            status = "ENABLED";
        else if(v === 1)
            status = "DISABLED";

        $.ajax({
            dataType: 'text',
            type:'POST',
            url: '{% url 'mon_change_status' monitor.id %}',
            data: {
                mon_id: "{{ monitor.id }}",
                status: status
            },
            success: function(response){
                location.reload();
            }
        });
    }

    function change_mon_control_type(v) {
        $.ajax({
            dataType: 'text',
            type:'POST',
            url: '{% url 'mon_change_status' monitor.id %}',
            data: {
                mon_id: "{{ monitor.id }}",
                controlType: v
            },
            success: function(response){
                location.reload();
            }
        });
    }
</script>
