@* Usage: @await Html.PartialAsync("_Metric", (Label: "Active Jobs", Value: "24", Delta: "+3", DeltaDir: "up"))
   DeltaDir: "up" (green arrow-up-right) | "down" (red arrow-down-right) | null (no delta) *@
@model (string Label, string Value, string? Delta, string? DeltaDir)
<div class="pcl-metric">
    <span class="pcl-metric-kicker">@Model.Label</span>
    <span class="pcl-metric-value">@Model.Value</span>
    @if (!string.IsNullOrEmpty(Model.Delta))
    {
        var dir = Model.DeltaDir ?? "up";
        var icon = dir == "down" ? "bi-arrow-down-right" : "bi-arrow-up-right";
        <span class="pcl-metric-delta @dir">
            <i class="bi @icon"></i>@Model.Delta
        </span>
    }
</div>