{% 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('home') }}">Home</a></li>
            <li><a href="{{ url_for('clients', server=server) }}">{{ server }} clients</a></li>
            <li><a href="{{ url_for('client', name=cname, server=server) }}">{{ cname }} overview</a></li>
            <li class="active">Backup n°{{ nbackup|mypad }} overview</li>
            {% else -%}
            <li><a href="{{ url_for('home') }}">Home</a></li>
            <li><a href="{{ url_for('client', name=cname) }}">{{ cname }} overview</a></li>
            <li class="active">Backup n°{{ nbackup|mypad }} overview</li>
            {% endif -%}
          </ul>
          <br />
          <h1 class="page-header">Backup n°{{ nbackup|mypad }} of {{ cname }}</h1>
          <div class="row">
            <form class="form-inline" role="form" action="#" onsubmit="return false;">
              <div class="form-group">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="filter..." name="search-tree" autocomplete="off">
                  <div class="input-group-btn">
                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
                      <span class="glyphicon glyphicon-cog"></span> options 
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                      <li><a href="#"><label><input type="checkbox" id="hideMode">&nbsp;Hide unmatched nodes <span class="glyphicon glyphicon-eye-close"></span></label></a></li>
                      <li><a href="#"><label><input type="checkbox" id="leavesOnly">&nbsp;Leaves only <span class="glyphicon glyphicon-leaf"></span></label></a></li>
                      <li><a href="#"><label><input type="checkbox" id="regex">&nbsp;Use regex <span class="glyphicon glyphicon-filter"></span></label></a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <span id="btnResetSearch" class="btn btn-default">×</span>
              <span class="help-block" id="matches"></span>
            </form>
          </div>
          <br />
          <div id="waiting-container" class="row">
            <span class="icon-refresh-animate glyphicon glyphicon-refresh"></span>&nbsp;Loading, Please wait...
            <br />
            <div class="progress progress-striped active">
              <div class="progress-bar progress-bar-info" style="width: 100%"></div>
            </div>
          </div>
          <div id="tree-container" class="table-responsive row" style="display:none;">
            <table id="tree" class="table">
              <thead>
                <tr>
                  <th></th><th>mode</th><th>UID</th><th>GID</th><th>Size</th><th>Date</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
          <br />
          <div class="row">
            <form id="form-restore" class="form-inline" method="POST" role="form" action="{{ url_for("restore", name=cname, backup=nbackup, server=server) }}">
              <input type="hidden" name="list">
              <div id="restore-form" style="display:none;">
                <div class="btn-group">
                  <button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-cloud-download"></span>&nbsp;Download selected files</button>
                  <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#"><label for="strip">Number of leading path components to strip:</label><input type="text" id="strip" name="strip" placeholder="0" autocomplete="off" maxlength="2" size="2"></a></li>
                  </ul>
                </div>
                <button type="button" id="btn-clear" class="btn btn-info"><span class="glyphicon glyphicon-trash"></span>&nbsp;Clear selection</button>
              </div>
            </form>
          </div>
        </div>
        <div id="restore-modal" class="modal fade">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Processing request</h4>
              </div>
              <div class="modal-body">
                <span class="icon-refresh-animate glyphicon glyphicon-refresh"></span>&nbsp;Please wait while restoration is processing...
                <br />
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-info" style="width: 100%"></div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        <div id="error-modal" class="modal fade">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Restoration error</h4>
              </div>
              <div class="modal-body">
                <div class="alert alert-danger">
                  <span class="glyphicon glyphicon-exclamation-sign"></span>&nbsp;An error occurred while processing the restoration.
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
{% endblock %}
