{% 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 }} clients</a></li>
            <li><a href="{{ url_for('view.client', name=cname, server=server) }}">{{ cname }} overview</a></li>
            <li class="active">Backup n°{{ nbackup|mypad }} overview</li>
            {% else -%}
            <li><a href="{{ url_for('view.home') }}">Home</a></li>
            <li><a href="{{ url_for('view.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 browse">
                      <li><label for="hideMode"><span class="glyphicon glyphicon-eye-close"></span> Hide unmatched nodes&nbsp;</label><input type="checkbox" id="hideMode"></li>
                      <li><label for="leavesOnly"><span class="glyphicon glyphicon-leaf"></span> Leaves only&nbsp;</label><input type="checkbox" id="leavesOnly"></li>
                      <li><label for="regex"><span class="glyphicon glyphicon-filter"></span> Use regex&nbsp;</label><input type="checkbox" id="regex"></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-horizontal">
            {% if config.WITH_CELERY -%}
            <form id="form-restore" class="form-inline col-md-6" method="POST" role="form" action="{{ url_for('api.async_restore', name=cname, backup=nbackup, server=server) }}">
            {% else -%}
            <form id="form-restore" class="form-inline col-md-6" method="POST" role="form" action="{{ url_for('api.restore', name=cname, backup=nbackup, server=server) }}">
            {% endif -%}
              <input type="hidden" name="list">
              <div id="restore-form" style="display:none;">
                {% if encrypted -%}
                <div id="notice">
                  <div class="panel panel-warning">
                    <div class="panel-heading">
                      <h3 class="panel-title"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;Information</h3>
                    </div>
                    <div class="panel-body">
                      This backup is encrypted, please provide the encryption password in order to perform an online restoration.
                    </div>
                  </div>
                </div>
                {% endif -%}
                <div class="btn-group dropup">
                  <button type="submit" class="btn btn-info" id="perform"><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 browse">
                    <li><label for="strip">Number of leading path components to strip:&nbsp;</label><input type="text" id="strip" name="strip" placeholder="0" autocomplete="off" maxlength="2" size="2" value="0"></li>
                    <li><label for="format">Archive format:&nbsp;</label><select id="format" name="format" style="color: #000;"><option>zip</option><option>tar.gz</option><option>tar.bz2</option></select></li>
                    <li><label for="pass">Encryption password:&nbsp;</label><input type="password" id="pass" name="pass" placeholder="password" autocomplete="off" size="20"></li>
                  </ul>
                </div>
              </div>
            </form>
            <form id="form-server-initiated" class="form-inline col-md-6 text-right" method="POST" role="form" action"{{ url_for('api.server_restore', name=cname, backup=nbackup, server=server) }}">
              <input type="hidden" name="list-sc">
              <div id="server-initiated-form" style="display:none;">
                <div class="btn-group dropup" ng-show="sc_restore.enabled">
                  <button type="submit" class="btn btn-info" id="perform-server-initiated"><span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;Server initiated restore</button>
                  <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                  <ul class="dropdown-menu dropdown-menu-right browse">
                    <li><label for="strip-sc">Number of leading path components to strip:&nbsp;</label><input type="text" id="strip-sc" name="strip-sc" placeholder="0" autocomplete="off" maxlength="2" size="2" value="{% if edit and edit.strip %}{{ edit.strip }}{% else %}0{% endif %}"></li>
                    <li><label for="prefix-sc">Prefix to the restore path:&nbsp;</label><input type="text" id="prefix-sc" name="prefix-sc" placeholder="prefix" autocomplete="off" value="{% if edit and edit.restoreprefix %}{{ edit.restoreprefix }}{% endif %}"></li>
                    <li>
                      <label for="restoreto-sc">Restore files on an other client:&nbsp;</label>
                      {% raw %}
                      <select name="restoreto-sc" id="restoreto-sc" ng-model="sc_restore.to">
                        <option value="" disabled selected>none</option>
                        <option ng-repeat="client in sc_restore.clients" value="{{client.name}}">{{client.name}}</option>
                      </select>
                      {% endraw %}
                    </li>
                    <li><label for="force-sc">Whether to overwrite existing files:&nbsp;</label><input type="checkbox" id="force-sc" name="force-sc" {% if edit and edit.overwrite %}checked{% endif %}></li>
                  </ul>
                </div>
                {% if edit -%}
                <button type="button" id="btn-cancel-restore" class="btn btn-danger" ng-show="sc_restore.enabled"><span class="glyphicon glyphicon-trash"></span>&nbsp;Cancel restore</button>
                {% endif -%}
                <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.
                  <pre id="error-response"></pre>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
{% endblock %}
