<vn-dialog
    vn-id="dialog"
    class="modal-form">
    <tpl-body>
        <mg-ajax path="/client/api/receipts" options="vnPost"></mg-ajax>
        <vn-horizontal class="header">
            <h5><span translate>New payment</span></h5>
        </vn-horizontal>
        <div pad-medium>
            <vn-horizontal>
                <vn-date-picker vn-one 
                    label="Date" 
                    model="$ctrl.receipt.payed"
                    ini-options="{dateFormat: 'd-m-Y', time_24hr: true}">
                </vn-date-picker>
                <vn-autocomplete vn-one
                    url="/api/Companies"
                    label="Company"
                    show-field="code"
                    value-field="id"
                    field="$ctrl.receipt.companyFk">
                </vn-autocomplete>
            </vn-horizontal>
            <vn-horizontal>
                <vn-autocomplete vn-one 
                    url="/api/Banks"
                    label="Bank"
                    show-field="bank"
                    value-field="id"
                    field="$ctrl.receipt.bankFk">
                </vn-autocomplete>
                <vn-input-number vn-one vn-focus
                    label="Amount"
                    field="$ctrl.receipt.amountPaid" step="0.01">
                </vn-input-number>
            </vn-horizontal>
        </div>
        <vn-horizontal margin-medium class="buttons-bar">
            <vn-button vn-one label="Save" ng-click="$ctrl.save()"></vn-button>
            <vn-button vn-one ng-click="$ctrl.hide()" label="Cancel"></vn-button>
        </vn-horizontal>
    </tpl-body>
</vn-dialog>