<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

    <t t-name="pos_restaurant.SplitBillScreen">
        <div class="splitbill-screen screen h-100 bg-100">
            <div class="contents d-flex flex-column flex-nowrap h-100 my-0 mx-auto">
                <div class="top-content d-flex align-items-center p-2 border-bottom text-center">
                    <button class="button back btn btn-lg btn-outline-primary" t-on-click="back">
                        <i class="fa fa-angle-double-left me-2"></i>
                        <span>Back</span>
                    </button>
                    <div class="top-content-center flex-grow-1">
                        <h2 class="mb-0">Bill Splitting</h2>
                    </div>
                </div>

                <div t-if="newOrder" class="main d-flex flex-nowrap flex-grow-1 overflow-hidden">
                    <div class="flex-grow-1 mw-50 m-3 bg-view border rounded w-50 overflow-auto">
                        <OrderWidget lines="orderlines" t-slot-scope="scope">
                            <t t-set="line" t-value="scope.line" />
                            <Orderline line="getLineData(line)"
                                t-on-click="() => this.onClickLine(line)"
                                class="{'selected text-bg-primary': splitlines[line.id].quantity !== 0}" />
                        </OrderWidget>
                    </div>
                    <div class="controls border-start flex-column flex-nowrap flex-grow-1 flex-shrink-1 flex-basis-0">
                        <div class="order-info py-4 border-bottom text-center text-success">
                            <span class="subtotal">
                                <t t-esc="env.utils.formatCurrency(newOrder.get_subtotal())" />
                            </span>
                        </div>
                        <div class="pay-button m-3">
                            <div class="button btn btn-lg btn-secondary py-3 w-100" t-on-click="proceed">
                                <i class="oi oi-chevron-right me-2" />
                                <span>Payment</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t>

</templates>
