<?xml version="1.0" encoding="UTF-8" ?>
<templates id="template" xml:space="preserve">
    <t t-name="pos_restaurant.Table">
        <div class="table position-absolute d-flex flex-column align-items-center justify-content-between cursor-pointer" 
            t-on-click.stop="(ev) => props.onClick(props.table, ev)" 
            t-att-style="style">
            <div class="infos d-flex align-items-center flex-grow-1">
                <span class="label fw-bolder fs-4"
                    t-esc="props.table.name" />
                <span 
                    t-att-class="orderCountClass" 
                    class="badge d-flex align-items-center justify-content-center position-absolute rounded-pill" 
                    t-attf-class="{{ orderCount === 0 or pos.isEditMode ? 'd-none' : ''}}"
                    t-att-style="badgeStyle"
                    t-esc="orderCount"/>
            </div>
            <span class="table-seats position-absolute bottom-0 start-50 translate-middle-x mb-1 px-2 py-1 rounded text-bg-dark bg-opacity-25 fs-4">
                <div class="cover" t-att-style="`width: ${Math.ceil(fill * 100)}%`" />
                <t t-esc="customerCountDisplay" />
            </span>
        </div>
    </t>
</templates>
