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

    <t t-name="PartnerListScreen" owl="1">
        <div class="partnerlist-screen screen">
            <div class="screen-content">
                <div class="top-content">
                    <div class="button highlight" t-if="state.detailIsShown" t-on-click="() => this.trigger('click-save')">
                        <i t-if="env.isMobile" class="fa fa-floppy-o"/>
                        <t t-if="!env.isMobile">
                            <span> Save</span>
                        </t>
                    </div>
                    <div t-if="!state.detailIsShown" class="button new-customer highlight" role="img" aria-label="Add a customer"
                            t-on-click="createPartner"
                            title="Add a customer">
                        <i t-if="env.isMobile" class="fa fa-plus"/>
                        <t t-if="!env.isMobile"> Create</t>
                    </div>
                    <div class="button back" t-on-click="back">
                        <i t-if="env.isMobile" class="fa fa-angle-double-left"/>
                        <t t-if="!env.isMobile"> Discard</t>
                    </div>
                    <div class="top-right-buttons">
                    <div t-if="state.detailIsShown &amp;&amp; state.editModeProps.partner.id" class="button more-info">
                        <a t-att-href="partnerLink" target="_blank"> More info</a>
                    </div>
                    <div class="search-bar-container sb-partner" t-if="!state.detailIsShown">
                        <div class="pos-search-bar">
                            <i class="fa fa-search" t-on-click="_onPressEnterKey"/>
                            <input t-ref="search-word-input-partner" placeholder="Search Customers..." size="1" t-on-keyup="updatePartnerList" />
                            <i class="fa fa-times" t-on-click="_clearSearch"/>
                        </div>
                    </div>
                    </div>
                </div>
                <section class="full-content">
                    <div class="partner-window">
                        <section class="subwindow collapsed">
                            <div class="subwindow-container collapsed">
                                <div t-if="state.detailIsShown" class="partner-details-contents subwindow-container-fix">
                                    <PartnerDetailsEdit t-props="state.editModeProps" />
                                </div>
                            </div>
                        </section>
                        <section class="subwindow list">
                            <div class="subwindow-container">
                                <div t-if="!state.detailIsShown" class="subwindow-container-fix scrollable-y">
                                    <table class="partner-list">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th t-if="!env.isMobile">Address</th>
                                                <th t-if="!env.isMobile" class="partner-line-email">Contact</th>
                                                <th t-if="env.isMobile">ZIP</th>
                                                <th class="pos-right-align" t-if="isBalanceDisplayed">Balance</th>
                                                <th class="partner-line-details"></th>
                                                <th class="partner-line-last-column-placeholder oe_invisible"></th>
                                            </tr>
                                        </thead>
                                        <tbody class="partner-list-contents">
                                            <t t-foreach="partners" t-as="partner"
                                               t-key="partner.id">
                                                <PartnerLine partner="partner"
                                                            selectedPartner="state.selectedPartner"
                                                            detailIsShown="state.detailIsShown"
                                                            isBalanceDisplayed="isBalanceDisplayed"
                                                            onClickEdit.bind="editPartner"
                                                            onClickPartner.bind="clickPartner"/>
                                            </t>
                                        </tbody>
                                    </table>
                                    <div t-if="state.query" class="search-more-button">
                                        <div class="button" t-on-click="_onPressEnterKey">Search more</div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </section>
            </div>
        </div>
    </t>

</templates>
