@model BTCPayServer.Components.AppSales.AppSalesViewModel

@{
    var action = $"Update{Model.App.AppType}";
}

<div id="AppSales-@Model.App.Id" class="widget app-sales">
    <header class="mb-3">
        <h3>@Model.App.Name Contributions</h3>
        <a asp-controller="UIApps" asp-action="@action" asp-route-appId="@Model.App.Id">Manage</a>
    </header>
    <p>@Model.SalesCount Total Contributions</p>
    <div class="ct-chart ct-major-octave"></div>
    <script>
        (function () {
            const id = 'AppSales-@Model.App.Id';
            const labels = @Safe.Json(Model.Series.Select(i => i.Label));
            const series = @Safe.Json(Model.Series.Select(i => i.SalesCount));
            const min = Math.min(...series);
            const max = Math.max(...series);
            const low = min === max ? 0 : Math.max(min - ((max - min) / 5), 0);
            new Chartist.Bar(`#${id} .ct-chart`, {
                labels,
                series: [series]
            }, {
                low,
            });
        })();
    </script>
</div>