{% extends 'layout.html' %}
{% block content %}
<div class="ui vertical grid">
  <div class="four column row">
    <div class="column">
      <a href="nodes?status=failed">
        <h1 class="ui red header no-margin-bottom">
          {{stats['failed']}}
          <small>{% if stats['failed']== 1 %} node {% else %} nodes {% endif %}</small>
        </h1>
      </a>
      <span>with status failed</span>
    </div>
    <div class="column">
      <a href="nodes?status=noop">
        <h1 class="ui header purple no-margin-bottom">
          {{stats['noop']}}
          <small>{% if stats['noop']== 1 %} node {% else %} nodes {% endif %}</small>
        </h1>
      </a>
      <span>with status pending</span>
    </div>
    <div class="column">
      <a href="nodes?status=changed">
        <h1 class="ui header green no-margin-bottom">
          {{stats['changed']}}
          <small>{% if stats['changed']== 1 %} node {% else %} nodes {% endif %}</small>
        </h1>
      </a>
      <span>with status changed</span>
    </div>
    <div class="column">
      <a href="nodes?status=unreported">
        <h1 class="ui header black no-margin-bottom">
          {{ stats['unreported'] }}
          <small>{% if stats['unreported']== 1 %} node {% else %} nodes {% endif %}</small>
        </h1>
      </a>
      <span>unreported in the last {{ config.UNRESPONSIVE_HOURS }} hours</span>
    </div>
  </div>
  <div class="four column row">
    <div class="column">
    </div>
    <div class="column">
      <h1 class="ui header darkblue no-margin-bottom">{{metrics['num_nodes']}}</h1>
      <span>Population</span>
    </div>
    <div class="column">
      <h1 class="ui header darkblue no-margin-bottom">{{metrics['num_resources']}}</h1>
      <span>Resources managed</span>
    </div>
    <div class="column">
      <h1 class="ui header darkblue no-margin-bottom">{{metrics['avg_resources_node']}}</h1>
      <span>Avg. resources/node</span>
    </div>
  </div>
  <div class="ui divider">
  </div>
  <div class="one column row no-margin-top">
    <div class="column">
      {% if nodes %}
      <h2>Nodes status detail ({{nodes|length}})</h2>
      <table class='ui compact basic table dashboard'>
        <thead>
          <tr>
            <th class="five wide">Status</th>
            <th class="ten wide">Hostname</th>
            <th class="one wide"></th>
          </tr>
        </thead>
        <tbody class="searchable">
          {% for node in nodes %}
          {% if node.status != 'unchanged' %}
          <tr>
            <td>
              <a class="ui small status label
                {% if node.status == 'failed' %}
                  red
                {% elif node.status == 'changed' %}
                  green
                {% elif node.status == 'unreported' %}
                  black
                {% elif node.status == 'noop' %}
                  blue
                {% endif %}
                " href="{{url_for('report_latest', node_name=node.name)}}">
                  {{node.status}}
                </a>
                {% if node.status=='unreported'%}
                  <span class="ui small label status"> {{ node.unreported_time }} </label>
                {% else %}
                   {% if node.events['failures'] %}<span class="ui small count label red">{{node.events['failures']}}</span>{% else %}<span class="ui small count label">0</span>{% endif%}
                   {% if node.events['successes'] %}<span class="ui small count label green">{{node.events['successes']}}</span>{% else %}<span class="ui small count label">0</span>{% endif%}
                {% endif %}
            </td>
            <td>
              <a href="{{url_for('node', node_name=node.name)}}">{{ node.name }}</a>
            </td>
            <td>
              <a title="Latest Report" href="{{url_for('report_latest', node_name=node.name)}}">
                <i class="large tasks darkblue icon"></i>
              </a>
            </td>
          </tr>
          {% endif %}
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <h2>Nodes status detail</h2>
      <div class="ui info message">
        Nothing seems to be changing.
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock content %}
