<vlayout vflex="1">
    <hbox
            vflex="min"
            hflex="1">
        <div hflex="1">
            <button
                    image="/img/item-add.png"
                    label="${labels.InvoicingAdd}"
                    sclass="nicebutton"
                    onClick="@command('addItem')"/>
        </div>
        <div hflex="1"></div>
        <div
                hflex="1"
                align="right">
            <checkbox
                    label="${labels.Completed}"
                    checked="@bind(vm.dataBean.completed)"/>
        </div>
    </hbox>
    <hbox vflex="1">
        <vbox vflex="1">
            <listbox
                    model="@load(vm.dataBean.items)"
                    vflex="1"
                    selectedItem="@bind(vm.selectedItem)"
                    selectedIndex="@bind(vm.selectedIndex)">
                <listhead>
                    <listheader
                            label="${labels.InvoicingDate}"
                            width="150px"/>
                    <listheader label="${labels.InvoicingInvoiceNumber}"/>
                    <listheader
                            label="${labels.InvoicingAmount}"
                            align="right"
                            width="90px"/>
                    <listheader/>
                </listhead>
                <template name="model">
                    <listitem>
                        <listcell>
                            <datebox
                                    value="@bind(each.invoiceDate)"
                                    format="${labels.DateFormat}"
                                    inplace="true"
                                    onFocus="@command('onFocus', item=each)"/>
                        </listcell>
                        <listcell>
                            <textbox
                                    value="@bind(each.invoiceNumber)"
                                    sclass="grid-textbox-max"
                                    inplace="true"
                                    maxlength="@load(vm.lengthText)"
                                    onFocus="@command('onFocus', item=each)"/>
                        </listcell>
                        <listcell>
                            <textbox
                                    value="@bind(each.amount) @converter(vm.standardBigDecimalConverter)"
                                    sclass="grid-textbox-max"
                                    inplace="true"
                                    onFocus="@command('onFocus', item=each)"
                                    maxlength="@load(vm.lengthText)"
                                    onChange="@command('calculate')"/>
                        </listcell>
                        <listcell>
                            <button
                                    label="${labels.RemoveItem}"
                                    sclass="nicebutton"
                                    onClick="@command('removeItem', item=each)"/>
                        </listcell>
                    </listitem>
                </template>
            </listbox>
        </vbox>
        <grid hflex="min">
            <columns>
                <column
                        align="right"
                        hflex="min"/>
                <column/>
            </columns>
            <rows>
                <row>
                    <cell sclass="row-title">${labels.InvoicingRequirementNumber} :</cell>
                    <cell>
                        <textbox
                                width="200px"
                                value="@bind(vm.dataBean.requirement.numser)"
                                style="font-weight: bold;"
                                maxlength="@load(vm.lengthText)"
                                readonly="true"/>
                    </cell>
                </row>
                <row>
                    <cell sclass="row-title">${labels.InvoicingDescription} :</cell>
                    <cell>
                        <textbox
                                width="350px"
                                rows="5"
                                value="@bind(vm.dataBean.requirement.description)"
                                maxlength="@load(vm.lengthDescription)"
                                readonly="true"/>
                    </cell>
                </row>
                <row>
                    <cell sclass="row-title">${labels.InvoicingRequirementPrice} :</cell>
                    <cell>
                        <textbox
                                width="150px"
                                value="@bind(vm.dataBean.requirement.sumTotal) @converter(vm.standardBigDecimalConverter)"
                                maxlength="@load(vm.lengthText)"
                                readonly="true"/>
                    </cell>
                </row>
                <row>
                    <cell sclass="row-title">${labels.InvoicingInvoicedPrice} :</cell>
                    <cell>
                        <textbox
                                width="150px"
                                value="@bind(vm.dataBean.totalInvoiced) @converter(vm.standardBigDecimalConverter)"
                                readonly="true"
                                maxlength="@load(vm.lengthText)"
                                style="@load(vm.dataBean.totalInvoiced gt vm.dataBean.requirement.sumTotal ? ' color: red;' : '' )"/>
                    </cell>
                </row>
            </rows>
        </grid>
    </hbox>
    <listbox
            vflex="1"
            model="@load(vm.dataBean.requirement.items)">
        <listhead>
            <listheader
                    hflex="10"
                    label="${labels.RequirementItemCode}"/>
            <listheader
                    hflex="15"
                    label="${labels.RequirementItemName}"/>
            <listheader
                    hflex="30"
                    label="${labels.RequirementItemText}"/>
            <listheader
                    hflex="10"
                    align="right"
                    label="${labels.RequirementItemQuantity}"/>
            <listheader
                    hflex="10"
                    label="${labels.RequirementItemMUnit}"/>
            <listheader
                    hflex="10"
                    align="right"
                    label="${labels.RequirementItemUnitPrice}"/>
            <listheader
                    hflex="10"
                    align="right"
                    label="${labels.RequirementItemTotal}"/>
            <listheader
                    hflex="10"
                    align="right"
                    label="${labels.InvoicingInvoiced}"/>
            <listheader
                    hflex="15"
                    label="${labels.RequirementItemDescription}"/>
        </listhead>
        <template name="model">
            <listitem>
                <listcell>
                    <label value="@load(each.code)"/>
                </listcell>
                <listcell>
                    <label value="@load(each.name)"/>
                </listcell>
                <listcell>
                    <label value="@load(each.textItem)"/>
                </listcell>
                <listcell>
                    <label value="@bind(each.quantity) @converter(vm.standardBigDecimalConverter)"/>
                </listcell>
                <listcell>
                    <label value="@bind(each.munit.name)"/>
                </listcell>
                <listcell>
                    <label value="@bind(each.unitPrice) @converter(vm.standardBigDecimalConverter)"/>
                </listcell>
                <listcell>
                    <label value="@bind(each.total) @converter(vm.standardBigDecimalConverter)"/>
                </listcell>
                <listcell>
                    <checkbox checked="@bind(each.paid)"/>
                </listcell>
                <listcell>
                    <label value="@bind(each.description)"/>
                </listcell>
            </listitem>
        </template>
    </listbox>
    <include src="/app/formButtons.zul"/>
</vlayout>
