{% extends "layout.html" %}
{% block body %}
        {% include "notifications.html" %}
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          {% include "small_topbar.html" %}
          <ul class="breadcrumb" style="margin-bottom: 5px;">
            {% if server -%}
            <li><a href="{{ url_for('view.home') }}">{{ _('Home') }}</a></li>
            <li><a href="{{ url_for('view.clients', server=server) }}">{{ _('%(server)s clients', server=server) }}</a></li>
            <li class="active">{{ _('%(client)s overview', client=cname) }}</li>
            {% else -%}
            <li><a href="{{ url_for('view.home') }}">{{ _('Home') }}</a></li>
            <li class="active">{{ _('%(client)s overview', client=cname) }}</li>
            {% endif -%}
          </ul>
          <br />
          <h1 class="page-header">{{ cname }} {% if current_user and current_user.is_authenticated and (current_user.is_admin or current_user.is_moderator) %}<a href="{{ url_for("view.cli_settings", server=server, client=cname) }}" class="btn btn-info" title="{{ _('edit') }}"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>{% endif %}</h1>

          <h2 class="sub-header">{{ _('Backups') }} <span id="running-status" class="label pull-right"></span></h2>
          <p>
            {{ _('Toggle column:') }}
            <a class="toggle-vis" data-column="0" href="#">{{ _('Number') }}</a>&nbsp;-
            <a class="toggle-vis" data-column="1" href="#">{{ _('Date') }}</a>&nbsp;-
            <a class="toggle-vis" data-column="2" href="#">{{ _('Bytes received') }}</a>&nbsp;-
            <a class="toggle-vis" data-column="3" href="#">{{ _('Estimated size') }}</a>&nbsp;-
            <a class="toggle-vis" data-column="4" href="#">{{ _('Deletable') }}</a>&nbsp;-
            <a class="toggle-vis" data-column="5" href="#">{{ _('Status') }}</a>&nbsp;-
            <a class="toggle-vis" data-column="6" href="#">{{ _('Delete') }}</a>
          </p>
          <div class="table-responsive">
            <table class="table table-striped table-hover nowrap" id="table-client" width="100%">
              <thead>
                <tr>
                  <th>{{ _('Number') }}</th>
                  <th class="desktop">{{ _('Date') }}</th>
                  <th class="desktop">{{ _('Bytes received') }}</th>
                  <th class="desktop">{{ _('Estimated size') }}</th>
                  <th class="desktop">{{ _('Deletable') }}</th>
                  <th class="desktop">{{ _('Status') }}</th>
                  <th class="desktop">{{ _('Delete') }}</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
            <div class="alert alert-dismissable alert-danger" id="client-alert" style="display: none;">
              <span class="glyphicon glyphicon-exclamation-sign"></span>&nbsp;{{ _('<strong>Sorry!</strong> There are no backups for this client.') }}
            </div>
          </div>
          <br />
          <div id="controls">
            <div id="left" class="form-inline col-md-6">
              <div class="edit-restore" style="display: none;">
                <a href="{{ url_for('view.edit_server_initiated_restore', name=cname, server=server) }}" id="btn-edit-restore" class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span>&nbsp;{{ _('Edit restore') }}</a>
              </div>
              <div class="scheduled-backup">
                <button type="button" id="btn-schedule-backup" class="btn btn-info"><span class="glyphicon glyphicon-time"></span>&nbsp;{{ _('Schedule backup') }}</button>
              </div>
            </div>
            <div id="right" class="form-inline col-md-6 text-right">
              <div class="edit-restore" style="display: none;">
                <button type="button" id="btn-cancel-restore" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>&nbsp;{{ _('Cancel restore') }}</button>
              </div>
              <div class="cancel-backup" style="display: none;">
                <button type="button" id="btn-cancel-backup" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>&nbsp;{{ _('Cancel backup') }}</button>
              </div>
            </div>
          </div>
        </div>
{% endblock %}