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

@if (!IsLoading)
{
    <div class="card">
        <div class="card-body">
            <div class="card-title d-flex align-items-start justify-content-between">
                <div class="avatar flex-shrink-0">
                    <img src="@Icon"
                         alt="chart success"
                         class="rounded" />
                </div>
            </div>
            <span class="fw-semibold d-block mb-1">@Title</span>
            <h6 class="card-title mb-2">@(m_calculator.FormatMoneyWithCurrency(Value))</h6>
            <small class="@(Percentage > 0 ? "text-success" : Percentage == 0 ? "bx-forward-arrow-alt" : "text-danger") fw-semibold"><i class="bx @(Percentage > 0 ? "bx-up-arrow-alt" : Percentage == 0 ? "bx-forward-arrow-alt" : "bx-down-arrow-alt")"></i> @(Percentage.ToString("0.00")) %</small>
        </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>
}