{% extends 'layout.html' %}
{% block content %}
<h1>Summary</h1>
<table class='ui basic table'>
  <thead>
    <tr>
      <th>Hostname</th>
      <th>Configuration version</th>
      <th>Start time</th>
      <th>End time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="{{url_for('node', node_name=report.node)}}">{{ report.node }}</a></td>
      <td>
        {{report.version}}
      </td>
      <td rel="utctimestamp">
        {{report.start}}
      </td>
      <td rel="utctimestamp">
        {{report.end}}
      </td>
    </tr>
  </tbody>
</table>

<h1>Events</h1>
<table class='ui basic table compact'>
  <thead>
    <tr>
      <th>Resource</th>
      <th>Status</th>
      <th>Changed From</th>
      <th>Changed To</th>
    </tr>
  </thead>
  <tbody>
    {% for event in events %}
    {% if not event.failed and event.item['old'] != event.item['new'] %}
      <tr id='event-{{loop.index}}' class='positive'>
    {% elif event.failed %}
      <tr id='event-{{loop.index}}' class='error'>
    {% endif %}
      <td>{{event.item['type']}}[{{event.item['title']}}]</td>
      <td>{{event.status}}</td>
      <td>{{event.item['old']}}</td>
      <td>{{event.item['new']}}</td>
    </tr>
    {#    <tr>
      <td class='message' colspan='4'>
        <div id='message-event-{{loop.index}}'>
          {{event.item['message']}}
        </div>
      </td>
    </tr>#}
    {% endfor %}
  </tbody>
</table>

{% endblock content %}
{% block script %}
  <script type='text/javascript'>
    jQuery(function ($) {
      $("[rel=tooltip]").tooltip();
      $(".event").click(function() {
        $("#message-" + this.id).slideToggle(200);
        return false;
      });
    });
  </script>
{% endblock script %}
