@using BTCPayServer.Services.Apps
@using BTCPayServer.Components.AppSales
@inject BTCPayServer.Security.ContentSecurityPolicies Csp
@model BTCPayServer.Components.AppSales.AppSalesViewModel
@{
    var controller = $"UI{Model.AppType}";
    var action = $"Update{Model.AppType}";
    var label = Model.AppType == "Crowdfund" ? "Contributions" : "Sales";
}

<div id="AppSales-@Model.Id" class="widget app-sales">
    <header class="mb-3">
        <h3>@Model.Name @label</h3>
        <a asp-controller="@controller" asp-action="@action" asp-route-appId="@Model.Id">Manage</a>
    </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/AppSales/Default.cshtml.js" asp-append-version="true"></script>
        <script>
            (async () => {
                const url = @Safe.Json(Model.Url);
                const appId = @Safe.Json(Model.Id);
                const response = await fetch(url);
                if (response.ok) {
                    document.getElementById(`AppSales-${appId}`).outerHTML = await response.text();
                    const data = document.querySelector(`#AppSales-${appId} template`);
					if (data) window.appSales.dataLoaded(JSON.parse(data.innerHTML));
                }
            })();
        </script>
    }
    else
    {
        <header class="mb-3">
            <span>
                <span class="sales-count">@Model.SalesCount</span> Total @label
            </span>
            <div class="btn-group only-for-js" role="group" aria-label="Filter">
                <input type="radio" class="btn-check" name="AppSalesPeriod-@Model.Id" id="AppSalesPeriodWeek-@Model.Id" value="@AppSalesPeriod.Week" @(Model.Period == AppSalesPeriod.Week ? "checked" : "")>
                <label class="btn btn-link" for="AppSalesPeriodWeek-@Model.Id">1W</label>
                <input type="radio" class="btn-check" name="AppSalesPeriod-@Model.Id" id="AppSalesPeriodMonth-@Model.Id" value="@AppSalesPeriod.Month" @(Model.Period == AppSalesPeriod.Month ? "checked" : "")>
                <label class="btn btn-link" for="AppSalesPeriodMonth-@Model.Id">1M</label>
            </div>
        </header>
        <div class="ct-chart"></div>
        <template>
            @Safe.Json(Model)
        </template>
    }
</div>