[wishlists]
==
<div class="w-24">
    <a href="{{ 'wishlists' | page }}" class="text-grey flex flex-col items-center justify-center no-underline">
        <svg class="mall-wishlist-icon text-{{ wishlists.hasItems ? 'red' : 'grey' }} fill-current w-6 mb-2"  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 510 510"><path d="M255 489.6l-35.7-35.7C86.7 336.6 0 257.55 0 160.65 0 81.6 61.2 20.4 140.25 20.4c43.35 0 86.7 20.4 114.75 53.55C283.05 40.8 326.4 20.4 369.75 20.4 448.8 20.4 510 81.6 510 160.65c0 96.9-86.7 175.95-219.3 293.25L255 489.6z"/></svg>
        <div class="text-xs">
            {{ 'offline.mall::frontend.wishlists' | trans }}
        </div>
    </a>
</div>

{% put scripts %}
    <script>
        $(function () {
            $.subscribe('mall.wishlist.productAdded', function () {
                $('.mall-wishlist-icon').css('color', 'hsl(1.7, 76.3%, 53.7%)')
            });
        });
    </script>
{% endput %}