@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">Last 50 Transactions</h5>
        </div>
        <div class="card-body" style="padding:5px !important;">
            <RadzenDataGrid Data="@Sales" TItem="SaleItem" AllowPaging="true" AllowSorting="true">
                <Columns>
                    <RadzenDataGridColumn TItem="SaleItem" Property="Transno" Title="Receipt#" />
                    <RadzenDataGridColumn TItem="SaleItem" Property="Date" Title="Timestamp" />
                    <RadzenDataGridColumn TItem="SaleItem" Property="Total" Title="Total">
                        <Template Context="detail">
                            @(
                                m_calculator.FormatMoneyWithCurrencyKilo((double)detail.Total)
                                )
                        </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>
}
<style>
    .rz-datatable-thead th, .rz-grid-table thead th {
        background-color: #a4d5d3;
        padding: 0;
        color: white;
    }

    .rz-datatable {
        border: none !important;
    }
</style>