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

@{
    var widgetTitle = Model?.Item?.GetString("Title") ?? Translate("Favorites");
    var baseUrl = string.Empty;
    var icon = "/Files/Images/Icons/heart.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-pink) 10%, transparent);">
                    <span class="icon fs-5" style="color: var(--bs-pink);">@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 data-swift-htmx-widget="@(Model?.ID)"
            hx-get="/dwapi/ecommerce/favorites/lists?PageSize=5&Page=1&SortBy=CreatedAt&SortOrder=Desc" 
            hx-headers='{"x-dw-template": "/Designs/Swift-v2/Paragraph/Swift-v2_Dashboard_List/Lists/Favorites.cshtml", "accept": "text/html", "x-dw-culture": "@(Pageview?.Area?.CultureInfo?.Name)"}'
            hx-vals='{"baseUrl": "@(baseUrl)"}'
            hx-ext="swift-auth"
            hx-trigger="tokenFetched.swift.authentication from:body"
            hx-swap="innerHTML">
            <div class="d-grid">
                @for (var i = 0; i < 5; i++)
                {
                    <div class="hstack gap-3 placeholder-glow py-3">
                        <div class="vstack gap-1 flex-grow-1 min-w-0">
                            <div class="placeholder bg-primary-subtle rounded-pill w-25"></div>
                            <div class="placeholder bg-primary-subtle rounded-pill w-50"></div>
                        </div>
                        <div class="placeholder bg-primary-subtle rounded-pill w-100" style="max-width: 35px;"></div>
                        <div class="placeholder bg-primary-subtle rounded-pill w-100" style="max-width: 90px;"></div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>