{% 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><a href="{{ url_for('view.client', name=cname, server=server) }}">{{ _('%(client)s overview', client=cname) }}</a></li>
            <li class="active">{{ _('Backup n°%(number)s overview', number=mypad(nbackup)) }}</li>
            {% else -%}
            <li><a href="{{ url_for('view.home') }}">{{ _('Home') }}</a></li>
            <li><a href="{{ url_for('view.client', name=cname) }}">{{ _('%(client)s overview', client=cname) }}</a></li>
            <li class="active">{{ _('Backup n°%(number)s overview', number=mypad(nbackup)) }}</li>
            {% endif -%}
          </ul>
          <br />
          <h1 class="page-header">{{ _('Backup n°%(number)s of %(client)s', number=mypad(nbackup), client=cname) }}</h1>
          <div class="row form-horizontal">
            <form class="form-inline col-md-6" 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>
                <span id="btnResetSearch" class="btn btn-default"><i class="fa fa-eraser" aria-hidden="true"></i></span>
              </div>
              <span class="help-block" id="matches"></span>
            </form>
            <div class="form-inline col-md-6 text-right">
              <button class="btn btn-default pull-right" id="btn-expand-collapse-tree" data-collapsed="true" data-toggle="tooltip" data-placement="top" title="{{ _('This will only expand already loaded nodes to avoid flooding the server with the lazy-loading requests') }}"><i class="fa fa-expand" aria-hidden="true"></i>&nbsp;{{ _('Expand tree') }}</button>
              <button class="btn btn-default pull-right" ng-show="load_all" id="btn-load-all-tree" data-toggle="tooltip" data-placement="top" title="{{ _('This may take some time depending the number of files in your backup') }}" ng-cloak><i class="fa fa-database" aria-hidden="true"></i>&nbsp;{{ _('Fetch all nodes') }}</button>
            </div>
          </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 pull-right" 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>
                      <select name="restoreto-sc" id="restoreto-sc" ng-model="sc_restore.to">
                        <option value="" disabled selected>{{ _('none') }}</option>
                        {% raw %}
                        <option ng-repeat="client in sc_restore.clients" value="{{client.name}}">{{client.name}}</option>
                        {% endraw %}
                      </select>
                    </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 pull-right" 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 pull-right"><i class="fa fa-eraser" aria-hidden="true"></i>&nbsp;{{ _('Clear selection') }}</button>
              </div>
            </form>
          </div>
        </div>
        <div id="restore-modal" class="modal fade" tabindex="-1" role="dialog">
          <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" tabindex="-1" role="error">
          <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 %}
