{% comment %}
  Wishlist-Drawer — Slide-over für Listenverwaltung (max. 10 Listen: anlegen/
  umbenennen/löschen), Artikelübersicht (Bild/Titel/Preis/Add-to-Cart/Entfernen,
  persönliche Notiz, Bestellmenge, manuelle Reihenfolge), umschaltbar zwischen
  Karten-Ansicht (immer, alle Geräte) und Tabellen-Ansicht (ab Tablet-Breite,
  volle Fensterbreite statt 420px), "Alle in den Warenkorb", Ausdruck (Titel =
  Listenname, tabellarisch), Login-Hinweis für Gäste und Back-in-Stock-
  Gäste-Formular (Name+E-Mail, Soft-Opt-in).

  Eigener ID-/Klassen-Namespace (WishlistDrawer-*), analysiert und für
  konfliktfrei mit dem bestehenden Cart-Drawer (CartDrawer-*, .drawer__*)
  befunden — keine Wiederverwendung von dessen IDs/Klassen.

  Öffnen: document.dispatchEvent(new CustomEvent('wishlist:open', { detail }))
  - ohne detail: normale Listenansicht (Header-Icon, "Zur Wunschliste
    hinzufügen"-Klick eines Gastes)
  - detail.intent === 'bis-guest': öffnet direkt das Back-in-Stock-Gäste-
    Formular für die mitgegebene Variante (Klick auf "Benachrichtigen" durch
    einen nicht eingeloggten Kunden auf der Produktseite)
{% endcomment %}

<wishlist-drawer
  class="wishlist-drawer"
  id="WishlistDrawer"
  data-customer-logged-in="{% if customer %}true{% else %}false{% endif %}"
  data-customer-id="{{ customer.id }}"
  data-locale="{{ request.locale.iso_code }}"
  data-text-my-list="{{ 'wishlist.drawer.my_list' | t }}"
  data-text-new-list="{{ 'wishlist.drawer.new_list' | t }}"
  data-text-new-list-placeholder="{{ 'wishlist.drawer.new_list_placeholder' | t }}"
  data-text-max-lists="{{ 'wishlist.drawer.max_lists' | t }}"
  data-text-confirm-delete="{{ 'wishlist.drawer.confirm_delete_list' | t }}"
  data-text-add-to-cart="{{ 'wishlist.drawer.add_to_cart' | t }}"
  data-text-added="{{ 'wishlist.drawer.added_to_cart' | t }}"
  data-text-preorder="{{ 'wishlist.drawer.preorder' | t }}"
  data-text-notify="{{ 'wishlist.product.notify' | t }}"
  data-text-notify-subscribed="{{ 'wishlist.product.notify_subscribed' | t }}"
  data-text-order="{{ 'wishlist.drawer.reseller_order' | t }}"
  data-text-packaging-unit="{{ 'wishlist.drawer.packaging_unit' | t }}"
  data-text-error="{{ 'wishlist.product.error_generic' | t }}"
  data-text-guest-success="{{ 'wishlist.drawer.guest_success' | t }}"
  data-text-table-view="{{ 'wishlist.drawer.table_view' | t }}"
  data-text-card-view="{{ 'wishlist.drawer.card_view' | t }}"
  data-text-note-placeholder="{{ 'wishlist.drawer.note_placeholder' | t }}"
  data-text-move-up="{{ 'wishlist.drawer.move_up' | t }}"
  data-text-move-down="{{ 'wishlist.drawer.move_down' | t }}"
  data-text-col-title="{{ 'wishlist.drawer.col_title' | t }}"
  data-text-col-sku="{{ 'wishlist.drawer.col_sku' | t }}"
  data-text-col-packaging-unit="{{ 'wishlist.drawer.col_packaging_unit' | t }}"
  data-text-col-price="{{ 'wishlist.drawer.col_price' | t }}"
  data-text-col-note="{{ 'wishlist.drawer.col_note' | t }}"
  data-text-col-order-qty="{{ 'wishlist.drawer.col_order_qty' | t }}"
  data-text-price-suffix="{{ 'wishlist.drawer.price_suffix' | t }}"
  data-text-share="{{ 'wishlist.drawer.share' | t }}"
  data-text-share-consent-required="{{ 'wishlist.drawer.share_consent_required' | t }}"
  data-text-share-copy="{{ 'wishlist.drawer.share_copy' | t }}"
  data-text-share-copied="{{ 'wishlist.drawer.share_copied' | t }}"
  data-text-share-title-prefix="{{ 'wishlist.drawer.share_title_prefix' | t }}"
  hidden
>
  <div class="wishlist-drawer__overlay" data-wishlist-drawer-overlay></div>

  <div class="wishlist-drawer__panel" role="dialog" aria-modal="true" aria-label="{{ 'wishlist.header.aria_label' | t }}">
    <header class="wishlist-drawer__header">
      <div class="wishlist-drawer__list-controls" data-wishlist-drawer-list-controls>
        <select class="wishlist-drawer__select" data-wishlist-drawer-select aria-label="{{ 'wishlist.product.choose_list' | t }}"></select>
        <button type="button" class="wishlist-drawer__icon-btn" data-wishlist-drawer-rename title="{{ 'wishlist.drawer.rename' | t }}" aria-label="{{ 'wishlist.drawer.rename' | t }}">✎</button>
        <button type="button" class="wishlist-drawer__icon-btn" data-wishlist-drawer-share title="{{ 'wishlist.drawer.share' | t }}" aria-label="{{ 'wishlist.drawer.share' | t }}">🔗</button>
        <button type="button" class="wishlist-drawer__icon-btn" data-wishlist-drawer-delete title="{{ 'wishlist.drawer.delete_list' | t }}" aria-label="{{ 'wishlist.drawer.delete_list' | t }}">🗑</button>
      </div>
      <button type="button" class="wishlist-drawer__view-toggle" data-wishlist-drawer-view-toggle>{{ 'wishlist.drawer.table_view' | t }}</button>
      <button type="button" class="wishlist-drawer__help-btn" data-wishlist-drawer-help-open title="{{ 'wishlist.drawer.help_label' | t }}" aria-label="{{ 'wishlist.drawer.help_label' | t }}" aria-haspopup="dialog">?</button>
      <button type="button" class="wishlist-drawer__close" data-wishlist-drawer-close aria-label="{{ 'wishlist.drawer.close' | t }}">&times;</button>
    </header>

    <div class="wishlist-drawer__rename-row" data-wishlist-drawer-rename-row hidden>
      <label class="visually-hidden" for="WishlistDrawerRenameInput">{{ 'wishlist.drawer.rename' | t }}</label>
      <input type="text" id="WishlistDrawerRenameInput" class="wishlist-drawer__text-input" data-wishlist-drawer-rename-input maxlength="60">
      <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--small" data-wishlist-drawer-rename-save>{{ 'wishlist.drawer.save' | t }}</button>
      <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--small wishlist-drawer__btn--ghost" data-wishlist-drawer-rename-cancel>{{ 'wishlist.drawer.cancel' | t }}</button>
    </div>

    <div class="wishlist-drawer__share-row" data-wishlist-drawer-share-row hidden>
      <div class="wishlist-drawer__share-consent" data-wishlist-drawer-share-consent>
        <label class="wishlist-drawer__share-consent-label">
          <input type="checkbox" data-wishlist-drawer-share-consent-checkbox>
          {{ 'wishlist.drawer.share_consent_label' | t }}
        </label>
        <div class="wishlist-drawer__share-actions">
          <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--small" data-wishlist-drawer-share-enable>{{ 'wishlist.drawer.share_enable' | t }}</button>
          <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--small wishlist-drawer__btn--ghost" data-wishlist-drawer-share-cancel>{{ 'wishlist.drawer.cancel' | t }}</button>
        </div>
      </div>

      <div class="wishlist-drawer__share-active" data-wishlist-drawer-share-active hidden>
        <div class="wishlist-drawer__share-url-row">
          <input type="text" class="wishlist-drawer__text-input" data-wishlist-drawer-share-url readonly>
          <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--small" data-wishlist-drawer-share-copy>{{ 'wishlist.drawer.share_copy' | t }}</button>
        </div>
        <div class="wishlist-drawer__share-social" data-wishlist-drawer-share-social>
          <a class="wishlist-drawer__share-social-link" data-share-facebook target="_blank" rel="noopener">Facebook</a>
          <a class="wishlist-drawer__share-social-link" data-share-pinterest target="_blank" rel="noopener">Pinterest</a>
          <a class="wishlist-drawer__share-social-link" data-share-x target="_blank" rel="noopener">X</a>
          <a class="wishlist-drawer__share-social-link" data-share-email>{{ 'wishlist.drawer.share_email' | t }}</a>
        </div>
        <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--small wishlist-drawer__btn--ghost" data-wishlist-drawer-share-disable>{{ 'wishlist.drawer.share_disable' | t }}</button>
      </div>
    </div>

    <p class="wishlist-drawer__list-status" data-wishlist-drawer-list-status role="status" aria-live="polite" hidden></p>

    <div class="wishlist-drawer__body" data-wishlist-drawer-body>

      <h2 class="wishlist-drawer__print-title" data-wishlist-drawer-print-title></h2>

      <div class="wishlist-drawer__login-hint" data-wishlist-drawer-login-hint hidden>
        <p>{{ 'wishlist.drawer.login_hint' | t }}</p>
        <a href="{{ routes.account_login_url }}" class="wishlist-drawer__btn">{{ 'wishlist.drawer.login_cta' | t }}</a>
      </div>

      <form class="wishlist-drawer__guest-form" data-wishlist-drawer-guest-form hidden>
        <p class="wishlist-drawer__guest-intro" data-wishlist-drawer-guest-item-label></p>
        <label class="visually-hidden" for="WishlistGuestName">{{ 'wishlist.drawer.guest_name' | t }}</label>
        <input type="text" id="WishlistGuestName" class="wishlist-drawer__text-input" placeholder="{{ 'wishlist.drawer.guest_name' | t }}" autocomplete="name" data-wishlist-drawer-guest-name>
        <label class="visually-hidden" for="WishlistGuestEmail">{{ 'wishlist.drawer.guest_email' | t }}</label>
        <input type="email" id="WishlistGuestEmail" class="wishlist-drawer__text-input" placeholder="{{ 'wishlist.drawer.guest_email' | t }}" autocomplete="email" required data-wishlist-drawer-guest-email>
        <button type="submit" class="wishlist-drawer__btn">{{ 'wishlist.drawer.guest_submit' | t }}</button>
        <p class="wishlist-drawer__guest-status" data-wishlist-drawer-guest-status role="status" aria-live="polite" hidden></p>
      </form>

      <ul class="wishlist-drawer__items" data-wishlist-drawer-items></ul>

      <div class="wishlist-drawer__table-wrap" data-wishlist-drawer-table-wrap>
        <table class="wishlist-drawer__table">
          <thead>
            <tr>
              <th class="wishlist-drawer__table-col-reorder"></th>
              <th></th>
              <th>{{ 'wishlist.drawer.col_title' | t }}</th>
              <th>
                <span class="wishlist-drawer__screen-only">{{ 'wishlist.drawer.col_sku' | t }}</span>
                <span class="wishlist-drawer__print-only">{{ 'wishlist.drawer.col_sku_print' | t }}</span>
              </th>
              <th data-table-col-ve hidden>{{ 'wishlist.drawer.col_packaging_unit' | t }}</th>
              <th>{{ 'wishlist.drawer.col_price' | t }}</th>
              <th>{{ 'wishlist.drawer.col_note' | t }}</th>
              <th class="wishlist-drawer__col-order-qty">{{ 'wishlist.drawer.col_order_qty' | t }}</th>
              <th></th>
            </tr>
          </thead>
          <tbody data-wishlist-drawer-table-body></tbody>
        </table>
      </div>

      <p class="wishlist-drawer__empty" data-wishlist-drawer-empty hidden>{{ 'wishlist.drawer.empty' | t }}</p>
    </div>

    <footer class="wishlist-drawer__footer" data-wishlist-drawer-footer>
      <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--ghost" data-wishlist-drawer-print>{{ 'wishlist.drawer.print' | t }}</button>
      <button type="button" class="wishlist-drawer__btn" data-wishlist-drawer-add-all>{{ 'wishlist.drawer.add_all_to_cart' | t }}</button>
    </footer>
  </div>

  {% comment %}
    Hilfe-Popup: liegt bewusst AUSSERHALB von .wishlist-drawer__panel (eigene
    Ebene über dem Drawer, auch in der Tabellenansicht zentriert). Klicks darin
    schließen den Drawer nicht - siehe handleOutsideClick() in wishlist-drawer.js.
    Der Beispiel-Button nutzt dieselbe Beschriftung wie der Produktseiten-Button
    (wishlist.product.add) und ist daher automatisch in der Kundensprache.
  {% endcomment %}
  <div class="wishlist-drawer__help" data-wishlist-drawer-help hidden>
    <div class="wishlist-drawer__help-overlay" data-wishlist-drawer-help-overlay></div>
    <div class="wishlist-drawer__help-dialog" role="dialog" aria-modal="true" aria-labelledby="WishlistDrawerHelpTitle">
      <div class="wishlist-drawer__help-header">
        <h2 class="wishlist-drawer__help-title" id="WishlistDrawerHelpTitle">{{ 'wishlist.drawer.help_title' | t }}</h2>
        <button type="button" class="wishlist-drawer__close" data-wishlist-drawer-help-close aria-label="{{ 'wishlist.drawer.close' | t }}">&times;</button>
      </div>
      <div class="wishlist-drawer__help-body">
        <p>{{ 'wishlist.drawer.help_intro' | t }}</p>
        <div class="wishlist-drawer__help-demo" aria-hidden="true">
          <span class="wishlist-drawer__help-demo-btn">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#b8323f" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
            {{ 'wishlist.product.add' | t }}
          </span>
        </div>
        <p>{{ 'wishlist.drawer.help_order' | t }}</p>
        <p>{{ 'wishlist.drawer.help_variants' | t }}</p>
        <p>{{ 'wishlist.drawer.help_cart' | t }}</p>
      </div>
    </div>
  </div>

  <template data-wishlist-drawer-item-template>
    <li class="wishlist-drawer__item">
      <div class="wishlist-drawer__item-reorder">
        <button type="button" class="wishlist-drawer__reorder-btn" data-item-move-up aria-label="{{ 'wishlist.drawer.move_up' | t }}">▲</button>
        <button type="button" class="wishlist-drawer__reorder-btn" data-item-move-down aria-label="{{ 'wishlist.drawer.move_down' | t }}">▼</button>
      </div>
      <a class="wishlist-drawer__item-image" data-item-link>
        <img data-item-image alt="" loading="lazy">
      </a>
      <div class="wishlist-drawer__item-info">
        <a class="wishlist-drawer__item-title" data-item-link data-item-title></a>
        <p class="wishlist-drawer__item-variant" data-item-variant hidden></p>
        <p class="wishlist-drawer__item-sku" data-item-sku hidden></p>
        <p class="wishlist-drawer__item-price" data-item-price></p>
        <p class="wishlist-drawer__item-reseller" data-item-reseller hidden></p>
        <label class="visually-hidden" data-item-note-label>{{ 'wishlist.drawer.col_note' | t }}</label>
        <input type="text" class="wishlist-drawer__note-input" data-item-note placeholder="{{ 'wishlist.drawer.note_placeholder' | t }}">
        <div class="wishlist-drawer__item-actions">
          <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--small" data-item-primary-action hidden></button>
          <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--small wishlist-drawer__btn--ghost" data-item-notify-action hidden></button>
          <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--small wishlist-drawer__btn--ghost" data-item-remove>{{ 'wishlist.drawer.remove' | t }}</button>
        </div>
      </div>
    </li>
  </template>

  <template data-wishlist-drawer-row-template>
    <tr class="wishlist-drawer__row">
      <td class="wishlist-drawer__row-reorder">
        <button type="button" class="wishlist-drawer__reorder-btn" data-item-move-up aria-label="{{ 'wishlist.drawer.move_up' | t }}">▲</button>
        <button type="button" class="wishlist-drawer__reorder-btn" data-item-move-down aria-label="{{ 'wishlist.drawer.move_down' | t }}">▼</button>
        <span class="wishlist-drawer__drag-handle" data-item-drag-handle draggable="true" hidden>⠿</span>
      </td>
      <td class="wishlist-drawer__row-image">
        <a class="wishlist-drawer__item-image" data-item-link>
          <img data-item-image alt="" loading="lazy">
        </a>
      </td>
      <td class="wishlist-drawer__row-title">
        <a data-item-link data-item-title></a>
        <p class="wishlist-drawer__item-variant" data-item-variant hidden></p>
      </td>
      <td data-item-sku></td>
      <td data-table-col-ve hidden data-item-reseller></td>
      <td data-item-price></td>
      <td>
        <input type="text" class="wishlist-drawer__note-input wishlist-drawer__screen-only" data-item-note placeholder="{{ 'wishlist.drawer.note_placeholder' | t }}">
        <span class="wishlist-drawer__print-only wishlist-drawer__print-note" data-item-note-print></span>
      </td>
      <td class="wishlist-drawer__col-order-qty">
        <span data-item-order-qty-print></span>
      </td>
      <td class="wishlist-drawer__row-actions">
        <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--small" data-item-primary-action hidden></button>
        <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--small wishlist-drawer__btn--ghost" data-item-notify-action hidden></button>
        <button type="button" class="wishlist-drawer__btn wishlist-drawer__btn--small wishlist-drawer__btn--ghost" data-item-remove>{{ 'wishlist.drawer.remove' | t }}</button>
      </td>
    </tr>
  </template>
</wishlist-drawer>

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

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