@inherits ViewModelTemplate<ParagraphViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Frontend

@*
    Scaffold template for product-based dashboard widgets (e.g. Top bought products) — #28477.
    Follows the same card shell pattern as the List/Number/Chart dashboard widgets.
    Replace the placeholder body below with the actual widget content + HTMX data partial
    once the product widget data source is implemented.
*@

@{
    var widgetTitle = Model?.Item?.GetString("Title") ?? Translate("Products");
    var baseUrl = string.Empty;
    var icon = "/Files/Images/Icons/cube.svg";

    if ((Model?.Item?.TryGetLink("BaseLink", out var baseLinkViewModel) ?? false))
    {
        baseUrl = baseLinkViewModel.Url;
        var basePageId = baseLinkViewModel?.PageId ?? 0;
        var basePage = Dynamicweb.Content.Services.Pages.GetPage(basePageId);
        var basePageIcon = basePage?.Icon;
        icon = !string.IsNullOrEmpty(basePageIcon) ? basePageIcon : icon;
    }
}

<div class="card h-100" style="--swift-content-padding: 1.25rem;">
    <div class="card-body">
        <div class="hstack gap-3 mb-3">
            <div class="hstack gap-2 flex-grow-1">
                <div class="d-grid p-2 rounded-2" style="background-color: color-mix(in srgb, var(--bs-blue) 10%, transparent);">
                    <span class="icon fs-5" style="color: var(--bs-blue);">@ReadFile(icon)</span>
                </div>
                <h2 class="h6 mb-0 fw-semibold">@(widgetTitle)</h2>
            </div>
            @if (!string.IsNullOrEmpty(baseUrl))
            {
                <a class="fs-8 fw-semibold text-decoration-none text-muted text-decoration-underline-hover" href="@(baseUrl)">@Translate("View all") →</a>
            }
        </div>

        <div class="vstack text-center fs-7 fw-semibold gap-2 text-muted">
            @Translate("Product widget — to be implemented.")
        </div>
    </div>
</div>
