<vn-crud-model
    vn-id="model"
    url="{{$ctrl.url}}"
    filter="$ctrl.filter"
    link="{originFk: $ctrl.originId}"
    data="$ctrl.logs"
    limit="20"
    auto-load="true">
</vn-crud-model>
<vn-data-viewer
    model="model"
    class="vn-w-xl">
    <vn-card>
        <vn-table model="model">
            <vn-thead>
                <vn-tr>
                    <vn-th field="creationDate">Date</vn-th>
                    <vn-th field="userFk" class="expendable" shrink>Author</vn-th>
                    <vn-th field="changedModel" class="expendable" shrink>Model</vn-th>
                    <vn-th field="action" class="expendable" shrink>Action</vn-th>
                    <vn-th field="changedModelValue" class="expendable">Name</vn-th>
                    <vn-th expand>Before</vn-th>
                    <vn-th expand>After</vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr ng-repeat="log in $ctrl.logs"> 
                    <vn-td expand>
                        {{::log.creationDate | date:'dd/MM/yyyy HH:mm'}}
                        <div class="changes">
                            <div>
                                <span translate class="label">Changed by</span><span class="label">: </span>
                                <span
                                    ng-class="{'link': log.user.worker.id, 'value': !log.user.worker.id}"
                                    ng-click="$ctrl.showWorkerDescriptor($event, log.user.worker.id)"
                                    translate>{{::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
                            ng-class="{'link': log.user.worker.id, 'value': !log.user.worker.id}"
                            ng-click="$ctrl.showWorkerDescriptor($event, log.user.worker.id)"
                            translate>{{::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" expand>
                        {{::log.changedModelValue}}
                    </vn-td>
                    <vn-td expand 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 expand 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-pagination model="model"></vn-pagination>
    </vn-card>
</vn-data-viewer>
<vn-worker-descriptor-popover 
    vn-id="workerDescriptor">
</vn-worker-descriptor-popover>