@inherits ViewModelTemplate<FavoriteListListViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Frontend
@using Dynamicweb.Ecommerce.Frontend
@using Dynamicweb.Ecommerce.ProductCatalog

@{
    var baseUrl = Dynamicweb.Context.Current?.Request.QueryString.Get("baseUrl") ?? null;
}

@* If no favorite lists are found, show a message *@
@if (!(Model?.FavoriteLists?.Any() ?? false))
{
    <div class="vstack text-center fs-7 fw-semibold gap-2">
        
        <div class="d-grid rounded-circle m-auto" style="aspect-ratio:1;background-color:rgba(var(--bs-body-color-rgb), .0275);">
            <span class="icon fs-5 text-muted p-3">
                @ReadFile("/Files/Images/Icons/heart.svg")
            </span>
        </div>
        <div>@Translate("No lists found")</div>
        
    </div>
    return;
}
<div class="list-group list-group-flush">
    @foreach (var favoriteList in Model.FavoriteLists)
    {
        <a class="list-group-item list-group-item-action px-0 py-3 d-flex flex-wrap align-items-center gap-2 gap-sm-3 text-decoration-none text-body"
            href="@(baseUrl)?FavoriteListId=@(favoriteList.Id)"
            tabindex="@(baseUrl is not null ? 0 : -1)"
            aria-disabled="@(baseUrl is not null)"
        >
            <div class="flex-grow-1 min-w-0">
                <div class="fs-7 fw-semibold text-body">@(!string.IsNullOrEmpty(favoriteList?.Name) ? favoriteList.Name : (Translate("Untitled") + " #" + favoriteList?.Id))</div>
                <div class="fs-8 text-muted text-truncate">
                    <span>@(favoriteList?.ProductList.Products.Count) @(favoriteList?.ProductList.Products.Count == 1 ? Translate("item") : Translate("items"))</span>
                </div>
            </div>
            <div class="d-flex justify-content-end gap-1">
                @if (favoriteList?.ProductList.Products.Any() ?? false)
                {
                    foreach (var product in favoriteList.ProductList.Products.Take(3))
                    {
                        @if(product?.DefaultImage?.TryGetImageFileViewModel(out var image) is true)
                        {
                            <div class="d-flex img-thumbnail" style="aspect-ratio: 1;">
                                <img class="img-fluid mh-100 m-auto" src="@(image?.ToGetImage(new(){Height = 30, Width = 30, Ratio = "1/1", Crop = Dynamicweb.Imaging.ImageHandling.CropMode.KeepAspectRatio }))" alt="@product?.Name" loading="lazy" decoding="async">
                            </div>
                        }
                    }
                    if(favoriteList.ProductList.Products.Count > 3)
                    {
                        
                        <div class="d-flex img-thumbnail bg-secondary-subtle" style="aspect-ratio: 1; width: 40px;">
                            <span class="icon text-muted m-auto d-flex align-items-center justify-content-center gap-0 fs-8 p-0 fw-semibold">
                                @ReadFile("/Files/Images/Icons/plus.svg")
                                @(favoriteList.ProductList.Products.Count - 3)
                            </span>
                        </div>
                        
                    }
                }
            </div>
        </a>
    }
</div>