<modal id="failed" status="warning" icon="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 failedCurrent | itemsPerPage: failedPageSize" current-page="failedCurrentPage" pagination-id="failed">
        <td>{{failedFolderPath}}{{e.path}}</td>
        <td><abbr tooltip data-original-title="{{e.error}}">{{e.error | lastErrorComponent}}</abbr></td>
      </tr>
    </table>
    <dir-pagination-controls on-page-change="failedPageChanged(newPageNumber)" pagination-id="failed"></dir-pagination-controls>
    <ul class="pagination pull-right">
      <li ng-repeat="option in [10, 25, 50]" ng-class="{ active: failedPageSize == option }">
        <a href="#" ng-click="failedChangePageSize(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="fa fa-times"></span>&nbsp;<span translate>Close</span>
    </button>
  </div>
</modal>
