<style> th, td { padding: 6px; } </style>
<modal id="globalChanges" status="default" icon="{{'history'}}" heading="{{'Global Changes' | translate}}" large="yes" closeable="yes">
    <div class="modal-body">
        <table>
          <tr>
            <th translate>Device</th>
            <th translate>Action</th>
            <th translate>Type</th>
            <th translate>Path</th>
            <th translate>Time</th>
          </tr>
          <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="globalChanges-path-col">{{changeEvent.data.path}}</td>
            <td class="globalChanges-time-col">{{changeEvent.time | date:"yyyy-MM-dd HH:mm:ss"}}</td>
          </tr>
        </table>
    </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>
