<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="owl.OwlFGDashboard" owl="1">
        <div class="vh-100 overflow-auto bg-muted">
            <div class="row m-3">
                <div class="col-lg-7">
                    <div class="row">
                        <div class="col m-0 p-0">
                            <div class="shadow-sm border m-2 p-4 bg-white">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h1 class="text-primary fw-bold">FG Dashboard</h1>
                                    <div>
                                        <label for="totalvalue" style="font-weight: bold;" class="text-primary fw-bold">Total Quantity:</label> 
<div 
    t-att-class="state.isReadOnly ? 'text-primary fw-bold readonly' : 'text-primary fw-bold'" 
    t-att-title="state.isReadOnly ? 'This field is read-only' : ''" 
    style="text-shadow: 0.5px 0.5px #4b4b4c;font-size: 20px;">
    <t t-esc="state.orders.totalstockQty"/>
    </div>                                      </div>
                                    <div>
                                        <label for="totalvalue" style="font-weight: bold;" class="text-primary fw-bold">Total Value:</label>                                         
<div 
    t-att-class="state.isReadOnly ? 'text-primary fw-bold readonly' : 'text-primary fw-bold'" 
    t-att-title="state.isReadOnly ? 'This field is read-only' : ''" 
    style="text-shadow: 0.5px 0.5px #4b4b4c; font-size: 20px;">
    <t t-esc="state.orders.totalstockVal"/>
</div>                                      </div>
                                </div>
                                
                                <div>  
                                    <table class="table_custom" style="margin-top: 15px;">
                                    <tr style="background-color: lavender;">
                                            <t t-foreach="state.orders.lables" t-as="item" t-key="item.id">
                                                <th class="text-primary fw-bold"><t t-esc="item" /></th>
                                            </t>
                                        </tr> 
                                        <tr>
                                            <t t-foreach="state.orders.stockval" t-as="item" t-key="item.id">
                                                <td class="text-primary fw-bold"><t t-esc="item.toFixed(3)" /></td>
                                            </t>
                                        </tr>
                                    </table>
                                </div>

                            </div>
                        </div>
                        
                    </div>
                    
                    <div class="row">
                        <div class="col-lg-6 m-0 p-0">
                            <div class="shadow-sm border m-2 p-4 bg-white">
                                <div class="d-flex align-items-center justify-content-between">
                                    
                                </div>
                                <ChartRenderer type="'pie'" title="'FG Quantity'" label="'FG Quantity'" data-labels="state.orders.lables" value="state.orders.stockqty"/>
                            </div>
                        </div>
                        <div class="col-lg-6 m-0 p-0">
                            <div class="shadow-sm border m-2 p-4 bg-white">
                                <div class="d-flex align-items-center justify-content-between">
                                    
                                </div>
                                <ChartRenderer type="'pie'" title="'FG Value'" label="'FG Value'" data-labels="state.orders.lables" value="state.orders.stockval"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="row">
                        <div class="col m-0 p-0">
                            <div class="shadow-sm border m-2 p-4 bg-white">
                                <div class="d-flex align-items-center justify-content-between">
                                    
                                </div>
                                <ChartRenderer type="'bar'" title="'FG Quantity'" label="'FG Quantityyyy'" data-labels="state.orders.lables" value="state.orders.stockqty"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col m-0 p-0">
                            <div class="shadow-sm border m-2 p-4 bg-white">
                                <div class="d-flex align-items-center justify-content-between">
                                </div>
                                <ChartRenderer type="'bar'" title="'FG Value'" label="'FG Valueeee'" data-labels="state.orders.lables" value="state.orders.stockval"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t>
</templates>