<vn-vertical>
    <vn-card pad-large>
        <vn-vertical>
            <vn-title>History</vn-title>
            <vn-table model="$ctrl.model">
                <vn-thead>
                    <vn-tr>
                        <vn-th field="creationDate">Date</vn-th>
                        <vn-th field="userFk" class="expendable">Changed by</vn-th>
                        <vn-th field="changedModel" class="expendable">Model</vn-th>
                        <vn-th field="action" class="expendable">Action</vn-th>
                        <vn-th field="changedModelValue" class="expendable">Name</vn-th>
                        <vn-th>Before</vn-th>
                        <vn-th>After</vn-th>
                    </vn-tr>
                </vn-thead>
                <vn-tbody>
                    <vn-tr ng-repeat="log in $ctrl.model.data"> 
                        <vn-td>
                            {{::log.creationDate | dateTime:'dd/MM/yyyy HH:mm'}}
                            <div class="changes">
                                <div>
                                    <span translate class="label">Changed by</span><span class="label">: </span>
                                    <span
                                        class="link" 
                                        ng-click="$ctrl.showWorkerDescriptor($event, log.user.id)"
                                        translate
                                        class="value">{{::log.user.name | dashIfEmpty}}
                                    </span>
                                </div>
                                <div>
                                    <span translate class="label">Model</span><span class="label">: </span>
                                    <span translate class="value">{{::log.changedModel | dashIfEmpty}}</span>
                                </div>
                                <div>
                                    <span translate class="label">Action</span><span class="label">: </span>
                                    <span translate class="value">{{::$ctrl.actionsText[log.action] | dashIfEmpty}}</span>
                                </div>
                                <div>
                                    <span translate class="label">Name</span><span class="label">: </span>
                                    <span translate class="value">{{::log.changedModelValue | dashIfEmpty}}</span>
                                </div>
                            </div>
                        </vn-td>
                        <vn-td class="expendable">
                            <span
                                class="link" 
                                ng-click="$ctrl.showWorkerDescriptor($event, log.user.id)"
                                translate
                                class="value">{{::log.user.name | dashIfEmpty}}
                            </span>
                        </vn-td>
                        <vn-td class="expendable">
                            {{::log.changedModel}}
                        </vn-td>
                        <vn-td translate class="expendable">
                            {{::$ctrl.actionsText[log.action]}}
                        </vn-td>
                        <vn-td class="expendable">
                            {{::log.changedModelValue}}
                        </vn-td>
                        <vn-td class="before">
                            <vn-one ng-repeat="old in log.oldProperties">
                                <div>
                                    <span translate class="label">{{::old.key}}</span><span class="label">: </span>
                                    <span translate class="value">{{::old.value}}</span>
                                </div>
                            </vn-one>
                        </vn-td>
                        <vn-td class="after">
                            <vn-one 
                                ng-repeat="new in log.newProperties" 
                                ng-if="!log.description" 
                                id="newInstance">
                                <div>
                                    <span translate class="label">{{::new.key}}</span><span class="label">: </span>
                                    <span translate class="value">{{::new.value}}</span>
                                </div>
                            </vn-one>
                            <vn-one
                                ng-if="!log.newProperties"
                                id="description">
                                <div>
                                    <span>{{log.description}}</span>
                                </div>
                            </vn-one>
                        </vn-td>
                    </vn-tr>
                </vn-tbody>
            </vn-table>
        </vn-vertical>
        <vn-pagination model="$ctrl.model"></vn-pagination>
    </vn-card>
</vn-vertical>
<vn-worker-descriptor-popover 
    vn-id="workerDescriptor"
    worker-fk="$ctrl.selectedWorker">
</vn-worker-descriptor-popover>