{% load i18n %}
{% load wishlist_tags %}

{% if user.is_authenticated %}
{% with wishlists=user.wishlists.all %}
{# Select wishlists that contains product #}
{% wishlists_containing_product wishlists product as product_wishlists %}
{% if wishlists %}
<div class="dropdown btn-dropdown wishlist-wrapper">
    <button class="btn btn-light dropdown-toggle no-caret" id="wishlistDropdown" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fa fa-heart-solid"></i>
    </button>
    <ul class="dropdown-menu" aria-labelledby="wishlistDropdown">
        {% for wishlist in product_wishlists %}
        <li>
            <form action="{% url 'customer:wishlists-remove-product' key=wishlist.key product_pk=product.id %}" method="post">
                {% csrf_token %}
                
                <button type="submit" class="dropdown-item" formaction="{% url 'customer:wishlists-remove-product' key=wishlist.key product_pk=product.id %}" data-loading-text="{% trans 'Removing...' %}">
                    <i class="fa fa-minus"></i>
                    <span class="dropdown-text">
                        {{ wishlist.name }}
                    </span>
                </button>
            </form>
        </li>
        {% endfor %}
        {% for wishlist in wishlists %}
        {% if wishlist not in product_wishlists %}
        <li>
            <a href="{% url 'customer:wishlists-add-product' key=wishlist.key product_pk=product.pk %}" class="dropdown-item">
                <i class="fa fa-plus"></i> 
                <span class="dropdown-text">{{ wishlist.name }}</span>
            </a>
        </li>
        {% endif %}
        {% endfor %}
        <div class="dropdown-divider"></div>
        <li>
            <a href="{% url 'customer:wishlists-create-with-product' product_pk=product.pk %}" class="dropdown-item">
                <i class="fa fa-plus"></i>
                <span class="dropdown-text">
                    {% trans 'Create a new wishlist' %}
                </span>
            </a>
        </li>
    </ul>
</div>
{% else %}
{# 1 or no existing wishlists - show a simple button #}
<div class="wishlist-wrapper">
    <a href="{% url 'customer:wishlists-add-product' product_pk=product.pk %}" class="btn btn-light dropdown-toggle no-caret" data-loading-text="{% trans 'Adding...' %}">
        <i class="fa fa-heart-solid"></i>
    </a>
</div>
{% endif %}
{% endwith %}
{% endif %}