@using BTCPayServer.Components.AppSales
@using BTCPayServer.Abstractions.TagHelpers
@using BTCPayServer.Plugins.Crowdfund
@model BTCPayServer.Components.AppSales.AppSalesViewModel

<div id="AppSales-@Model.Id" class="widget app-sales">
    <header class="mb-3">
        <h3>
            @Model.Name
            @if (Model.AppType == CrowdfundAppType.AppType)
            {
                <span text-translate="true">Contributions</span>
            }
            else
            {
                <span text-translate="true">Sales</span>
            }
        </h3>
        @if (!string.IsNullOrEmpty(Model.AppUrl))
        {
            <a href="@Model.AppUrl" text-translate="true">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" text-translate="true">Loading...</span>
            </div>
        </div>
        <script src="~/Components/AppSales/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(`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>
                @if (Model.AppType == CrowdfundAppType.AppType)
                {
                    <span text-translate="true">Total Contributions</span>
                }
                else
                {
                    <span text-translate="true">Total Sales</span>
                }
            </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>