@inherits ViewModelTemplate<SavedCardListViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.Frontend.SavedCards
@using Dynamicweb.Frontend

@{
    string baseUrl = SearchEngineFriendlyURLs.GetFriendlyUrl($"default.aspx?ID={Pageview.Page.ID}");
    string currentSortBy = Dynamicweb.Context.Current?.Request.QueryString.Get("SortBy") ?? Pageview.CurrentParagraph?.ModuleProperties?.GetValue("SortByField") ?? string.Empty;
    string currentSortOrder = Dynamicweb.Context.Current?.Request.QueryString.Get("SortOrder") ?? Pageview.CurrentParagraph?.ModuleProperties?.GetValue("SortOrder") ?? string.Empty;
    string nextSortOrder = currentSortOrder == "asc" ? "desc" : "asc";
    string arrow = currentSortOrder == "asc" ? @ReadFile("/Files/Images/Icons/arrow-up.svg") : @ReadFile("/Files/Images/Icons/arrow-down.svg");
}

<header class="hstack gap-3 space-between mb-4">
    <h1 class="h4 mb-0">@(Pageview.Page.GetDisplayName())</h1>
    <button type="button" 
            class="btn btn-sm btn-primary hstack gap-2 ms-auto py-2 px-3" 
            data-dw-button
            hx-get="@(baseUrl)"
            hx-vals='{"LayoutTemplate": "/Designs/Swift-v2/eCom/CustomerExperienceCenter/SavedCards/Modals/AddCreditCardModal.cshtml"}'
            hx-target="main"
            hx-swap="beforeend"
            hx-replace-url="false">
        <span class="icon-2 text-opacity-50">
            @ReadFile("/Files/Images/Icons/plus.svg")
        </span>
        @Translate("Add card")
    </button>
</header>

<div data-swift-saved-cards-list>
    <div class="card overflow-hidden">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>@Translate("Payment method") </th>
                        <th>@Translate("Name")</th>
                        <th>@Translate("Actions")</th>
                    </tr>
                </thead>
                <tbody>

                    @foreach (var card in Model.SavedCardList)
                    {
                        <tr class="position-relative">
                            <td>
                                <div class="hstack gap-2">
                                    @if (card.Payment.Icon.EndsWith(".svg", StringComparison.OrdinalIgnoreCase)) {
                                        <span class="icon-2">
                                            @ReadFile(card.Payment.Icon)
                                        </span>
                                    }
                                    <span title="@card.Payment.Name">@card.CardType</span>
                                    <span>•••• •••• •••• @(card.Identifier.Length >= 4 ? card.Identifier.Substring(card.Identifier.Length - 4) : card.Identifier)</span>
                                    @if (card.IsDefault) {
                                        <span class="icon-2 text-success" title="@Translate("Default payment method")">
                                            @ReadFile("/Files/Images/Icons/circle-check.svg")
                                        </span>
                                    }
                                </div>
                            </td>
                            <td>@card.Name</td>
                            <td class="text-end">
                                <div class="hstack gap-3">
                                    <button class="btn btn-icon position-relative z-2" data-dw-button type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-popper-config='{"strategy":"fixed", "placement":"bottom-end"}'>
                                        <span class="icon-2">
                                            @ReadFile("/Files/Images/Icons/ellipsis.svg")
                                        </span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <button type="button" class="dropdown-item hstack gap-2 ps-2 pe-3 rounded-1"
                                                hx-get="@(baseUrl)"
                                                hx-vals='{"SavedCardId": "@(card.ID)", "LayoutTemplate": "/Designs/Swift-v2/eCom/CustomerExperienceCenter/SavedCards/Modals/SetAsDefaultModal.cshtml"}'
                                                hx-target="main"
                                                hx-swap="beforeend"
                                                hx-replace-url="false">
                                                <span class="icon-2">
                                                    @ReadFile("/Files/Images/Icons/circle-check.svg")
                                                </span>
                                                @Translate("Set as default")
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="dropdown-item hstack gap-2 ps-2 pe-3 rounded-1"
                                                hx-get="@(baseUrl)"
                                                hx-vals='{"SavedCardId": "@(card.ID)", "SavedCardName": "@(card.Name)", "LayoutTemplate": "/Designs/Swift-v2/eCom/CustomerExperienceCenter/SavedCards/Modals/RenameCardModal.cshtml"}'
                                                hx-target="main"
                                                hx-swap="beforeend"
                                                hx-replace-url="false">
                                                <span class="icon-2">
                                                    @ReadFile("/Files/Images/Icons/pen.svg")
                                                </span>
                                                @Translate("Edit")
                                            </button>
                                        </li>
                                        <li class="mx-n1"><hr class="dropdown-divider my-1"></li>
                                        <li>
                                            <button type="button" class="dropdown-item hstack gap-2 ps-2 pe-3 rounded-1 text-danger"
                                                hx-get="@(baseUrl)"
                                                hx-vals='{"SavedCardId": "@(card.ID)", "LayoutTemplate": "/Designs/Swift-v2/eCom/CustomerExperienceCenter/SavedCards/Modals/DeleteCardModal.cshtml"}'
                                                hx-target="main"
                                                hx-swap="beforeend"
                                                hx-replace-url="false">
                                                <span class="icon-2">
                                                    @ReadFile("/Files/Images/Icons/trash.svg")
                                                </span>
                                                @Translate("Delete")
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    }

                    @if (Model.SavedCardList.Count() < 1)
                    {
                        <tr class="position-relative">
                            <td class="text-center py-5" colspan="5">
                                <div data-swift-empty-state>
                                    <div data-swift-empty-state-icon>
                                        <span class="icon">
                                            @ReadFile("/Files/Images/Icons/credit-card.svg")
                                        </span>
                                    </div>
                                    <div>@Translate("No cards found")</div>
                                </div>
                            </td>
                        </tr>
                    }

                </tbody>
            </table>
        </div>
    </div>

    @if (Model.PageCount > 1)
    {
        <form 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)">
                    <span class="icon-2">
                        @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)">
                    <span class="icon-2">
                        @ReadFile("/Files/Images/Icons/chevron-right.svg")
                    </span>
                </button>
            </div>
        </form>
    }
</div>