import confirmationModalTemplate from '../shared/confirmationModalTemplate'
import quantityStepperTemplate from '../shared/quantityStepperTemplate'
import needsConfigurationCtaTemplate from '../shared/needsConfigurationCtaTemplate'

const templateItem = `
<div id="saveto-wishlist-app" @click="handleDocumentClick">
  <div v-if="wishlist.isLoggedIn || parseInt(isPublic) === 1 || sharePermission" class="saveto-wishlist-lists-wrapper">
    <h2 class="stwlite-tw-wishlist-title" :style="{ fontSize: wishlist.pageStyles?.headingTitleSize + 'px', color: wishlist.pageStyles?.headingTitleColor }">
      {{ wishlist.title }} <span v-if="collectionStatus !== 'publish'" class="stwlite-tw-status-item-badge stwlite-tw-status-item-draft">{{ wishlist.draft }}</span>
    </h2>
    <div v-if="wishlist.subtitle" class="stwlite-tw-subtitle" :style="{ fontSize: wishlist.pageStyles?.headingTextSize + 'px', color: wishlist.pageStyles?.headingTextColor }" v-html="wishlist.sanitizeSubtitleHtml(wishlist.subtitle)"></div>
    <div class="saveto-wishlist-container stwlite-tw-item-wishlist">
      <div class="stwlite-tw-wishlist-item-links">
        <a v-if="wishlist.isLoggedIn" :href="wishlist.pageUrls.wishlistUrl">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <line x1="8" y1="6" x2="21" y2="6"></line>
            <line x1="8" y1="12" x2="21" y2="12"></line>
            <line x1="8" y1="18" x2="21" y2="18"></line>
            <line x1="3" y1="6" x2="3.01" y2="6"></line>
            <line x1="3" y1="12" x2="3.01" y2="12"></line>
            <line x1="3" y1="18" x2="3.01" y2="18"></line>
          </svg>
          {{ wishlist.allWishlists }}
        </a>
        <span v-if="wishlist.isLoggedIn" class="stwlite-tw-wishlist-item-separator">|</span>
        <a :href="wishlist.pageUrls.shopUrl" class="stwlite-tw-wishlist-item-link">
          {{ wishlist.continueShopping }}
        </a>
        <!-- Pro Section only -->
        <div v-if="wishlist.activePro && canEditWishlist" class="stwlite-tw-wishlist-item-pro-top-links">
          <span class="stwlite-tw-wishlist-item-separator">|</span>
          <button
            type="button" 
            @click="handleEditWishlist"
            class="stwlite-tw-wishlist-item-link stwlite-tw-wishlist-edit-btn"
            style="background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline;"
          >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" style="width: 16px; height: 16px; display: inline-block; vertical-align: middle;">
              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
            </svg>
            {{ wishlist.editWishlist }}
          </button>
        </div>
      </div>

      <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-gap-2 stwlite-tw-flex-1 stwlite-tw-justify-end">
        <div class="stwlite-tw-search-wrapper" :class="{ 'stwlite-tw-has-content': search }">
          <svg class="stwlite-tw-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="M21 21l-4.35-4.35"></path>
          </svg>
          <input
            v-model="search"
            type="text"
            class="stwlite-tw-search-input"
            :placeholder="wishlist.searchPlaceholder"
            :aria-label="wishlist.searchLabel"
            @input="onSearch"
          >
          <button type="button" class="stwlite-tw-clear-button" :aria-label="wishlist.clearSearch" @click="clearSearch">
            &times;
          </button>
        </div>
        <div
          class="stwlite-tw-inline-flex stwlite-tw-rounded-md stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-overflow-hidden"
          role="radiogroup"
          :aria-label="wishlist.viewModeLabel"
        >
          <button
            type="button"
            role="radio"
            :class="['stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-border-0 stwlite-tw-cursor-pointer stwlite-tw-transition-colors', viewMode === 'table' ? 'stwlite-tw-bg-gray-800 stwlite-tw-text-white' : 'stwlite-tw-bg-white stwlite-tw-text-gray-700 hover:stwlite-tw-bg-gray-100']"
            :aria-label="wishlist.tableViewLabel"
            :aria-checked="viewMode === 'table'"
            :title="wishlist.tableViewLabel"
            @click="setViewMode('table')"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="3" y1="6" x2="21" y2="6"></line>
              <line x1="3" y1="12" x2="21" y2="12"></line>
              <line x1="3" y1="18" x2="21" y2="18"></line>
            </svg>
          </button>
          <button
            type="button"
            role="radio"
            :class="['stwlite-tw-px-3 stwlite-tw-py-2 stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-border-0 stwlite-tw-cursor-pointer stwlite-tw-transition-colors stwlite-tw-border-l stwlite-tw-border-gray-300', viewMode === 'grid' ? 'stwlite-tw-bg-gray-800 stwlite-tw-text-white' : 'stwlite-tw-bg-white stwlite-tw-text-gray-700 hover:stwlite-tw-bg-gray-100']"
            :aria-label="wishlist.gridViewLabel"
            :aria-checked="viewMode === 'grid'"
            :title="wishlist.gridViewLabel"
            @click="setViewMode('grid')"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="3" width="7" height="7"></rect>
              <rect x="14" y="3" width="7" height="7"></rect>
              <rect x="3" y="14" width="7" height="7"></rect>
              <rect x="14" y="14" width="7" height="7"></rect>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <div v-if="!fetchingItems" class="stwlite-tw-table-wrapper">
      <div v-if="viewMode === 'table'" class="stwlite-tw-table-container">
        <table class="stwlite-tw-data-table" :style="{ '--table-column-text-size': wishlist.pageStyles?.tableColumnTextSize + 'px', '--table-row-text-size': wishlist.pageStyles?.tableRowTextSize + 'px' }">
          <thead>
            <tr>
              <th class="stwlite-tw-checkbox-col">
                <input
                  type="checkbox"
                  :checked="allSelected"
                  @change="toggleSelectAll"
                  class="stwlite-tw-wishlist-checkbox"
                />
              </th>
              <th v-if="collection_user_id === user_id || wishlist.userRole === 'admin'"></th>
              <th v-if="wishlist.pageStyles?.showProductImage" data-column="image" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
                {{ wishlist.table.product_table.image }}
              </th>
              <th data-column="name" :class="['sortable', sortColumn === 'name' ? sortOrder === 'asc' ? 'sort-asc' : 'sort-desc' : '']" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }" @click="handleSort('name')">
                {{ wishlist.table.product_table.name }}
                <svg class="stwlite-tw-sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M7 10l5 5 5-5"></path>
                </svg>
              </th>
              <th data-column="price" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
                {{ wishlist.table.product_table.price }}
              </th>
              <th data-column="stock_status" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
                {{ wishlist.table.product_table.stock_status }}
              </th>
              <th data-column="quantity" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
                {{ wishlist.table.product_table.quantity }}
              </th>
              <th data-column="subtotal" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
                {{ wishlist.table.product_table.subtotal }}
              </th>
              <th data-column="actions" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
                {{ wishlist.table.product_table.actions }}
              </th>
            </tr>
          </thead>
          <tbody v-if="lists.length > 0" id="tableBody">
            <tr
              v-for="(item, index) in lists"
              :key="item.id"
              :draggable="collection_user_id === user_id || wishlist.userRole === 'admin' ? true : false"
              @dragstart="onDragStart(index, $event)"
              @dragend="onDragEnd"
              :style="{ fontSize: wishlist.pageStyles?.tableRowTextSize + 'px' }"
              @dragover.prevent="onDragOver(index, $event)"
              @drop.prevent="onDrop(index)"
              :class="[ 'stwlite-tw-transition-all stwlite-tw-duration-150', draggingIndex === index ? 'stwlite-tw-opacity-40' : '', dropTarget === index && dropPosition === 'above' ? 'drop-above' : '', dropTarget === index && dropPosition === 'below' ? 'drop-below' : '' ]"
            >
              <td class="stwlite-tw-checkbox-col">
                <input
                  type="checkbox"
                  :checked="selectedItems.includes(item.id)"
                  @change="toggleSelectItem(item.id)"
                  class="stwlite-tw-wishlist-checkbox"
                />
              </td>
              <td v-if="collection_user_id === user_id || wishlist.userRole === 'admin'" class="stwlite-tw-drag-handle">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16" fill="#000000"><path fill="#000000" d="M5 4c0-.14 0-.209.008-.267a.85.85 0 0 1 .725-.725C5.79 3 5.86 3 6 3s.209 0 .267.008a.85.85 0 0 1 .725.725C7 3.79 7 3.86 7 4s0 .209-.008.267a.85.85 0 0 1-.725.725C6.21 5 6.14 5 6 5s-.209 0-.267-.008a.85.85 0 0 1-.725-.725C5 4.21 5 4.14 5 4m0 4c0-.14 0-.209.008-.267a.85.85 0 0 1 .725-.725C5.79 7 5.86 7 6 7s.209 0 .267.008a.85.85 0 0 1 .725.725C7 7.79 7 7.86 7 8s0 .209-.008.267a.85.85 0 0 1-.725.725C6.21 9 6.14 9 6 9s-.209 0-.267-.008a.85.85 0 0 1-.725-.725C5 8.21 5 8.14 5 8m0 4c0-.139 0-.209.008-.267a.85.85 0 0 1 .724-.724c.059-.008.128-.008.267-.008s.21 0 .267.008a.85.85 0 0 1 .724.724c.008.058.008.128.008.267s0 .209-.008.267a.85.85 0 0 1-.724.724c-.058.008-.128.008-.267.008s-.209 0-.267-.008a.85.85 0 0 1-.724-.724C5 12.209 5 12.139 5 12m4-8c0-.14 0-.209.008-.267a.85.85 0 0 1 .725-.725C9.79 3 9.86 3 10 3s.209 0 .267.008a.85.85 0 0 1 .725.725C11 3.79 11 3.86 11 4s0 .209-.008.267a.85.85 0 0 1-.725.725C10.21 5 10.14 5 10 5s-.209 0-.267-.008a.85.85 0 0 1-.725-.725C9 4.21 9 4.14 9 4m0 4c0-.14 0-.209.008-.267a.85.85 0 0 1 .725-.725C9.79 7 9.86 7 10 7s.209 0 .267.008a.85.85 0 0 1 .725.725C11 7.79 11 7.86 11 8s0 .209-.008.267a.85.85 0 0 1-.725.725C10.21 9 10.14 9 10 9s-.209 0-.267-.008a.85.85 0 0 1-.725-.725C9 8.21 9 8.14 9 8m0 4c0-.139 0-.209.008-.267a.85.85 0 0 1 .724-.724c.059-.008.128-.008.267-.008c.14 0 .21 0 .267.008a.85.85 0 0 1 .724.724c.008.058.008.128.008.267s0 .209-.008.267a.85.85 0 0 1-.724.724c-.058.008-.128.008-.267.008s-.209 0-.267-.008a.85.85 0 0 1-.724-.724C9 12.209 9 12.139 9 12"/></svg>
              </td>
              <td v-if="wishlist.pageStyles?.showProductImage" class="stwlite-tw-product-image-cell">
                <a :href="getVariationLink(item)">
                  <img
                    :src="item.product.image_url"
                    :alt="item.product.name"
                    class="stwlite-tw-product-thumbnail"
                    loading="lazy"
                  />
                </a>
              </td>
              <td>
                <div class="stwlite-tw-wishlist-item-name">
                  <a :href="getVariationLink(item)">{{ item.product.name }}</a>
                </div>
                <div v-if="item.product.type === 'variable' && item.product.variations?.attributes && Object.keys(item.product.variations?.attributes).length > 0" class="stwlite-tw-wishlist-item-actions">
                  <div v-for="(attributes, attribute) in item.product.variations.attributes" :key="attribute+item.id">
                    <label :for="attribute">{{ item.product.variations.attribute_labels?.[attribute] || attribute.replace('pa_', '').charAt(0).toUpperCase() + attribute.replace('pa_', '').slice(1) }}</label>
                    <select
                      v-model="selectedDefaultVariation[item.id][attribute]"
                      :key="attribute"
                      @change="handleVariationChange(item)"
                      :id="attribute+item.id"
                      class="stwlite-tw-wishlist-item-variation-select"
                    >
                      <option v-for="(attr, indx) in attributes" :key="indx" :value="attr.name">{{ attr.name }}</option>
                    </select>
                  </div>
                </div>
              </td>
              <td>
                <span v-if="hasNoPrice(item)">&mdash;</span>
                <span v-else v-html="item.product.price_formatted"></span>
                <div v-if="getTierTable(item).length" class="tiered-pricing-wrapper">
                  <table class="shop_table stwlite-tw-tiered-pricing-table" :aria-label="wishlist.table.product_table.tiered_pricing">
                    <thead>
                      <tr>
                        <th>{{ wishlist.table.product_table.quantity }}</th>
                        <th>{{ wishlist.table.product_table.price }}</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(row, ridx) in getTierTable(item)" :key="ridx" :class="{ 'tiered-pricing--active': row.active }">
                        <td>{{ row.label }}</td>
                        <td v-html="formatPrice(row.price)"></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td>
                <template v-if="item.product.stock === 'instock'">
                  <svg style="vertical-align: middle; color: green;" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <title>In stock</title>
                    <circle cx="8" cy="8" r="8" fill="currentColor" />
                    <path d="M4.5 8.5L7 11L11.5 6.5" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <span style="color: green; margin-left: 4px;">{{ wishlist.table.in_stock }}</span>
                </template>
                <template v-else-if="item.product.stock === 'onbackorder'">
                  <svg style="vertical-align: middle; color: #FFD600;" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <title>Allow backorder</title>
                    <circle cx="8" cy="8" r="8" fill="currentColor" />
                    <path d="M4.5 8.5L7 11L11.5 6.5" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <span style="color: #FFD600; margin-left: 4px;">{{ wishlist.table.allow_backorder }}</span>
                </template>
                <template v-else>
                  <svg style="vertical-align: middle; color: red;" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <title>Out of stock</title>
                    <circle cx="8" cy="8" r="8" fill="currentColor" />
                    <line x1="5" y1="5" x2="11" y2="11" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
                    <line x1="11" y1="5" x2="5" y2="11" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
                  </svg>
                  <span style="color: red; margin-left: 4px;">{{ wishlist.table.out_of_stock }}</span>
                </template>
              </td>
              <td>
                ${quantityStepperTemplate}
              </td>
              <td><span v-html="calculateSubtotal(item)"></span></td>
              <td>
                <div class="stwlite-tw-wishlist-items-actions">
                  <a
                    v-if="item.product.type === 'variable' && selectedVariation[item.id] === ''"
                    :href="getVariationLink(item)"
                    class="stwlite-tw-table-btn stwlite-tw-table-btn-add-to-cart-button"
                    :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor }"
                  >
                    {{ wishlist.table.select_options }}
                  </a>
                  ${needsConfigurationCtaTemplate()}
                  <button
                    v-else-if="collectionStatus === 'publish' && !shouldHideCartButton(item)"
                    type="button"
                    class="stwlite-tw-table-btn stwlite-tw-table-btn-add-to-cart-button"
                    :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor }"
                    @click="handleAddToCart(item.product.type, item.collection_id, item.product.id, item.quantity, item.id)"
                    :disabled="item.product.is_purchasable === false || item.product.stock === 'outofstock' || (addingItemId === item.product.id && addingItem) || (item.product.type === 'variable' && selectedVariation[item.id] === '') || hasNoPrice(item)"
                  >
                    {{ addingItemId === item.product.id && addingItem ? wishlist.table.adding_item : wishlist.table.add_to_cart }}
                  </button>
                  <!-- Three dots menu -->
                  <div v-if="collection_user_id === user_id || wishlist.userRole === 'admin' || canEditWishlist" class="stwlite-tw-dropdown-menu-container">
                    <button
                      type="button"
                      class="stwlite-tw-table-btn stwlite-tw-action-btn stwlite-tw-more-actions-btn"
                      @click="toggleActionsMenu(item.id)"
                      :aria-label="wishlist.table.more_actions"
                    >
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="1"></circle>
                        <circle cx="19" cy="12" r="1"></circle>
                        <circle cx="5" cy="12" r="1"></circle>
                      </svg>
                    </button>

                    <!-- Dropdown menu -->
                    <div
                      v-if="activeActionsMenu === item.id"
                      class="stwlite-tw-dropdown-menu"
                      @click.stop
                    >
                      <!-- View Product -->
                      <a
                        :href="getVariationLink(item)"
                        class="stwlite-tw-dropdown-item stwlite-tw-dropdown-item-link"
                      >
                        {{ wishlist.table.view_product }}
                      </a>

                      <!-- Transfer -->
                      <a
                        v-if="collection_user_id === user_id || wishlist.userRole === 'admin'"
                        href="javascript:void(0)"
                        class="stwlite-tw-dropdown-item stwlite-tw-dropdown-item-link"
                        @click.stop="handleTransferItem(item.id); closeActionsMenu()"
                      >
                        {{ wishlist.table.transfer }}
                      </a>

                      <!-- Delete -->
                      <a
                        href="javascript:void(0)"
                        class="stwlite-tw-dropdown-item stwlite-tw-dropdown-item-danger"
                        @click.stop="handleDeleteItem(item.product.id, item.variant_id); closeActionsMenu()"
                        :disabled="deletingItem && deletingItemId === item.product.id"
                      >
                        {{ wishlist.table.delete }}
                      </a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
          <tfoot v-else>
            <tr>
              <td colspan="9">
                <div class="saveto-wishlist-empty-container">
                  <h2>{{ wishlist.empty.title }}</h2>
                </div>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>

      <div v-else-if="viewMode === 'grid'" class="stwlite-tw-grid-container">
        <div
          v-if="lists.length > 0"
          class="stwlite-tw-grid stwlite-tw-grid-cols-1 sm:stwlite-tw-grid-cols-2 md:stwlite-tw-grid-cols-3 lg:stwlite-tw-grid-cols-4 stwlite-tw-gap-4"
        >
          <div
            v-for="(item, index) in lists"
            :key="item.id"
            :draggable="collection_user_id === user_id || wishlist.userRole === 'admin' ? true : false"
            @dragstart="onDragStart(index, $event)"
            @dragend="onDragEnd"
            @dragover.prevent="onDragOver(index, $event)"
            @drop.prevent="onDrop(index)"
            :class="[ 'stwlite-tw-flex stwlite-tw-flex-col stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-rounded-lg stwlite-tw-bg-white stwlite-tw-overflow-hidden stwlite-tw-transition-all stwlite-tw-duration-150 hover:stwlite-tw-shadow-md', draggingIndex === index ? 'stwlite-tw-opacity-40' : '', dropTarget === index && dropPosition === 'above' ? 'drop-above' : '', dropTarget === index && dropPosition === 'below' ? 'drop-below' : '' ]"
            :style="{ fontSize: wishlist.pageStyles?.tableRowTextSize + 'px' }"
          >
            <div class="stwlite-tw-relative" :class="!wishlist.pageStyles?.showProductImage ? 'stwlite-tw-min-h-10' : ''">
              <a v-if="wishlist.pageStyles?.showProductImage" :href="getVariationLink(item)" class="stwlite-tw-block stwlite-tw-aspect-square stwlite-tw-bg-gray-50">
                <img
                  :src="item.product.image_url"
                  :alt="item.product.name"
                  class="stwlite-tw-w-full stwlite-tw-h-full stwlite-tw-object-cover"
                  loading="lazy"
                />
              </a>
              <div class="stwlite-tw-absolute stwlite-tw-top-2 stwlite-tw-left-2 stwlite-tw-bg-white/90 stwlite-tw-rounded stwlite-tw-p-1 stwlite-tw-shadow-sm">
                <input
                  type="checkbox"
                  :checked="selectedItems.includes(item.id)"
                  @change="toggleSelectItem(item.id)"
                  class="stwlite-tw-wishlist-checkbox"
                />
              </div>
              <div
                v-if="collection_user_id === user_id || wishlist.userRole === 'admin' || canEditWishlist"
                class="stwlite-tw-absolute stwlite-tw-top-2 stwlite-tw-right-2 stwlite-tw-dropdown-menu-container"
              >
                <button
                  type="button"
                  class="stwlite-tw-bg-white/90 stwlite-tw-rounded stwlite-tw-p-1 stwlite-tw-shadow-sm stwlite-tw-border-0 stwlite-tw-cursor-pointer hover:stwlite-tw-bg-white"
                  @click="toggleActionsMenu(item.id)"
                  :aria-label="wishlist.table.more_actions"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="1"></circle>
                    <circle cx="19" cy="12" r="1"></circle>
                    <circle cx="5" cy="12" r="1"></circle>
                  </svg>
                </button>
                <div
                  v-if="activeActionsMenu === item.id"
                  class="stwlite-tw-dropdown-menu"
                  @click.stop
                >
                  <a
                    :href="getVariationLink(item)"
                    class="stwlite-tw-dropdown-item stwlite-tw-dropdown-item-link"
                  >
                    {{ wishlist.table.view_product }}
                  </a>
                  <a
                    v-if="collection_user_id === user_id || wishlist.userRole === 'admin'"
                    href="javascript:void(0)"
                    class="stwlite-tw-dropdown-item stwlite-tw-dropdown-item-link"
                    @click.stop="handleTransferItem(item.id); closeActionsMenu()"
                  >
                    {{ wishlist.table.transfer }}
                  </a>
                  <a
                    href="javascript:void(0)"
                    class="stwlite-tw-dropdown-item stwlite-tw-dropdown-item-danger"
                    @click.stop="handleDeleteItem(item.product.id, item.variant_id); closeActionsMenu()"
                    :disabled="deletingItem && deletingItemId === item.product.id"
                  >
                    {{ wishlist.table.delete }}
                  </a>
                </div>
              </div>
            </div>
            <div class="stwlite-tw-flex stwlite-tw-flex-col stwlite-tw-flex-1 stwlite-tw-p-3 stwlite-tw-gap-2">
              <div class="stwlite-tw-wishlist-item-name">
                <a :href="getVariationLink(item)" class="stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-line-clamp-2">{{ item.product.name }}</a>
              </div>
              <div v-if="item.product.type === 'variable' && item.product.variations?.attributes && Object.keys(item.product.variations?.attributes).length > 0" class="stwlite-tw-wishlist-item-actions stwlite-tw-flex stwlite-tw-flex-col stwlite-tw-gap-1">
                <div v-for="(attributes, attribute) in item.product.variations.attributes" :key="attribute+item.id" class="stwlite-tw-flex stwlite-tw-flex-col">
                  <label :for="attribute+item.id" class="stwlite-tw-text-xs stwlite-tw-text-gray-600">{{ item.product.variations.attribute_labels?.[attribute] || attribute.replace('pa_', '').charAt(0).toUpperCase() + attribute.replace('pa_', '').slice(1) }}</label>
                  <select
                    v-model="selectedDefaultVariation[item.id][attribute]"
                    @change="handleVariationChange(item)"
                    :id="attribute+item.id"
                    class="stwlite-tw-wishlist-item-variation-select"
                  >
                    <option v-for="(attr, indx) in attributes" :key="indx" :value="attr.name">{{ attr.name }}</option>
                  </select>
                </div>
              </div>
              <div class="stwlite-tw-text-base stwlite-tw-font-semibold">
                <span v-if="hasNoPrice(item)">&mdash;</span>
                <span v-else v-html="item.product.price_formatted"></span>
                <div v-if="getTierTable(item).length" class="tiered-pricing-wrapper">
                  <table class="shop_table stwlite-tw-tiered-pricing-table" :aria-label="wishlist.table.product_table.tiered_pricing">
                    <thead>
                      <tr>
                        <th>{{ wishlist.table.product_table.quantity }}</th>
                        <th>{{ wishlist.table.product_table.price }}</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(row, ridx) in getTierTable(item)" :key="ridx" :class="{ 'tiered-pricing--active': row.active }">
                        <td>{{ row.label }}</td>
                        <td v-html="formatPrice(row.price)"></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-gap-1 stwlite-tw-text-xs">
                <template v-if="item.product.stock === 'instock'">
                  <svg style="vertical-align: middle; color: green;" width="14" height="14" viewBox="0 0 16 16" fill="none">
                    <title>{{ wishlist.table.in_stock }}</title>
                    <circle cx="8" cy="8" r="8" fill="currentColor" />
                    <path d="M4.5 8.5L7 11L11.5 6.5" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <span style="color: green;">{{ wishlist.table.in_stock }}</span>
                </template>
                <template v-else-if="item.product.stock === 'onbackorder'">
                  <svg style="vertical-align: middle; color: #FFD600;" width="14" height="14" viewBox="0 0 16 16" fill="none">
                    <title>{{ wishlist.table.allow_backorder }}</title>
                    <circle cx="8" cy="8" r="8" fill="currentColor" />
                    <path d="M4.5 8.5L7 11L11.5 6.5" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <span style="color: #FFD600;">{{ wishlist.table.allow_backorder }}</span>
                </template>
                <template v-else>
                  <svg style="vertical-align: middle; color: red;" width="14" height="14" viewBox="0 0 16 16" fill="none">
                    <title>{{ wishlist.table.out_of_stock }}</title>
                    <circle cx="8" cy="8" r="8" fill="currentColor" />
                    <line x1="5" y1="5" x2="11" y2="11" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
                    <line x1="11" y1="5" x2="5" y2="11" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
                  </svg>
                  <span style="color: red;">{{ wishlist.table.out_of_stock }}</span>
                </template>
              </div>
              <div class="stwlite-tw-flex stwlite-tw-flex-wrap stwlite-tw-items-center stwlite-tw-gap-2 stwlite-tw-mt-auto">
                ${quantityStepperTemplate}
                <a
                  v-if="item.product.type === 'variable' && selectedVariation[item.id] === ''"
                  :href="getVariationLink(item)"
                  class="stwlite-tw-table-btn stwlite-tw-table-btn-add-to-cart-button stwlite-tw-flex-1 stwlite-tw-text-center"
                  :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor }"
                >
                  {{ wishlist.table.select_options }}
                </a>
                ${needsConfigurationCtaTemplate('stwlite-tw-flex-1 stwlite-tw-text-center')}
                <button
                  v-else-if="collectionStatus === 'publish' && !shouldHideCartButton(item)"
                  type="button"
                  class="stwlite-tw-table-btn stwlite-tw-table-btn-add-to-cart-button stwlite-tw-flex-1"
                  :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor }"
                  @click="handleAddToCart(item.product.type, item.collection_id, item.product.id, item.quantity, item.id)"
                  :disabled="item.product.is_purchasable === false || item.product.stock === 'outofstock' || (addingItemId === item.product.id && addingItem) || (item.product.type === 'variable' && selectedVariation[item.id] === '') || hasNoPrice(item)"
                >
                  {{ addingItemId === item.product.id && addingItem ? wishlist.table.adding_item : wishlist.table.add_to_cart }}
                </button>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="saveto-wishlist-empty-container">
          <h2>{{ wishlist.empty.title }}</h2>
        </div>
      </div>

      <div class="stwlite-tw-table-footer">
        <div class="stwlite-tw-table-info">
          <span id="stwlite-tw-tableInfo">{{ tableInfo }}</span>
        </div>
    
        <div class="stwlite-tw-pagination stwlite-tw-flex stwlite-tw-flex-col sm:stwlite-tw-flex-row stwlite-tw-items-center stwlite-tw-justify-between sm:stwlite-tw-gap-4 stwlite-tw-gap-3">
          <div class="stwlite-tw-items-per-page stwlite-tw-w-full sm:stwlite-tw-w-auto stwlite-tw-flex stwlite-tw-justify-center sm:stwlite-tw-justify-start">
            <label for="itemsSelect" class="stwlite-tw-whitespace-nowrap">{{ wishlist.table.show }}:</label>
            <select v-model="pagination.pageSize" id="itemsSelect" @change="handleItemsPerPageChange" class="stwlite-tw-ml-2">
              <option value="5">5</option>
              <option value="10">10</option>
              <option value="15">15</option>
            </select>
          </div>

          <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-gap-2 stwlite-tw-flex-wrap">
            <button class="stwlite-tw-pagination-btn" id="stwlite-tw-prevBtn" :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor }" @click="handlePagination('prev')" :disabled="pagination.current === 1">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M15 18l-6-6 6-6"></path>
              </svg>
              <span class="stwlite-tw-pagination-btn-text">{{ wishlist.table.previous }}</span>
            </button>
    
            <div class="stwlite-tw-pagination-numbers" id="stwlite-tw-paginationNumbers" v-if="paginationItems && paginationItems.length > 0">
              <span v-for="item in paginationItems" :key="typeof item === 'number' ? item : 'ellipsis'" style="display: contents;">
                <button
                  v-if="typeof item === 'number'"
                  :class="['stwlite-tw-pagination-number', { 'active': item === pagination.current }]"
                  :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor, opacity: item === pagination.current ? 1 : 0.5 }"
                  @click="handlePaginationNumber(item)"
                  :disabled="item === pagination.current"
                >{{ item }}</button>
                <span
                  v-else
                  class="stwlite-tw-pagination-ellipsis"
                  aria-hidden="true"
                >...</span>
              </span>
            </div>
    
            <button class="stwlite-tw-pagination-btn" id="stwlite-tw-nextBtn" :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor }" @click="handlePagination('next')" :disabled="pagination.current === pagination.totalPages">
              <span class="stwlite-tw-pagination-btn-text">{{ wishlist.table.next }}</span>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M9 18l6-6-6-6"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <div class="stwlite-tw-table-footer-actions">
        <div class="stwlite-tw-table-footer-actions-left">
          <button
            v-if="lists.length > 0 && collectionStatus === 'publish'"
            type="button"
            class="stwlite-tw-table-btn stwlite-tw-table-btn-add-to-cart-button stwlite-tw-add-all-to-cart-btn"
            :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor }"
            @click="handleAddAllToCart"
            :disabled="addingAllItems"
          >
            {{ addingAllItems ? wishlist.table.adding_all_to_cart : wishlist.table.add_all_to_cart }}
          </button>
          <button
            v-if="selectedItems.length > 0 && collectionStatus === 'publish'"
            type="button"
            class="stwlite-tw-table-btn stwlite-tw-table-btn-add-to-cart-button stwlite-tw-add-selected-to-cart-btn"
            :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor }"
            @click="handleAddSelectedToCart"
            :disabled="addingSelectedItems"
          >
            {{ addingSelectedItems ? wishlist.table.adding_selected_to_cart : wishlist.table.add_selected_to_cart }}
          </button>
        </div>
        <div class="stwlite-tw-table-footer-actions-right">
          <div v-if="parseInt(isPublic) === 1" class="stwlite-tw-social-share">
            <!-- Facebook -->
            <a
              :href="social_urls.facebook"
              target="_blank"
              rel="noopener"
              class="stwlite-tw-social-share-button"
              :aria-label="social_share_text.facebook"
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
              </svg>
            </a>
            <!-- Twitter/X -->
            <a
              :href="social_urls.twitter"
              target="_blank"
              rel="noopener"
              class="stwlite-tw-social-share-button"
              :aria-label="social_share_text.twitter"
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M23 3a10.9 10.9 0 01-3.14 1.53A4.48 4.48 0 0022.4.36a9.09 9.09 0 01-2.88 1.1A4.48 4.48 0 0016.11 0c-2.5 0-4.52 2.02-4.52 4.52 0 .35.04.7.11 1.03C7.69 5.4 4.07 3.7 1.64 1.15c-.38.65-.6 1.4-.6 2.2 0 1.52.77 2.86 1.95 3.65A4.48 4.48 0 01.96 6v.06c0 2.13 1.52 3.91 3.54 4.31-.37.1-.76.16-1.16.16-.28 0-.55-.03-.81-.08.55 1.72 2.16 2.97 4.07 3A9.05 9.05 0 010 19.54a12.8 12.8 0 006.92 2.03c8.3 0 12.85-6.88 12.85-12.85 0-.2 0-.39-.01-.58A9.22 9.22 0 0023 3z"></path>
              </svg>
            </a>
            <!-- Pinterest -->
            <a
              :href="social_urls.pinterest"
              target="_blank"
              rel="noopener"
              class="stwlite-tw-social-share-button"
              :aria-label="social_share_text.pinterest"
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M8.72 17.11c-.19-1.13-.36-2.87.08-4.11.39-1.09 1.25-4.6 1.25-4.6s-.31-.62-.31-1.54c0-1.44.84-2.52 1.89-2.52.89 0 1.32.67 1.32 1.47 0 .9-.57 2.25-.87 3.5-.25 1.05.53 1.91 1.57 1.91 1.89 0 3.17-2.41 3.17-5.27 0-2.18-1.47-3.81-4.14-3.81-3.01 0-4.89 2.25-4.89 4.76 0 .87.26 1.48.67 1.95.19.22.22.31.15.57-.05.19-.17.65-.22.83-.07.27-.29.36-.54.26-1.5-.61-2.18-2.25-2.18-4.1C3.5 6.13 7.13 2.5 12 2.5c4.87 0 8.5 3.63 8.5 8.1 0 4.47-2.82 7.8-6.75 7.8-1.32 0-2.56-.72-2.98-1.54l-.81 3.09c-.23.89-.68 2-1.01 2.68.76.23 1.56.36 2.4.36 5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12c0 4.41 3.59 8 8 8 .84 0 1.64-.13 2.4-.36-.33-.68-.78-1.79-1.01-2.68z"></path>
              </svg>
            </a>
            <!-- Email -->
            <a
              :href="social_urls.email"
              class="stwlite-tw-social-share-button"
              :aria-label="social_share_text.email"
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
                <polyline points="22,6 12,13 2,6"></polyline>
              </svg>
            </a>
            <!-- WhatsApp -->
            <a
              :href="social_urls.whatsapp"
              target="_blank"
              rel="noopener"
              class="stwlite-tw-social-share-button"
              :aria-label="social_share_text.whatsapp"
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M16.72 13.06c-.29-.14-1.7-.84-1.96-.94-.26-.1-.45-.14-.64.14-.19.29-.74.94-.91 1.13-.17.19-.34.21-.63.07-.29-.14-1.22-.45-2.33-1.44-.86-.77-1.44-1.72-1.61-2.01-.17-.29-.02-.45.13-.59.13-.13.29-.34.43-.51.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.51-.07-.14-.64-1.54-.88-2.11-.23-.56-.47-.48-.64-.49-.17-.01-.36-.01-.56-.01-.19 0-.5.07-.76.36-.26.29-1 1-1 2.43 0 1.43 1.03 2.81 1.18 3 .14.19 2.03 3.1 4.93 4.23.69.3 1.23.48 1.65.61.69.22 1.32.19 1.81.12.55-.08 1.7-.7 1.94-1.37.24-.67.24-1.25.17-1.37-.07-.12-.26-.19-.55-.33z"></path>
                <circle cx="12" cy="12" r="10"></circle>
              </svg>
            </a>
            <!-- Copy to Clipboard -->
            <button
              type="button"
              class="stwlite-tw-social-share-button"
              :aria-label="social_share_text.copy_link"
              @click="handleCopyLink"
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="stwlite-tw-table-wrapper">
      <div class="stwlite-tw-table-container">
        <table class="stwlite-tw-data-table">
          <tbody>
            <tr>
              <td>{{ wishlist.loading }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div v-else class="saveto-wishlist-empty-wrapper">
    <div class="saveto-wishlist-empty-container">
      <h2>{{ wishlist.empty.title }}</h2>
      <p class="stwlite-tw-subtitle">{{ wishlist.empty.description }}</p>
      <a :href="wishlist.pageUrls.myAccountUrl" class="stwlite-tw-wishlist-empty-action-btn">
        {{ wishlist.loginToView }}
      </a>
    </div>
  </div>

  <!-- Transfer Wishlist Popup -->
  <div v-if="transferWishlistPopup" class="saveto-wishlist-popup">
    <div class="saveto-wishlist-popup-content">
      <h2 :style="{ fontSize: wishlist.pageStyles?.popupTitleSize + 'px', color: wishlist.pageStyles?.popupTitleColor }">{{ wishlist.transferWishlist }}</h2>
      <div class="saveto-wishlist-popup-content-form">
        <select v-model="transferWishlist.collection_id" class="saveto-wishlist-popup-content-form-select">
          <option v-for="option in wishlist.listOptions" :key="option.id" :value="option.id">{{ option.name }}</option>
        </select>
        <button type="button" class="saveto-wishlist-popup-content-form-button" @click="handleTransferWishlist" :disabled="transferringWishlist" :style="{ fontSize: wishlist.pageStyles?.popupButtonTextSize + 'px', color: wishlist.pageStyles?.popupSaveButtonTextColor, backgroundColor: wishlist.pageStyles?.popupSaveButtonBackgroundColor }">
          {{ transferringWishlist ? wishlist.moving : wishlist.move }}
        </button>
        <button type="button" class="saveto-wishlist-popup-content-form-button-cancel" @click="handleCloseTransferWishlistPopup" :style="{ fontSize: wishlist.pageStyles?.popupButtonTextSize + 'px', color: wishlist.pageStyles?.popupCancelButtonTextColor, backgroundColor: wishlist.pageStyles?.popupCancelButtonBackgroundColor }">
          {{ wishlist.cancel }}
        </button>
      </div>
    </div>
  </div>

  <!-- Email Access Popup -->
  <div v-if="emailAccessPopup" class="saveto-wishlist-popup">
    <div class="saveto-wishlist-popup-content" style="width: 500px; max-width: calc(100% - 2rem);">
      <div style="text-align: center; margin-bottom: 24px;">
        <div style="width: 64px; height: 64px; margin: 0 auto 16px; background: #E0F2FE; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#0EA5E9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
            <polyline points="22,6 12,13 2,6"></polyline>
          </svg>
        </div>
        <h2 :style="{ fontSize: wishlist.pageStyles?.popupTitleSize + 'px', color: wishlist.pageStyles?.popupTitleColor, margin: '0 0 8px', fontWeight: '600' }">{{ wishlist.welcome }}</h2>
        <p :style="{ fontSize: wishlist.pageStyles?.popupTextSize + 'px', color: wishlist.pageStyles?.popupTextColor, margin: 0 }">{{ wishlist.enterEmailToAccess }}</p>
      </div>
      <div class="saveto-wishlist-popup-content-form">
        <div style="margin-bottom: 16px;">
          <label :style="{ fontSize: wishlist.pageStyles?.popupTextSize + 'px', color: wishlist.pageStyles?.popupTextColor, display: 'block', marginBottom: '8px', fontWeight: '500' }">{{ wishlist.emailAddress }}</label>
          <input 
            type="email" 
            v-model="emailAccessInput" 
            @keyup.enter="handleEmailAccess"
            :placeholder="wishlist.emailPlaceholder"
            class="saveto-wishlist-popup-content-form-input"
            style="width: 100%;"
          />
        </div>
        <button type="button" class="saveto-wishlist-popup-content-form-button" @click="handleEmailAccess" :disabled="!emailAccessInput || emailAccessInput.trim() === '' || verifyingEmail" :style="{ fontSize: wishlist.pageStyles?.popupButtonTextSize + 'px', color: wishlist.pageStyles?.popupSaveButtonTextColor, backgroundColor: wishlist.pageStyles?.popupSaveButtonBackgroundColor }">
          {{ verifyingEmail ? wishlist.verifying : wishlist.continueToWishlist }}
        </button>
        <button type="button" class="saveto-wishlist-popup-content-form-button-cancel" @click="handleCloseEmailAccessPopup" :style="{ fontSize: wishlist.pageStyles?.popupButtonTextSize + 'px', color: wishlist.pageStyles?.popupCancelButtonTextColor, backgroundColor: wishlist.pageStyles?.popupCancelButtonBackgroundColor }">
          {{ wishlist.cancel }}
        </button>
      </div>
    </div>
  </div>

  <!-- Edit Wishlist Popup -->
  <div v-if="editWishlistPopup" class="saveto-wishlist-popup">
    <div class="saveto-wishlist-popup-content">
      <h2 :style="{ fontSize: wishlist.pageStyles?.popupTitleSize + 'px', color: wishlist.pageStyles?.popupTitleColor }">{{ wishlist.editWishlist }}</h2>
      <div class="saveto-wishlist-popup-content-form">
        <input type="text" id="editWishlistName" v-model="editWishlist.name" :placeholder="wishlist.wishlistName" class="saveto-wishlist-popup-content-form-input">
        <textarea id="editWishlistDescription" v-model="editWishlist.description" :placeholder="wishlist.wishlistDescription" class="saveto-wishlist-popup-content-form-textarea"></textarea>
        <select v-if="collection_user_id === user_id" id="editWishlistStatus" v-model="editWishlist.status" class="saveto-wishlist-popup-content-form-select">
          <option value="publish">{{ wishlist.publish }}</option>
          <option value="draft">{{ wishlist.draft }}</option>
        </select>
        <div v-if="editWishlist.status === 'publish' && collection_user_id === user_id" class="saveto-wishlist-popup-content-form-checkbox">
          <input type="checkbox" v-model="editWishlist.is_default" class="saveto-wishlist-popup-content-form-checkbox-input" id="editWishlistIsDefault">
          <label for="editWishlistIsDefault" :style="{ fontSize: wishlist.pageStyles?.popupTextSize + 'px', color: wishlist.pageStyles?.popupTextColor }">{{ wishlist.isDefault }}</label>
        </div>
        <div class="saveto-wishlist-popup-content-form-checkbox">
          <input type="checkbox" v-model="editWishlist.is_public" class="saveto-wishlist-popup-content-form-checkbox-input" id="editWishlistIsPublic">
          <label for="editWishlistIsPublic" :style="{ fontSize: wishlist.pageStyles?.popupTextSize + 'px', color: wishlist.pageStyles?.popupTextColor }">{{ wishlist.isPublic }}</label>
          <span class="stwlite-tw-tooltip-wrapper">
            <span class="stwlite-tw-tooltip-icon" tabindex="0" :aria-label="wishlist.isPublic">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                <line x1="12" y1="17" x2="12.01" y2="17"></line>
              </svg>
            </span>
            <span class="stwlite-tw-tooltip-content" role="tooltip">
              {{ wishlist.publicTooltip }}
            </span>
          </span>
        </div>
        <div v-if="editWishlist.is_public || wishlist.activePro" class="saveto-wishlist-popup-content-form-section">
          <h3 :style="{ fontSize: wishlist.pageStyles?.popupTextSize + 'px', color: wishlist.pageStyles?.popupTextColor }">{{ wishlist.shareLink }}</h3>
          <div class="stwlite-tw-copy-text-container">
            <div class="stwlite-tw-copy-text-content">
              {{ wishlist.pageUrls.wishlistUrl + editWishlist.url_code }}
            </div>
            <button
              class="stwlite-tw-copy-button"
              @click="handleCopy(wishlist.pageUrls.wishlistUrl + editWishlist.url_code)"
              :aria-label="copied ? wishlist.copiedLabel : wishlist.copyLabel"
              type="button"
            >
              <svg
                v-if="!copied"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
              </svg>
              <svg
                v-else
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <polyline points="20 6 9 17 4 12"></polyline>
              </svg>
            </button>
          </div>
        </div>
        
        <!-- Share Section (Pro Only) -->
        <div v-if="wishlist.activePro && !editWishlist.is_public" class="saveto-wishlist-popup-content-form-section">
          <h3 :style="{ fontSize: wishlist.pageStyles?.popupTextSize + 'px', color: wishlist.pageStyles?.popupTextColor }">{{ wishlist.share }}</h3>
          
          <!-- Share by Email -->
          <div>
            <label :style="{ fontSize: wishlist.pageStyles?.popupTextSize + 'px', color: wishlist.pageStyles?.popupTextColor }">{{ wishlist.shareByEmail }}</label>
            <div class="saveto-wishlist-popup-email-input-container">
              <input 
                type="email" 
                v-model="editWishlistEmailInput" 
                @keyup.enter="handleAddEmail('edit')"
                :placeholder="wishlist.enterEmail"
                class="share-email-input"
              />
              <button type="button" @click="handleAddEmail('edit')" class="share-email-add-btn">
                {{ wishlist.add }}
              </button>
            </div>
            <div v-if="editWishlist.emails.length > 0" class="saveto-wishlist-popup-email-tags">
              <span v-for="email in editWishlist.emails" :key="email" class="saveto-wishlist-popup-email-tag">
                {{ email }}
                <button type="button" @click="handleRemoveEmail(email, 'edit')">×</button>
              </span>
            </div>
          </div>
          
          <!-- Share with Users -->
          <div v-if="wishlist.activePro && wishlist.userRole === 'admin'">
            <div v-if="editWishlistUserOptions.length > 0" class="stwl-popup-section-item-with-clear">
              <label :style="{ fontSize: wishlist.pageStyles?.popupTextSize + 'px', color: wishlist.pageStyles?.popupTextColor }">{{ wishlist.shareWithUsers }}</label>
              <button 
                v-if="editWishlist.user_ids.length > 0"
                type="button" 
                @click="handleClearUsers('edit')"
                class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-p-1.5 stwlite-tw-rounded stwlite-tw-bg-gray-100 stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-text-gray-700 hover:stwlite-tw-bg-gray-400 stwlite-tw-transition-colors"
                :title="wishlist.clearSearch"
                :aria-label="wishlist.clearSearch"
              >
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px;">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
                {{ wishlist.clearSelect }}
              </button>
            </div>
            <div v-if="editWishlistUserOptions.length > 0" class="stwlite-tw-relative">
              <input
                type="text"
                v-model="editWishlistUserSearch"
                @input="filterUsers(editWishlistUserSearch)"
                :placeholder="wishlist.searchUsers"
                class="saveto-wishlist-popup-content-form-input"
                style="width: 100%;"
              />
              <div v-if="editWishlistFilteredUserOptions.length > 0" class="stwlite-tw-absolute stwlite-tw-z-10 stwlite-tw-mt-1 stwlite-tw-w-full stwlite-tw-max-h-60 stwlite-tw-overflow-auto stwlite-tw-bg-white stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-rounded-md stwlite-tw-shadow-lg">
                <div
                  v-for="user in editWishlistFilteredUserOptions"
                  :key="user.value"
                  @click="selectUser(user)"
                  class="stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-cursor-pointer hover:stwlite-tw-bg-gray-100"
                >
                  {{ user.label }}
                </div>
              </div>
            </div>
            <div v-if="editWishlistSelectedUsers.length > 0" class="stwlite-tw-mt-3 stwlite-tw-flex stwlite-tw-flex-wrap stwlite-tw-gap-2">
              <div
                v-for="user in editWishlistSelectedUsers"
                :key="user.value"
                class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-gap-2 stwlite-tw-px-3 stwlite-tw-py-1 stwlite-tw-bg-gray-100 stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-rounded-md"
              >
                <span class="stwlite-tw-text-sm stwlite-tw-text-gray-700">{{ user.label }}</span>
                <button
                  type="button"
                  @click="removeUser(user.value)"
                  class="stwlite-tw-remove-tag-btn stwlite-tw-text-gray-500 hover:stwlite-tw-text-red-500 stwlite-tw-cursor-pointer stwlite-tw-border-0 stwlite-tw-bg-transparent"
                >
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px;">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
                </button>
              </div>
            </div>
            <p v-if="editWishlistUserOptions.length === 0">{{ wishlist.loading }}</p>
          </div>


          <!-- Who Can Edit -->
          <div v-if="wishlist.activePro && parseInt(collection_user_id) === parseInt(user_id)">
            <label :style="{ fontSize: wishlist.pageStyles?.popupTextSize + 'px', color: wishlist.pageStyles?.popupTextColor }">{{ wishlist.whoCanEdit }}</label>
            <div class="saveto-wishlist-popup-email-input-container">
              <input 
                type="email" 
                v-model="editWishlistEditEmailInput" 
                @keyup.enter="handleAddEditEmail()"
                :placeholder="wishlist.enterEmail"
                class="share-email-input"
              />
              <button type="button" @click="handleAddEditEmail()" class="share-email-add-btn">
                {{ wishlist.add }}
              </button>
            </div>
            <div v-if="editWishlist.allowed_edit_emails.length > 0" class="saveto-wishlist-popup-email-tags">
              <span v-for="email in editWishlist.allowed_edit_emails" :key="email" class="saveto-wishlist-popup-email-tag">
                {{ email }}
                <button type="button" @click="handleRemoveEditEmail(email)">×</button>
              </span>
            </div>
          </div>
        </div>
        
        <!-- Restrictions Section (Pro Only) -->
        <div v-if="wishlist.activePro && wishlist.userRole === 'admin' && !editWishlist.is_public" class="saveto-wishlist-popup-content-form-section">
          <h3 :style="{ fontSize: wishlist.pageStyles?.popupTextSize + 'px', color: wishlist.pageStyles?.popupTextColor }">{{ wishlist.restrictions }}</h3>
          
          <!-- Restrict by Roles -->
          <div>
            <div class="stwl-popup-section-item-with-clear">
              <label :style="{ fontSize: wishlist.pageStyles?.popupTextSize + 'px', color: wishlist.pageStyles?.popupTextColor }">{{ wishlist.restrictByRoles }}</label>
              <button 
                v-if="editWishlist.allowed_roles.length > 0"
                type="button" 
                @click="handleClearRoles('edit')"
                class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-p-1.5 stwlite-tw-rounded stwlite-tw-bg-gray-100 stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-text-gray-700 hover:stwlite-tw-bg-gray-400 stwlite-tw-transition-colors"
                :title="wishlist.clearSearch"
                :aria-label="wishlist.clearSearch"
              >
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px;">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
                {{ wishlist.clearSelect }}
              </button>
            </div>
            <div class="stwlite-tw-relative">
              <input
                type="text"
                v-model="editWishlistRoleSearch"
                @input="filterRoles(editWishlistRoleSearch)"
                :placeholder="wishlist.searchRoles"
                class="saveto-wishlist-popup-content-form-input"
                style="width: 100%;"
              />
              <div v-if="editWishlistFilteredRoleOptions.length > 0" class="stwlite-tw-absolute stwlite-tw-z-10 stwlite-tw-mt-1 stwlite-tw-w-full stwlite-tw-max-h-60 stwlite-tw-overflow-auto stwlite-tw-bg-white stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-rounded-md stwlite-tw-shadow-lg">
                <div
                  v-for="role in editWishlistFilteredRoleOptions"
                  :key="role.value"
                  @click="selectRole(role)"
                  class="stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-cursor-pointer hover:stwlite-tw-bg-gray-100"
                >
                  {{ role.label }}
                </div>
              </div>
            </div>
            <div v-if="editWishlistSelectedRoles.length > 0" class="stwlite-tw-mt-3 stwlite-tw-flex stwlite-tw-flex-wrap stwlite-tw-gap-2">
              <div
                v-for="role in editWishlistSelectedRoles"
                :key="role.value"
                class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-gap-2 stwlite-tw-px-3 stwlite-tw-py-1 stwlite-tw-bg-gray-100 stwlite-tw-border stwlite-tw-border-gray-300 stwlite-tw-rounded-md"
              >
                <span class="stwlite-tw-text-sm stwlite-tw-text-gray-700">{{ role.label }}</span>
                <button
                  type="button"
                  @click="removeRole(role.value)"
                  class="stwlite-tw-remove-tag-btn stwlite-tw-text-gray-500 hover:stwlite-tw-text-red-500 stwlite-tw-cursor-pointer stwlite-tw-border-0 stwlite-tw-bg-transparent"
                >
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px;">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <button type="button" class="saveto-wishlist-popup-content-form-button" @click="handleSaveEditWishlist" :disabled="editWishlist.name.length === 0 || editingWishlist" :style="{ fontSize: wishlist.pageStyles?.popupButtonTextSize + 'px', color: wishlist.pageStyles?.popupSaveButtonTextColor, backgroundColor: wishlist.pageStyles?.popupSaveButtonBackgroundColor }">
          {{ editingWishlist ? wishlist.updating : wishlist.update }}
        </button>
        <button type="button" class="saveto-wishlist-popup-content-form-button-cancel" @click="handleCloseEditWishlistPopup" :style="{ fontSize: wishlist.pageStyles?.popupButtonTextSize + 'px', color: wishlist.pageStyles?.popupCancelButtonTextColor, backgroundColor: wishlist.pageStyles?.popupCancelButtonBackgroundColor }">
          {{ wishlist.cancel }}
        </button>
      </div>
    </div>
  </div>

  ${confirmationModalTemplate({
    show: 'deleteConfirmPopup',
    title: 'wishlist.confirmDeleteTitle',
    message: 'wishlist.confirmRemoveItemMessage',
    onCancel: 'handleDeleteItemCancel',
    onConfirm: 'handleDeleteItemConfirm',
    cancelText: 'wishlist.cancel',
    confirmText: 'wishlist.table.delete',
    disabled: 'deletingItem',
  })}
</div>
`

export default templateItem