{% 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>
            <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 }}</span>') }}</h1>
            {# From here, the jinja syntax is escaped because we use the angularjs syntax #}
            {% raw %}
              <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">
            {% endraw %}
                  <h3 class="panel-title">{{ _('Path') }}</h3>
            {% raw %}
                </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>
            {% endraw %}
                      {{ _('Phase') }}
            {% raw %}
                    </li>
                    <li class="list-group-item" ng-if="client.counters.timeleft">
                      <span class="badge">{{ client.counters.timeleft | time_human }}</span>
            {% endraw %}
                      {{ _('Time left') }}
            {% raw %}
                    </li>
                    <li class="list-group-item" ng-if="client.counters.warning && client.counters.warning > 0">
                      <span class="badge">{{ client.counters.warning }}</span>
            {% endraw %}
                      {{ _('Warning<span ng-if="client.counters.warning > 1">s</span>') }}
            {% raw %}
                    </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>
            {% endraw %}
                      {{ _('Bytes received') }}
            {% raw %}
                    </li>
                    <li class="list-group-item" ng-if="client.counters.bytes">
                      <span class="badge">{{ client.counters.bytes | bytes_human }}</span>
            {% endraw %}
                      {{ _('Bytes received') }}
            {% raw %}
                    </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>
            {% endraw %}
                      {{ _('Speed') }}
            {% raw %}
                    </li>
                  </ul>
                </div>
              </div>
              <table class="table table-striped table-hover" id="table-stats">
                <thead>
                  <tr>
            {% endraw %}
                    <th></th>
                    <th>{{ _('New') }}</th>
                    <th>{{ _('Changed') }}</th>
                    <th>{{ _('Unchanged') }}</th>
                    <th>{{ _('Deleted') }}</th>
                    <th>{{ _('Scanned') }}</th>
            {% raw %}
                  </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 %}
