@using BTCPayServer.Plugins.Crowdfund
@model BTCPayServer.Components.AppTopItems.AppTopItemsViewModel
@{
    var label = Model.AppType == CrowdfundAppType.AppType ? "contribution" : "sale";
}

<div id="AppTopItems-@Model.Id" class="widget app-top-items">
    <header class="mb-3">
        <h3>Top @(Model.AppType == CrowdfundAppType.AppType ? "Perks" : "Items")</h3>
    </header>
    @if (Model.InitialRendering)
    {
        <div class="loading d-flex justify-content-center p-3">
            <div class="spinner-border text-light" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <script src="~/Components/AppTopItems/Default.cshtml.js" asp-append-version="true"></script>
        <script>
		(async () => {
			const url = @Safe.Json(Model.DataUrl);
			const appId = @Safe.Json(Model.Id);
			const response = await fetch(url);
			if (response.ok) {
				document.getElementById(`AppTopItems-${appId}`).outerHTML = await response.text();
				const data = document.querySelector(`#AppTopItems-${appId} template`);
				if (data) window.appTopItems.dataLoaded(JSON.parse(data.innerHTML));
			}
		})();
	    </script>
    }
    else if (Model.Entries.Any())
    {
        <div class="ct-chart mb-3"></div>
        <template>
            @Safe.Json(Model)
        </template>
        <div class="app-items">
            @for (var i = 0; i < Model.Entries.Count; i++)
            {
                var entry = Model.Entries[i];
                <div class="app-item ct-series-@i">
                    <span class="app-item-name">
                        <span class="app-item-point ct-point"></span>
                        @entry.Title
                    </span>
                    <span class="app-item-value" data-sensitive>
                        <span class="text-muted">@entry.SalesCount @($"{label}{(entry.SalesCount == 1 ? "" : "s")}"),</span>
                        @entry.TotalFormatted
                    </span>
                </div>
            }
        </div>
    }
    else
    {
        <p class="text-secondary mt-3">
            No @($"{label}s") have been made yet.
        </p>
    }
</div>