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

    <t t-name="ReservationListScreen" owl="1">
        <div
            class="clientlist-screen screen"
            t-on-activate-edit-mode="activateEditMode"
        >
            <div class="screen-content">
                <div class="top-content">
                    <div
                        t-if="isNextButtonVisible"
                        t-on-click="clickNext"
                        class="button next highlight"
                    >
                        <t t-if="!env.isMobile">
                            <t t-esc="nextButton.text" />
                        </t>
                        <t t-else="">
                            <i
                                t-if="nextButton.command === 'deselect'"
                                class="fa fa-trash"
                            />
                            <i
                                t-if="nextButton.command === 'set'"
                                class="fa fa-check"
                            />
                        </t>
                    </div>
                    <div class="button back" t-on-click="back">
                        <t t-if="!env.isMobile">Discard</t>
                        <t t-else="">
                            <i class="fa fa-undo" />
                        </t>
                    </div>
                    <div
                        t-if="!state.detailIsShown"
                        class="searchbox-client top-content-center"
                    >
                        <input
                            placeholder="Search Reservations"
                            size="1"
                            t-on-keyup="updateReservationList"
                        />
                        <span class="search-clear-client" />
                    </div>
                </div>
                <section class="full-content">
                    <div class="client-window">
                        <section class="subwindow collapsed">
                            <div class="subwindow-container collapsed">
                                <div
                                    t-if="state.detailIsShown"
                                    class="client-details-contents subwindow-container-fix"
                                >
                                    <ReservationDetailsEdit
                                        t-props="state.editModeProps"
                                        t-on-cancel-edit="cancelEdit"
                                    />
                                </div>
                            </div>
                        </section>
                        <section class="subwindow list">
                            <div class="subwindow-container">
                                <div
                                    t-if="!state.detailIsShown"
                                    class="subwindow-container-fix scrollable-y"
                                >
                                    <table class="client-list">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Partner name</th>
                                                <th>Room</th>
                                                <th>Checkin</th>
                                                <th>Checkout</th>
                                                <th>Adults</th>
                                                <th>Children</th>
                                            </tr>
                                        </thead>
                                        <tbody class="client-list-contents">
                                            <t
                                                t-foreach="reservations"
                                                t-as="reservation"
                                                t-key="reservation.id"
                                            >
                                                <ReservationLine
                                                    reservation="reservation"
                                                    selectedReservation="state.selectedReservation"
                                                    detailIsShown="state.detailIsShown"
                                                    t-on-click-reservation="clickReservation"
                                                />
                                            </t>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </section>
                    </div>
                </section>
            </div>
        </div>
    </t>

</templates>
