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

@{
    var baseUrl = SearchEngineFriendlyURLs.GetFriendlyUrl($"default.aspx?ID={Pageview?.Page?.ID}");
}

<div data-swift-favorites-list>
    <header class="hstack gap-3 mb-4 flex-wrap">
        <h1 class="h4 mb-0 flex-fill">@(Pageview?.Page?.GetDisplayName() ?? string.Empty)</h1>

        <button type="button" class="btn btn-sm btn-primary hstack gap-2 ms-auto py-2 px-3" data-dw-button
            hx-trigger="click"
            hx-get="@(baseUrl)"
            hx-vals='{"LayoutTemplate": "/Designs/Swift-v2/eCom/CustomerExperienceCenter/Favorites/Modals/CreateFavoriteListModal.cshtml"}'
            hx-target="main"
            hx-swap="beforeend">
            <span class="icon text-opacity-50">
                @ReadFile("/Files/Images/Icons/plus.svg")
            </span>
            @Translate("Add list")
        </button>

    </header>

    @if (Model.FavoriteLists is not null)
    {
        if (Model.FavoriteLists.Count > 0)
        {
            <div class="d-grid gap-3" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));">
                @foreach (var favoriteList in Model.FavoriteLists)
                {
                    <div class="card shadow-hover">
                        <a href="@(baseUrl)?FavoriteListId=@(favoriteList.Id)" class="stretched-link"></a>
                        <div class="card-body">
                            <div class="hstack">
                                <h6 class="m-0">@(!string.IsNullOrEmpty(favoriteList.Name) ? favoriteList.Name : (Translate("Untitled") + " #" + favoriteList.Id))</h6>
                                @if(favoriteList.IsDefault) { <span class="badge lh-sm badge-neutral-light ms-2">@Translate("Default")</span> }
                                <button type="button" class="btn btn-icon ms-auto position-relative z-2" data-dw-button data-bs-toggle="dropdown" aria-expanded="false" data-bs-popper-config='{"strategy":"fixed", "placement":"bottom-end"}'>
                                    <span class="icon">
                                        @ReadFile("/Files/Images/Icons/ellipsis.svg")
                                    </span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <button type="button" class="dropdown-item hstack gap-2"
                                            hx-get="/dwapi/ecommerce/favorites/lists/@(favoriteList?.Id)"
                                            hx-headers='{"x-dw-template": "/Designs/Swift-v2/eCom/CustomerExperienceCenter/Favorites/Modals/RenameFavoriteListModal.cshtml", "x-dw-culture": "@Pageview?.Area?.CultureInfo?.Name", "accept": "text/html"}'
                                            hx-target="main"
                                            hx-swap="beforeend"
                                            hx-ext="swift-auth">
                                            <span class="icon fs-6">
                                                @ReadFile("/Files/Images/Icons/pen.svg")
                                            </span>
                                            @Translate("Edit")
                                        </button>
                                    </li>
                                    <li>
                                        <button type="button" class="dropdown-item hstack gap-2"
                                            hx-get="?favoritecmd=favoritelistsetdefault&userid=@(Pageview?.User?.ID)&favoritelistid=@(favoriteList?.Id)"
                                            hx-select="[data-swift-favorites-list]"
                                            hx-target="[data-swift-favorites-list]"
                                            hx-swap="outerHTML"
                                            hx-replace-url="false"
                                            disabled="@(favoriteList?.IsDefault ?? false)"
                                            >
                                            <span class="icon fs-6">
                                                @ReadFile("/Files/Images/Icons/star.svg")
                                            </span>
                                            @Translate("Set as default")
                                        </button>
                                    </li>
                                    <li>
                                    <hr class="dropdown-divider my-1">
                                    </li>                   
                                    <li>
                                        <button type="button" class="dropdown-item hstack gap-2 text-danger"
                                            hx-get="/dwapi/ecommerce/favorites/lists/@(favoriteList?.Id)"
                                            hx-vals='{"userId": @(Pageview?.User?.ID)}'
                                            hx-headers='{"x-dw-template": "/Designs/Swift-v2/eCom/CustomerExperienceCenter/Favorites/Modals/DeleteFavoriteListModal.cshtml", "x-dw-culture": "@Pageview?.Area?.CultureInfo?.Name", "accept": "text/html"}'
                                            hx-target="main"
                                            hx-swap="beforeend"
                                            hx-ext="swift-auth"
                                            hx-replace-url="false"
                                            >
                                            <span class="icon fs-6">
                                                @ReadFile("/Files/Images/Icons/trash-can.svg")
                                            </span>
                                            @Translate("Delete")
                                        </button>
                                    </li>                        
                                </ul>
                            </div>
                            <p class="text-muted fs-7">@(!string.IsNullOrEmpty(favoriteList?.Description) ? favoriteList.Description : "-")</p>
                            <div class="d-grid gap-1" style="grid-template-columns: repeat(5, 2.7rem);">
                                @if (favoriteList?.ProductList?.Products.Any() is true)
                                {
                                    foreach (var product in favoriteList.ProductList.Products.Take(4))
                                    {
                                        @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 = 40, Width = 40, Ratio = "1/1", Crop = Dynamicweb.Imaging.ImageHandling.CropMode.KeepAspectRatio }))" alt="@product?.Name" loading="lazy" decoding="async">
                                            </div>
                                        }
                                    }
                                    if(favoriteList.ProductList.Products.Count > 4)
                                    {
                                        <div class="d-flex img-thumbnail bg-secondary-subtle" style="aspect-ratio: 1;">
                                            <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 - 4)
                                            </span>
                                        </div>
                                    }
                                }
                            </div>
                            <div class="hstack justify-content-between text-muted fs-7 mt-3">
                                <div>@(favoriteList?.ProductList?.TotalProductsCount) @Translate(favoriteList?.ProductList?.TotalProductsCount == 1 ? "product" : "products")</div>
                                @if (favoriteList?.Created is not null)
                                {
                                    <div>@(Translate("Created")) @(favoriteList?.Created?.ToString(Pageview?.Area?.CultureInfo?.DateTimeFormat?.ShortDatePattern))</div>
                                }
                            </div>

                        </div>
                    </div>
                }
            </div>
        }
        else
        {
            <div class="card">
                <div class="card-body text-center py-5 fs-7">
                    <div data-swift-empty-state>
                        <div data-swift-empty-state-icon>
                            <span class="icon">
                                @ReadFile("/Files/Images/Icons/heart.svg")
                            </span>
                        </div>
                        <div>@Translate("No favorites found")</div>
                    </div>
                </div>
            </div>
        }
    }

    @if (Model.PageCount > 1)
    {
        <div class="hstack justify-content-between mt-3">
            <div class="text-muted fs-7">
                @Translate("Showing page") @(Model.CurrentPage) @Translate("of") @(Model.PageCount)
            </div>

            <div class="hstack gap-2">
                <button type="submit" class="btn btn-outline-secondary text-body hstack p-2" name="PageNum" value="@(Model.CurrentPage - 1)" data-dw-button disabled="@(Model.CurrentPage == 1)" hx-get="@(baseUrl)" hx-target="[data-swift-favorites-list]" hx-select="[data-swift-favorites-list]" hx-swap="outerHTML" hx-replace-url="true">
                    <span class="icon">
                        @ReadFile("/Files/Images/Icons/chevron-left.svg")
                    </span>
                </button>
                <button type="submit" class="btn btn-outline-secondary text-body hstack p-2" name="PageNum" value="@(Model.CurrentPage + 1)" data-dw-button disabled="@(Model.CurrentPage == Model.PageCount)" hx-get="@(baseUrl)" hx-target="[data-swift-favorites-list]" hx-select="[data-swift-favorites-list]" hx-swap="outerHTML" hx-replace-url="true">
                    <span class="icon">
                        @ReadFile("/Files/Images/Icons/chevron-right.svg")
                    </span>
                </button>
            </div>
        </div>
    }
</div>