<vn-data-viewer
    data="data"
    is-loading="!data"
    class="vn-w-xs">
    <vn-card>
    <vn-table>
        <vn-tbody>
            <vn-tr ng-repeat="row in data | orderBy:'warehouse.name'">
                <vn-td>{{::row.warehouse.name}}</vn-td>
                <vn-td shrink>
                    <vn-icon-button
                        icon="delete"
                        translate-attr="{title: 'Delete'}"
                        ng-click="$ctrl.onDelete(row)">
                    </vn-icon-button>
                </vn-td>
            </vn-tr>
        </vn-tbody>
    </vn-table>
    </vn-card>
</vn-data-viewer>
<vn-float-button
    icon="add"
    translate-attr="{title: 'Add'}"
    vn-bind="+"
    ng-click="$ctrl.onCreate()"
    fixed-bottom-right>
</vn-float-button>
<vn-crud-model
    auto-load="true"
    url="Warehouses"
    data="warehouses"
    order="name">
</vn-crud-model>
<vn-dialog 
    vn-id="dialog"
    on-accept="$ctrl.onSave()">
    <tpl-body>
        <vn-autocomplete
            ng-model="$ctrl.selected.warehouseFk"
            data="warehouses"
            show-field="name"
            value-field="id"
            label="Warehouse">
        </vn-autocomplete>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Save</button>
    </tpl-buttons>
</vn-dialog>
<vn-confirm 
    vn-id="confirm"
    message="This item will be deleted"
    question="Are you sure you want to continue?"
    on-accept="$ctrl.delete()">
</vn-confirm>