<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <!-- Shop Page Layout Realignment - Dynamic Food Theme -->
        <template id="chennora_shop_layout" inherit_id="website_sale.products" name="Chennora Shop Layout" priority="50">
            <!-- Sidebar Reconstruction with Dynamic Data -->
            <xpath expr="//*[contains(@id, 'products_grid_before')]" position="replace">
                <aside id="products_grid_before" class="col-lg-3">
                    <form class="js_attributes" method="get">
                        <input type="hidden" name="search" t-att-value="search"/>
                        <input type="hidden" name="sort" t-att-value="sort"/>
                        
                        <!-- Categories (Dynamic) -->
                        <div class="food-sidebar-section">
                            <div class="section-title">Categories</div>
                            <ul class="category-list">
                                <li class="category-item">
                                    <a t-att-href="keep('/shop', category=0)" t-attf-class="nav-link #{'' if category else 'active'}">
                                        <img src="/dine360_theme_chennora/static/src/img/cat-biryani.png"/> <span>All Products</span>
                                    </a>
                                </li>
                                <t t-foreach="categories" t-as="c">
                                    <li class="category-item">
                                        <a t-att-href="keep('/shop/category/' + slug(c), category=0)" t-attf-class="nav-link #{'active' if c.id == category.id else ''}">
                                            <img t-if="c.image_128" t-att-src="website.image_url(c, 'image_128')"/>
                                            <img t-else="" src="/dine360_theme_chennora/static/src/img/cat-biryani.png"/>
                                            <span t-field="c.name"/>
                                        </a>
                                    </li>
                                </t>
                            </ul>
                        </div>

                        <!-- Attributes (Dynamic - Sizes, etc.) -->
                        <t t-foreach="attributes" t-as="a">
                            <div class="food-sidebar-section">
                                <div class="section-title" t-field="a.name"/>
                                <ul class="list-unstyled">
                                    <t t-foreach="a.value_ids" t-as="v">
                                        <li class="mb-2 d-flex align-items-center gap-2">
                                            <div class="form-check">
                                                <input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id, v.id)" t-att-checked="'checked' if v.id in attrib_set else None" class="form-check-input mt-0" onchange="this.form.submit()"/>
                                                <span class="small fw-bold text-muted" t-field="v.name"/>
                                            </div>
                                        </li>
                                    </t>
                                </ul>
                            </div>
                        </t>
                    </form>

                    <!-- New Arrivals (Using subset of current products to avoid crash) -->
                    <div class="food-sidebar-section">
                        <div class="section-title">New Arrival</div>
                        <div class="arrival-list">
                            <t t-set="new_arrivals" t-value="products[:3] if products else []"/>
                            <t t-foreach="new_arrivals" t-as="arrival">
                                <div class="arrival-item cursor-pointer" t-att-onclick="'location.href=\'/shop/product/%s\'' % slug(arrival)">
                                    <div class="arrival-img">
                                        <img t-if="arrival.image_128" t-att-src="website.image_url(arrival, 'image_128')" class="img-fluid"/>
                                        <img t-else="" src="/dine360_theme_chennora/static/src/img/cat-biryani.png" class="img-fluid"/>
                                    </div>
                                    <div class="arrival-info">
                                        <div class="name fw-bold" t-field="arrival.name"/>
                                        <div class="price">
                                            <del t-if="arrival.compare_list_price" t-field="arrival.compare_list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                                            <span t-field="arrival.list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                                        </div>
                                    </div>
                                </div>
                            </t>
                        </div>
                    </div>
                </aside>
            </xpath>

            <!-- Top Bar with Dynamic Stats -->
            <xpath expr="//*[contains(@id, 'products_grid')]/*[1]" position="before">
                <div class="food-top-bar mt-2">
                    <div class="control-left">
                        <button class="btn-filtering"><i class="fa fa-sliders"/> Filtering</button>
                        <div class="result-count">Showing <span t-esc="len(products)"/> Results</div>
                    </div>
                </div>
            </xpath>
        </template>

        <!-- Product Item Customization - Reorganized Layout -->
        <template id="chennora_products_item" inherit_id="website_sale.products_item" name="Chennora Products Item" priority="50">
            <xpath expr="//form" position="replace">
                <div class="oe_product_cart h-100 d-flex flex-column" t-att-data-publish="product.website_published and 'on' or 'off'" itemscope="itemscope" itemtype="http://schema.org/Product">
                    <div class="oe_product_cart_inner h-100 bg-white rounded-3 shadow-sm overflow-hidden d-flex flex-column cursor-pointer" t-att-onclick="'location.href=\'/shop/product/%s\'' % slug(product)">
                        <div class="oe_product_image position-relative flex-shrink-0">
                            <!-- Dynamic Discount Badge -->
                            <t t-if="product.compare_list_price &gt; product.list_price">
                                <t t-set="diff" t-value="product.compare_list_price - product.list_price"/>
                                <t t-set="discount" t-value="round((diff / product.compare_list_price) * 100)"/>
                                <div class="discount-badge z-index-1">-<t t-esc="discount"/>%</div>
                            </t>
                            
                            <div class="d-block h-100 text-center">
                                <t t-set="image_holder" t-value="product._get_image_holder()"/>
                                <span t-field="product.image_1920" t-options="{'widget': 'image', 'preview_image': 'image_512', 'itemprop': 'image'}" class="d-flex h-100 justify-content-center align-items-center img-fluid"/>
                            </div>
                        </div>
                        
                        <div class="o_wsale_product_information p-3 flex-grow-1 d-flex flex-column align-items-center justify-content-center">
                            <!-- Name First -->
                            <h6 class="o_wsale_products_item_title fw-bold mb-2 text-dark text-center" t-field="product.name" />
                            
                            <!-- Price Second -->
                            <div class="price-row">
                                <del t-if="product.compare_list_price" class="text-muted small me-2">
                                    <span t-field="product.compare_list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                                </del>
                                <span class="fw-bold fs-5 text-dark" t-field="product.list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                            </div>
                        </div>
                    </div>
                </div>
            </xpath>
        </template>
    </data>
</odoo>
