<odoo>
    <template id="image_home_template" name="Home Page Icons">
        <t t-call="web.frontend_layout">
            <t t-set="no_footer" t-value="True"/>
            <t t-set="no_header" t-value="True"/>
            <t t-set="pageName" t-value="'home_dashboard'"/>
            <link rel="stylesheet" type="text/css" href="/dine360_dashboard/static/src/css/home_menu.css?v=1.1"/>
            
            <div class="o_home_menu_background">
                <!-- Top Bar -->
                <div class="o_home_top_bar">
                    <div class="o_top_bar_island">
                        <a href="/" class="o_top_item" title="Shivasakthi Home" style="width: auto; padding: 0 10px;">
                            <img t-attf-src="/web/binary/company_logo" style="height: 24px; width: auto; object-fit: contain;"/>
                        </a>
                        <div class="o_bar_divider" style="margin: 0 5px;"></div>
                        
                        <a href="/" class="o_top_item" title="View Website">
                            <i class="fa fa-globe"/>
                        </a>

                        <a href="/web#action=mail.action_discuss" class="o_top_item" title="Messages">
                            <i class="fa fa-comments-o"/>
                            <span class="badge_dot"/>
                        </a>

                        <!-- Only show Settings for Admins -->
                        <t t-set="is_admin" t-value="user_id.has_group('base.group_system') or user_id.has_group('dine360_restaurant.group_restaurant_admin')"/>
                        <t t-if="is_admin">
                            <a href="/web#action=base.action_res_config_general_settings" class="o_top_item" title="Settings">
                                <i class="fa fa-sliders"/>
                            </a>
                        </t>

                        <div class="o_bar_divider"></div>


                        <div class="o_user_avatar_container">
                            <a href="/web#action=base.action_res_users_my" class="o_user_avatar" style="display:flex; align-items:center; justify-content:center; text-decoration:none;">
                                <t t-esc="user_id.name[0] if user_id else 'U'"/>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="container" style="padding-top: 100px;">
                    <!-- Low Stock Alert Section -->
                    <t t-if="low_stock_products">
                        <div class="o_low_stock_alert mb-5" style="background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.2); border-radius: 12px; padding: 15px 25px;">
                            <div class="d-flex align-items-center mb-2">
                                <i class="fa fa-exclamation-triangle me-2" style="color: #dc3545; font-size: 1.2rem;"></i>
                                <h5 class="mb-0 fw-bold" style="color: #dc3545;">Low Stock Alert!</h5>
                                <a href="/web#action=stock.product_template_action_product" class="ms-auto text-decoration-none small fw-bold" style="color: #dc3545;">
                                    Manage Inventory <i class="fa fa-arrow-right ms-1"></i>
                                </a>

                            </div>
                            <div class="d-flex flex-wrap gap-2">
                                <t t-foreach="low_stock_products" t-as="product">
                                    <div class="badge rounded-pill bg-white border px-3 py-2 shadow-sm" style="color: #333;">
                                        <span class="fw-bold" t-esc="product.name"/>: 
                                        <span class="text-danger fw-bold" t-esc="product.qty_available"/> 
                                        <span class="text-muted" t-esc="product.uom_id.name"/>
                                    </div>
                                </t>
                            </div>
                        </div>
                    </t>

                    <div class="o_apps">

                        <t t-foreach="menus" t-as="menu">
                            <t t-set="app_url" t-value="'/web#menu_id=' + str(menu.id)"/>
                            <!-- Check if it is the Website app by checking the icon module or name -->
                            <t t-if="(menu.web_icon and menu.web_icon.startswith('website,')) or menu.name == 'Website'">
                                <t t-set="app_url" t-value="'/home'"/>
                            </t>
                            <a t-att-href="app_url" class="o_app">
                                <div class="o_app_icon_container">
                                    <t t-if="menu.web_icon">
                                        <t t-set="icon_data" t-value="menu.web_icon.split(',')"/>
                                        <img t-attf-src="/{{icon_data[0]}}/{{icon_data[1]}}" 
                                             class="o_app_icon" loading="lazy"
                                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"/>
                                        <div class="o_app_icon fa fa-cube" style="font-size: 40px; color: #7c7bad; display: none;"/>
                                    </t>
                                    <t t-else="">
                                        <div class="o_app_icon fa fa-cube" style="font-size: 40px; color: #7c7bad;"/>
                                    </t>
                                </div>
                                <div class="o_app_name">
                                    <t t-esc="menu.name"/>
                                </div>
                            </a>
                        </t>
                    </div>
                </div>
            </div>
        </t>
    </template>
</odoo>

