<modal id="failed" status="warning" icon="fas fa-exclamation-circle" heading="{{'Failed Items' | translate}}" large="yes" closeable="yes">
  <div class="modal-body">
    <p>
      <span translate>The following items could not be synchronized.</span>
      <span translate>They are retried automatically and will be synced when the error is resolved.</span>
    </p>
    <table class="table table-striped table-dynamic">
      <tr dir-paginate="e in failed.errors | itemsPerPage: failed.perpage" current-page="failed.page" total-items="model[failed.folder].pullErrors" pagination-id="failed">
        <td>{{e.path}}</td>
        <td><abbr tooltip data-original-title="{{e.error}}">{{e.error | lastErrorComponent}}</abbr></td>
      </tr>
    </table>
    <dir-pagination-controls on-page-change="refreshFailed(newPageNumber, failed.perpage)" pagination-id="failed"></dir-pagination-controls>
    <ul class="pagination pull-right">
      <li ng-repeat="option in [10, 25, 50]" ng-class="{ active: failed.perpage == option }">
        <a href="#" ng-click="refreshFailed(failed.page, option)">{{option}}</a>
      </li>
    </ul>
    <div class="clearfix"></div>
  </div>
  <div class="modal-footer">
    <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>
