@model int
@inject IWorkContext workContext
@{
    var supportRtl = workContext.WorkingLanguage.Rtl;
}
<li class="nav-item">
    <ul class="sidebar-cart wishlist px-0">
        <li class="nav-item">
            <a href="#" target="_self" class="nav-link">
                <b-icon icon="heart" :variant="[darkMode ? 'white' : 'dark']" @@click="updateWishlist('@Url.RouteUrl("SidebarWishlist")')" v-b-toggle.sidebar-wishlist></b-icon>
                <span class="qty-indicator wishlist-qty" ref="wishlistQty">
                    @Loc["Wishlist.HeaderQuantity", Model]
                </span>
            </a>
        </li>
        <template>
            <li>
                <b-sidebar id="sidebar-wishlist" backdrop @if (!supportRtl) { <text>right</text> }>
                    <template v-slot:title v-if="wishindicator > 0">
                        @Html.Raw(string.Format(Loc["Wishlist.Mini.ItemsText"], string.Format("<a href=\"{0}\">{1}</a>", Url.RouteUrl("Wishlist"), string.Format(Loc["Wishlist.Mini.Items"], "{{wishindicator}}"))))
                    </template>
                    <template v-slot:title v-else>
                        @Loc["Wishlist.Mini.NoItems"]
                    </template>
                    <div class="d-flex justify-content-center align-items-center h-100" v-if="loader">
                        <div class="spinner-border text-info" role="status">
                        </div>
                    </div>
                    <div v-for="item in wishlistitems" class="item d-inline-flex no-wrap">
                        <a :href="item.ProductUrl" :title="item.Picture.Title" v-if="item.Picture.ImageUrl">
                            <b-img :alt="item.Picture.AlternateText" :src="item.Picture.ImageUrl" :title="item.Picture.Title" fluid></b-img>
                        </a>
                        <div class="col">
                            <a :href="item.ProductUrl">{{item.ProductName}}</a>
                            <div class="attributes p-2" v-if="item.AttributeInfo">
                                <div v-html="item.AttributeInfo"></div>
                            </div>
                            <div class="price"><span>@Loc["Wishlist.Mini.UnitPrice"]:</span> <strong>{{item.UnitPrice}}</strong></div>
                            <div class="quantity"><span>@Loc["Wishlist.Mini.Quantity"]:</span> <strong>{{item.Quantity}}</strong></div>
                        </div>
                    </div>
                    <template v-slot:footer v-if="wishindicator > 0">
                        <template v-if="flywish !== undefined">
                            <div class="col-12 p-3 bg-dark">
                                <div class="form-row">
                                    <div class="col-lg col-12">
                                        <a class="btn btn-light d-flex align-items-center justify-content-center w-100 h-100 py-3 text-uppercase" href="@Url.RouteUrl("Wishlist")">
                                            <b-icon icon="heart" class="@if (supportRtl) { <text>pl-2</text> } else { <text>pr-2</text> }"></b-icon>
                                            @Loc["Wishlist"]
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </template>
                    <template v-else>
                        <div class="d-flex flex-column justify-content-center align-items-center">
                            <b-icon icon="cart-x" font-scale="7.5" variant="secondary"></b-icon>
                            <div class="text-center text-muted mt-3">@Loc["Wishlist.Mini.NoDataText"]</div>
                        </div>
                    </template>
                </b-sidebar>
            </li>
        </template>
    </ul>
</li>