@using Biskilog_Accounting.Shared.CustomModels;
@using Biskilog_Accounting.Shared.Interfaces;
@using Microsoft.Fast.Components.FluentUI
@inject ICalculator m_calculator

@if(!IsLoading)
{
    <div class="card h-100">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="card-title m-0 me-2">Low Stock Items</h5>
        </div>
        <div class="card-body" style="padding:5px !important;">
            <RadzenDataGrid Data="@LowStockProducts" TItem="ProductItem" AllowPaging="true" AllowSorting="true" PageSize="5" GridLines="DataGridGridLines.Horizontal">
            <Columns>
                <RadzenDataGridColumn TItem="ProductItem" Property="Product" Title="Product">
                    <Template Context="detail">
                        <RadzenRow>
                            <RadzenColumn>
                                <span> <b>@detail.Product!.ProductName</b></span> <br />
                                <span> @detail.Product.Pcode</span>
                            </RadzenColumn>
                            <RadzenColumn style="justify-content:end !important;">
                                <span><b>Quantity left:</b> @(detail.Stock.Quantity) @(detail.BaseUnit)</span>
                            </RadzenColumn>
                        </RadzenRow>
                    </Template>
                </RadzenDataGridColumn>
            </Columns>
        </RadzenDataGrid>
        </div>
    </div>
}else{
     <FluentCard class="card-padding">
    <FluentSkeleton style="border-radius: 4px; width: 50px; height: 50px;" Shape="SkeletonShape.Circle" Shimmer="true"></FluentSkeleton>
    <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect" Shimmer="true"></FluentSkeleton>
    <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect" Shimmer="true"></FluentSkeleton>
    <FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="SkeletonShape.Rect" Shimmer="true"></FluentSkeleton>
    <FluentSkeleton style="
                border-radius: 4px;
                width: 75px;
                height: 30px;
                margin-top: 20px;
                margin-bottom: 10px;
            "
                    Shape="SkeletonShape.Rect"
                    Shimmer="true"></FluentSkeleton>
</FluentCard>
}