{% comment %}
  Wishlist-/Back-in-Stock-Buttons für die Produktseite.
  Wird laut Anforderung DIREKT UNTER dem Kaufen-Button (buy_buttons-Block) platziert.

  - "Zur Wunschliste hinzufügen": togglet Outline/gefüllt, reagiert auf Variantenwechsel
  - Bei mehreren Wishlists: Dropdown zur Auswahl der Ziel-Liste (erscheint erst,
    sobald der Kunde tatsächlich >1 Liste hat — sonst direktes Hinzufügen zur Standardliste)
  - "Bei Verfügbarkeit benachrichtigen": nur sichtbar, wenn die aktuell gewählte
    Variante nicht verfügbar ist
  - Gäste: Klick öffnet den Wishlist-Drawer (kein Login-Redirect), analog zum Header-Icon
{% endcomment %}

<wishlist-product-buttons
  class="wishlist-product-buttons"
  data-customer-logged-in="{% if customer %}true{% else %}false{% endif %}"
  data-product-id="{{ product.id }}"
  data-variant-id="{{ product.selected_or_first_available_variant.id }}"
  data-text-add="{{ 'wishlist.product.add' | t }}"
  data-text-added="{{ 'wishlist.product.added' | t }}"
  data-text-error="{{ 'wishlist.product.error_generic' | t }}"
  data-text-error-no-list="{{ 'wishlist.product.error_no_list' | t }}"
  data-text-notify-subscribed="{{ 'wishlist.product.notify_subscribed' | t }}"
  data-text-notify-success="{{ 'wishlist.product.notify_success' | t }}"
  data-text-notify-removed="{{ 'wishlist.product.notify_removed' | t }}"
>
  <script type="application/json" data-wishlist-variants>
    [
      {%- for variant in product.variants -%}
        {
          "id": {{ variant.id | json }},
          "available": {{ variant.available | json }},
          "inventoryQuantity": {{ variant.inventory_quantity | json }},
          "title": {{ variant.title | json }},
          "productTitle": {{ product.title | json }}
        }{% unless forloop.last %},{% endunless %}
      {%- endfor -%}
    ]
  </script>

  <div class="wishlist-product-buttons__row" data-wishlist-select-row hidden>
    <label class="visually-hidden" for="WishlistSelect-{{ section.id }}">
      {{ 'wishlist.product.choose_list' | t }}
    </label>
    <select
      id="WishlistSelect-{{ section.id }}"
      class="wishlist-product-buttons__select"
      data-wishlist-select
    ></select>
  </div>

  <button
    type="button"
    class="wishlist-product-buttons__btn wishlist-product-buttons__btn--add"
    data-wishlist-add-btn
  >
    <span class="wishlist-product-buttons__icon" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 20.5s-7.5-4.6-10.1-9.3C.4 8.1 1.6 4.8 4.6 3.7c2.1-.8 4.4 0 5.7 1.8l1.7 2.3 1.7-2.3c1.3-1.8 3.6-2.6 5.7-1.8 3 1.1 4.2 4.4 2.7 7.5C19.5 15.9 12 20.5 12 20.5z" />
      </svg>
    </span>
    <span data-wishlist-add-btn-label>{{ 'wishlist.product.add' | t }}</span>
  </button>

  <button
    type="button"
    class="wishlist-product-buttons__btn wishlist-product-buttons__btn--notify"
    data-wishlist-notify-btn
    hidden
  >
    {{ 'wishlist.product.notify' | t }}
  </button>

  <p class="wishlist-product-buttons__status" data-wishlist-status role="status" aria-live="polite" hidden></p>
</wishlist-product-buttons>

{{ 'wishlist-product-buttons.css' | asset_url | stylesheet_tag }}
<script src="{{ 'wishlist-product-buttons.js' | asset_url }}" defer="defer"></script>

{% schema %}
{
  "name": "Wishlist-Buttons",
  "target": "section",
  "settings": []
}
{% endschema %}