<div id="likes-sidebar" class="popup__body position-relative d-none justify-content-end" data-js-popup-name="wishlist" data-popup-right data-js-popup-ajax>
    <div class="popup-wishlist py-25 px-20" data-popup-content>
        <div class="popup-wishlist__head d-flex align-items-center">
            <h5 class="m-0 text-uppercase">{{ __('MY WISH LIST') }} 
                <span id="sidebar-wishlist-count">( @{{ wishlist_count }} )</span>
            </h5>
            <i class="popup-wishlist__close ml-auto cursor-pointer" data-js-popup-close>
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-164" viewBox="0 0 24 24">
                    <path d="M19.583 4.965a.65.65 0 0 1-.176.449l-6.445 6.426 6.445 6.426c.117.131.176.28.176.449a.65.65 0 0 1-.176.449.846.846 0 0 1-.215.127.596.596 0 0 1-.468 0 .846.846 0 0 1-.215-.127l-6.426-6.445-6.426 6.445a.846.846 0 0 1-.215.127.596.596 0 0 1-.468 0 .846.846 0 0 1-.215-.127.65.65 0 0 1-.176-.449c0-.169.059-.318.176-.449l6.445-6.426-6.445-6.426a.65.65 0 0 1-.176-.449c0-.169.059-.318.176-.449a.652.652 0 0 1 .449-.176c.169 0 .319.059.449.176l6.426 6.445 6.426-6.445a.652.652 0 0 1 .449-.176c.169 0 .319.059.449.176.117.13.176.28.176.449z"/>
                </svg>
            </i>
        </div>
        <div class="popup-wishlist__content">
            <div class="popup-wishlist__items mt-15 border-bottom">
                @verbatim
                    <div v-for="product in likedProducts">
                        <div class="product-store-lists d-flex flex-row align-items-start mb-20" data-js-product=""
                            :data-product-handle="product.slug"
                            :data-product-variant-id="product.id"
                        >
                            <div class="product-store-lists__image mr-15">
                                <a class="d-block"
                                    :href="routeFor(product.slug)"
                                > 
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                                        :srcset="imageFor(product.image)"
                                        :alt="product.slug"
                                    >
                            </a>
                        </div>
                            <div class="product-store-lists__content d-flex flex-column align-items-start">
                                <div class="product-store-lists__title mb-3">
                                    <h3 class="h6 m-0">
                                        <a :href="routeFor(product.slug)">{{ product.name }}</a></h3></div>
                                        <div class="product-store-lists__variant">{{ product.brand?.name }}</div>
                                        <div class="product-store-lists__price mt-10 mb-10">
                                            <span class="price" data-js-product-price="" data-wg-notranslate="manual">
                                                <span>
                                                    <span class="money">{{ product.price_amount }} TMT</span>
                                                </span>
                                            </span>
                                        </div>
                                <!-- <span class="product-store-lists__remove btn-link">Aýyr</span> -->
                            </div>
                        </div>
                    </div>
                @endverbatim
            </div>
            <div class="{{-- popup-wishlist__buttons --}} mt-5">
                <a href="{{ route('web.pages.favorites') }}" class="btn btn--full text-white text-uppercase mt-20 {{-- js-popup-button --}}" {{-- data-js-popup-button="wishlist-full" --}}>{{ __('See All') }}</a>
            </div>
        </div>
        <div class="popup-wishlist__empty mt-15 d-none-important">Your wish list is empty.</div>
    </div>
</div>
