<modal id="restoreVersions" status="default" icon="fas fa-undo" heading="{{'Restore Versions' | translate}} ({{folderLabel(restoreVersions.folder)}})" large="yes" closeable="yes">
  <div class="modal-body">
    <!--
    Inform the user about loading data even before the tree is initialised
    to avoid confusion where nothing is displayed on the screen for a while.
    Ref: https://forum.syncthing.net/t/reversed-date-in-search-filter/21369/3
    -->
    <div ng-if="!restoreVersions.versions" translate>Loading data...</div>
    <div ng-if="restoreVersions.versions && !restoreVersions.errors">
      <div id="restoreTree-container">
        <table id="restoreTree">
          <tbody>
            <tr>
              <td>
                <span ng-if="sizeOf(restoreVersions.versions) > 0" translate>Loading data...</span>
                <span ng-if="sizeOf(restoreVersions.versions) == 0" translate>There are no file versions to restore.</span>
              </td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      <hr />
      <div class="row form-inline">
        <div class="col-md-6">
          <div class="form-group">
            <label for="restoreVersionSearch"><span translate>Filter by name</span>:&nbsp</label>
            <input id="restoreVersionSearch" class="form-control" type="text" ng-model="restoreVersions.filters.text" ng-disabled="sizeOf(restoreVersions.versions) == 0">
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label for="restoreVersionDate"><span translate>Filter by date</span>:&nbsp</label>
            <input id="restoreVersionDateRange" class="form-control" ng-disabled="sizeOf(restoreVersions.versions) == 0">
          </div>
        </div>
      </div>
    </div>
    <div ng-if="restoreVersions.errors">
      <label><span translate>Some items could not be restored:</span></label>
      <table class="table table-condensed table-striped">
        <tbody>
          <tr ng-repeat="(file, error) in restoreVersions.errors">
            <td>{{ file }}</td>
            <td>{{ error }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#restore-versions-confirmation" ng-if="restoreVersions.versions" ng-disabled="restoreVersions.selectionCount() < 1">
      <span class="fas fa-check"></span>&nbsp;<span translate>Restore</span>
    </button>
    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
      <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
    </button>
  </div>
</modal>
