{% sw_extends '@Storefront/storefront/layout/header/actions/wishlist-widget.html.twig' %}

{% block layout_header_actions_wishlist_widget %}
    {% set showCounter = showCounter ?? true %}

    {% if showCounter %}
        <span class="header-wishlist-icon">
           
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.24 18.9"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M11.13,19l-9.2-9.2A5.71,5.71,0,0,1,6,0H6a5.65,5.65,0,0,1,4,1.7l1.12,1.12,1.12-1.12a5.7,5.7,0,0,1,8.08,0h0a5.71,5.71,0,0,1,0,8.07ZM6,1.79A3.92,3.92,0,0,0,3.16,8.45l8,8,7.92-7.92a3.91,3.91,0,0,0,0-5.53h0a4,4,0,0,0-5.53,0l-2.4,2.39L8.73,3A3.87,3.87,0,0,0,6,1.79Z"/></svg>
        </span>
    {% endif %}

    {% set wishlistStorageOptions = {
        listPath: path('frontend.wishlist.product.list'),
        mergePath: path('frontend.wishlist.product.merge'),
        pageletPath: path('frontend.wishlist.product.merge.pagelet'),
    } %}

    {% set wishlistWidgetOptions = { showCounter: showCounter } %}

    <span class="badge badge-primary header-wishlist-badge"
          id="wishlist-basket"
          data-wishlist-storage="true"
          data-wishlist-storage-options="{{ wishlistStorageOptions|json_encode }}"
          data-wishlist-widget="true"
          data-wishlist-widget-options="{{ wishlistWidgetOptions|json_encode }}"
          aria-labelledby="wishlist-basket-live-area"
    ></span>
    <span class="visually-hidden"
          id="wishlist-basket-live-area"
          data-wishlist-live-area-text="{{ 'header.wishlistAriaLiveTemplate'|trans }}"
          aria-live="polite"
    ></span>
{% endblock %}
