<style> th, td { padding: 6px; } </style>
<modal id="globalChanges" status="default" icon="fas fa-info-circle" heading="{{'Recent Changes' | translate}}" large="yes" closeable="yes">
  <div class="modal-body">
    <div class="table-responsive">
      <table class="table-condensed table-striped table" style="table-layout: auto;">
        <thead>
          <tr>
            <th translate>Device</th>
            <th translate>Action</th>
            <th translate>Type</th>
            <th translate>Folder</th>
            <th translate>Path</th>
            <th translate>Time</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="changeEvent in globalChangeEvents">
            <td ng-if="changeEvent.data.modifiedBy">{{friendlyNameFromShort(changeEvent.data.modifiedBy)}}</td>
            <td ng-if="!changeEvent.data.modifiedBy"><span translate>Unknown</span></td>
            <td>{{changeEvent.data.action}}</td>
            <td>{{changeEvent.data.type}}</td>
            <td class="no-overflow-ellipse">{{folderLabel(changeEvent.data.folder)}}</td>
            <td class="file-path no-overflow-ellipse">{{changeEvent.data.path}}</td>
            <td class="no-overflow-ellipse">{{changeEvent.time | date:"yyyy-MM-dd HH:mm:ss"}}</td>
          </tr>
        </tbody>
      </table>
    </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>
