<vn-crud-model vn-id="model" url="clients/transactions" link="{clientFk: $ctrl.$params.id}" limit="20"
    data="transactions" order="created DESC" auto-load="true">
</vn-crud-model>
<vn-data-viewer model="model" class="vn-w-md">
    <vn-card>
        <vn-table model="model">
            <vn-thead>
                <vn-tr>
                    <vn-th shrink>State</vn-th>
                    <vn-th field="id" number>Id</vn-th>
                    <vn-th field="created" expand>Date</vn-th>
                    <vn-th field="amount" number>Amount</vn-th>
                    <vn-th shrink></vn-th>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr ng-repeat="transaction in transactions">
                    <vn-td shrink>
                        <vn-icon vn-tooltip="{{::$ctrl.getFormattedMessage(transaction)}}"
                            ng-show="::((transaction.errorMessage || transaction.responseMessage) && !transaction.isConfirmed)"
                            icon="clear">
                        </vn-icon>
                        <vn-icon vn-tooltip="Confirmed" ng-show="::(transaction.isConfirmed)" icon="check">
                        </vn-icon>
                    </vn-td>
                    <vn-td number>{{::transaction.id}}</vn-td>
                    <vn-td>{{::transaction.created | date:'dd/MM/yyyy HH:mm'}}</vn-td>
                    <vn-td number>{{::transaction.amount | currency: 'EUR':2}}</vn-td>
                    <vn-td shrink>
                        <vn-icon-button icon="done_all" vn-acl="administrative" vn-acl-action="remove"
                            translate-attr="{title: 'Confirm transaction'}" ng-show="::!transaction.isConfirmed"
                            ng-click="$ctrl.confirm(transaction)">
                        </vn-icon-button>
                    </vn-td>
                </vn-tr>
            </vn-tbody>
        </vn-table>
    </vn-card>
</vn-data-viewer>