{% extends "layout.html" %}
{% block body %}
        <div class="main">
          <ul class="breadcrumb" style="margin-bottom: 5px;">
            <li><a href="{{ url_for('view.home') }}">Home</a></li>
            <li class="active">Live monitor</li>
          </ul>
          <div class="row" id="live-container" ng-cloak>
            {# From here, the jinja syntax is escaped because we use the angularjs syntax #}
            {% raw %}
            <div class="col-lg-12" ng-repeat="client in clients">
              <br />
							<h1 class="page-header">{{ ::client.client }}<span ng-if="client.agent"> on {{ ::client.agent }}</h1>
              <h4>{{ client.counters.percent | number:0 }}%</h4>
              <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-success" style="width: {{ client.counters.percent }}%"></div>
              </div>
              <div class="panel panel-primary" ng-if="client.counters.path">
                <div class="panel-heading">
                  <h3 class="panel-title">Path</h3>
                </div>
                <div class="panel-body">
                  {{ client.counters.path }}
                </div>
              </div>
              <div class="row">
                <div class="col-lg-6">
                  <ul class="list-group">
                    <li class="list-group-item" ng-if="client.counters.phase">
                      <span class="badge">{{ client.counters.phase }}</span>
                      Phase
                    </li>
                    <li class="list-group-item" ng-if="client.counters.timeleft">
                      <span class="badge">{{ client.counters.timeleft | time_human }}</span>
                      Time left
                    </li>
										<li class="list-group-item" ng-if="client.counters.warning && client.counters.warning > 0">
                      <span class="badge">{{ client.counters.warning }}</span>
											Warning<span ng-if="client.counters.warning > 1">s</span>
                    </li>
                  </ul>
                </div>
                <div class="col-lg-6">
                  <ul class="list-group">
                    <li class="list-group-item" ng-if="client.counters.bytes_in">
                      <span class="badge">{{ client.counters.bytes_in | bytes_human }}</span>
                      Bytes received
                    </li>
										<li class="list-group-item" ng-if="client.counters.speed && client.counters.speed > 0">
                      <span class="badge">{{ client.counters.speed | bytes_human }}/s</span>
                      Speed
                    </li>
                  </ul>
                </div>
              </div>
              <table class="table table-striped table-hover" id="table-stats">
                <thead>
                  <tr>
                    <th></th>
                    <th>New</th>
                    <th>Changed</th>
                    <th>Unchanged</th>
                    <th>Deleted</th>
                    <th>Scanned</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="(key, val) in client.counters" ng-if="key != 'Grand total' && val.length == 5">
                    <td>{{ key }}</td>
                    <td>{{ val[0] }}</td>
                    <td>{{ val[1] }}</td>
                    <td>{{ val[2] }}</td>
                    <td>{{ val[3] }}</td>
                    <td>{{ val[4] }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            {% endraw %}
          </div>
        </div>
{% endblock %}
