<modal id="remoteNeed" status="info" icon="fas fa-exchange-alt" heading="{{'Out of Sync Items' | translate}} - {{deviceName(remoteNeedDevice)}}" large="yes" closeable="yes">
  <div class="modal-body">
    <div ng-if="sizeOf(remoteNeed) == 0">
      <span translate>Loading data...</span>
    </div>
    <div ng-if="sizeOf(remoteNeed) > 0">
      <div class="panel panel-default" ng-repeat="folder in remoteNeedFolders" ng-if="remoteNeed[folder] && remoteNeed[folder].files.length > 0">
        <button class="btn panel-heading" data-toggle="collapse" data-target="#remoteNeed-{{$index}}" aria-expanded="false">
          <h4 class="panel-title">
            <span>{{folderLabel(folder)}}</span>
          </h4>
        </button>
        <div id="remoteNeed-{{$index}}" class="panel-collapse" ng-class="{collapse: sizeOf(remoteNeedFolders) > 1}">
          <div class="panel-body">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th translate>Path</th>
                  <th translate>Size</th>
                  <th><span tooltip data-original-title="{{'Time the item was last modified' | translate}}" translate>Mod. Time</span></th>
                  <th><span tooltip data-original-title="{{'Device that last modified the item' | translate}}" translate>Mod. Device</span></th>
                </tr>
              </thead>
              <tr dir-paginate="file in remoteNeed[folder].files | itemsPerPage: remoteNeed[folder].perpage" current-page="remoteNeed[folder].page" total-items="completion[remoteNeedDevice.deviceID][folder].needItems" pagination-id="'remoteNeed-' + folder">
                <td class="file-path">{{file.name}}</td>
                <td><span ng-hide="file.type == 'DIRECTORY'">{{file.size | binary}}B</span></td>
                <td>{{file.modified | date:"yyyy-MM-dd HH:mm:ss"}}</td>
                <td ng-if="file.modifiedBy">{{friendlyNameFromShort(file.modifiedBy)}}</td>
                <td ng-if="!file.modifiedBy"><span translate>Unknown</span></td>
              </tr>
            </table>

            <dir-pagination-controls on-page-change="refreshRemoteNeed(folder, newPageNumber, remoteNeed[folder].perpage)" pagination-id="'remoteNeed-' + folder"></dir-pagination-controls>
            <ul class="pagination pull-right">
              <li ng-repeat="option in [10, 25, 50]" ng-class="{ active: remoteNeed[folder].perpage == option }">
                <a href="#" ng-click="refreshRemoteNeed(folder, remoteNeed[folder].page, option)">{{option}}</a>
              </li>
            </ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </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>
