import confirmationModalTemplate from '../shared/confirmationModalTemplate'

// Inner markup of the gift-box (registry) icon. Wrapping <svg> elements keep
// their own v-if/attrs at each call site; only the inner paths are deduped.
const registryIconInner = `
  <polyline points="20 12 20 22 4 22 4 12"></polyline>
  <rect x="2" y="7" width="20" height="5"></rect>
  <line x1="12" y1="22" x2="12" y2="7"></line>
  <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
  <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
`
const registryIconAttrs = 'viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"'

const template = `
<div id="saveto-wishlist-main-app">
  <div v-if="wishlist.isLoggedIn" class="saveto-wishlist-lists-wrapper">
    <h2 class="stwlite-tw-wishlist-title" :style="{ fontSize: wishlist.pageStyles?.headingTitleSize + 'px', color: wishlist.pageStyles?.headingTitleColor }">{{ wishlist.title }}</h2>
    <div 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">
        <button v-if="wishlist.allowMultipleWishlists === 'yes' || lists.length === 0" type="button" class="stwlite-tw-wishlist-add-item-btn" :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor }" @click="handleAddWishlistPopup">
          {{ wishlist.addWishlist }}
        </button>
      </div>

      <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>
    
    <div v-if="!fetchingItems" class="stwlite-tw-table-wrapper">
      <div 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 data-column="name" :class="['sortable', sortColumn === 'name' ? sortOrder === 'ASC' ? 'sort-asc' : 'sort-desc' : '']" :aria-sort="sortColumn === 'name' ? sortOrder === 'ASC' ? 'ascending' : 'descending' : 'none'" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
                <button type="button" class="stwlite-tw-sort-header-button" @click="handleSort('name')">
                  {{ wishlist.table.name }}
                  <svg class="stwlite-tw-sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
                    <path d="M7 10l5 5 5-5"></path>
                  </svg>
                </button>
              </th>
              <th data-column="status" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
                {{ wishlist.table.status }}
              </th>
              <th v-if="wishlist.userRole === 'admin'" data-column="author" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
                {{ wishlist.table.author }}
              </th>
              <th data-column="created_at" :class="['sortable', sortColumn === 'created_at' ? sortOrder === 'ASC' ? 'sort-asc' : 'sort-desc' : '']" :aria-sort="sortColumn === 'created_at' ? sortOrder === 'ASC' ? 'ascending' : 'descending' : 'none'" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
                <button type="button" class="stwlite-tw-sort-header-button" @click="handleSort('created_at')">
                  {{ wishlist.table.date_added }}
                  <svg class="stwlite-tw-sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
                    <path d="M7 10l5 5 5-5"></path>
                  </svg>
                </button>
              </th>
              <th data-column="actions" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
                {{ wishlist.table.actions }}
              </th>
            </tr>
          </thead>
          <tbody v-if="lists.length > 0" id="tableBody">
            <tr v-for="item in lists" :key="item.id">
              <td data-testid="stwl-wishlist-name" :style="{ fontSize: wishlist.pageStyles?.tableRowTextSize + 'px' }"><a :href="wishlist.pageUrls.wishlistUrl + item.url_code">{{ item.name }}</a></td>
              <td data-testid="stwl-wishlist-status" :style="{ fontSize: wishlist.pageStyles?.tableRowTextSize + 'px' }">
                <span v-if="parseInt(item.is_default) === 1 && item.user_id === user_id" class="stwlite-tw-status-item-badge stwlite-tw-status-item-default">{{ wishlist.default }}</span>
                <span :class="'stwlite-tw-status-item-badge stwlite-tw-status-item-' + item.status.toLowerCase()">{{ item.status === 'publish' ? wishlist.publish : item.status === 'draft' ? wishlist.draft : item.status }}</span>
                <span v-if="parseInt(item.is_public) === 1" class="stwlite-tw-status-item-badge stwlite-tw-status-item-public">{{ wishlist.public }}</span>
                <span v-if="item.registry" class="stwlite-tw-status-item-badge stwlite-tw-status-item-registry">{{ wishlist.registry }}</span>
              </td>
              <td v-if="wishlist.userRole === 'admin'" :style="{ fontSize: wishlist.pageStyles?.tableRowTextSize + 'px' }">{{ getUserName(item.user_id) }}</td>
              <td :style="{ fontSize: wishlist.pageStyles?.tableRowTextSize + 'px' }" :title="wishlist.formatAbsoluteDate(item.created_at)">{{ wishlist.formatRelativeDate(item.created_at) }}</td>
              <td :style="{ fontSize: wishlist.pageStyles?.tableRowTextSize + 'px' }">
                <div class="stwlite-tw-wishlist-items-actions">
                  <button
                    v-if="item.user_id === user_id || wishlist.userRole === 'admin'"
                    type="button"
                    class="stwlite-tw-action-btn stwlite-tw-edit-btn"
                    @click="handleEditWishlistPopup(item.id)"
                  >
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <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>
                  </button>
                  <a
                    v-else
                    :href="wishlist.safeRegistryUrl(item.registry?.public_url) || (wishlist.pageUrls.wishlistUrl + item.url_code)"
                    :class="['stwlite-tw-action-btn', wishlist.safeRegistryUrl(item.registry?.public_url) ? 'stwlite-tw-registry-link-btn' : 'stwlite-tw-view-btn']"
                    :target="wishlist.safeRegistryUrl(item.registry?.public_url) ? '_blank' : null"
                    :rel="wishlist.safeRegistryUrl(item.registry?.public_url) ? 'noopener' : null"
                    :title="wishlist.safeRegistryUrl(item.registry?.public_url) ? wishlist.viewRegistry : null"
                    :aria-label="wishlist.safeRegistryUrl(item.registry?.public_url) ? wishlist.viewRegistry : null"
                  >
                    <svg v-if="wishlist.safeRegistryUrl(item.registry?.public_url)" ${registryIconAttrs}>${registryIconInner}</svg>
                    <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                      <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                  </a>
                  <button
                    v-if="wishlist.registryActive && item.user_id === user_id && !item.registry"
                    type="button"
                    class="stwlite-tw-action-btn stwlite-tw-convert-registry-btn"
                    :title="wishlist.convertToRegistry"
                    :aria-label="wishlist.convertToRegistry"
                    @click="handleOpenConvertRegistry(item.id)"
                  >
                    <svg ${registryIconAttrs}>${registryIconInner}</svg>
                  </button>
                  <a
                    v-else-if="wishlist.registryActive && item.user_id === user_id && wishlist.safeRegistryUrl(item.registry?.public_url)"
                    :href="wishlist.safeRegistryUrl(item.registry.public_url)"
                    class="stwlite-tw-action-btn stwlite-tw-convert-registry-btn"
                    target="_blank"
                    rel="noopener"
                    :title="wishlist.viewRegistry"
                    :aria-label="wishlist.viewRegistry"
                  >
                    <svg ${registryIconAttrs}>${registryIconInner}</svg>
                  </a>
                  <button
                    v-if="(item.user_id === user_id || wishlist.userRole === 'admin') && !isLastUserWishlist(item)"
                    type="button"
                    class="stwlite-tw-action-btn stwlite-tw-delete-btn"
                    @click="handleDelete(item.id)"
                    :disabled="deletingItemId === item.id || deletingItem"
                  >
                    <svg
                      v-if="deletingItemId === item.id && deletingItem"
                      class="stwlite-tw-loading-spinner"
                      width="20"
                      height="20"
                      viewBox="0 0 50 50"
                      style="vertical-align: middle;"
                    >
                      <circle
                        cx="25"
                        cy="25"
                        r="20"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="5"
                        stroke-linecap="round"
                        stroke-dasharray="31.415, 31.415"
                        transform="rotate(0 25 25)"
                      >
                        <animateTransform
                          attributeName="transform"
                          type="rotate"
                          from="0 25 25"
                          to="360 25 25"
                          dur="1s"
                          repeatCount="indefinite"
                        />
                      </circle>
                    </svg>
                    <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <polyline points="3,6 5,6 21,6"></polyline>
                      <path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"></path>
                      <line x1="10" y1="11" x2="10" y2="17"></line>
                      <line x1="14" y1="11" x2="14" y2="17"></line>
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
          <tfoot v-else>
            <tr>
              <td colspan="5">
                <div class="stwlite-tw-saveto-wishlist-empty-container">
                  <h2>{{ wishlist.empty.title }}</h2>
                </div>
              </td>
            </tr>
          </tfoot>
        </table>
      </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="stwlite-tw-itemsSelect" class="stwlite-tw-whitespace-nowrap">{{ wishlist.table.show }}:</label>
            <select v-model="pagination.pageSize" id="stwlite-tw-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>
    <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>

  <!-- Add Wishlist Popup -->
  <div v-if="addWishlistPopup && (wishlist.allowMultipleWishlists === 'yes' || lists.length === 0)" class="saveto-wishlist-popup">
    <div class="saveto-wishlist-popup-content">
      <h2 :style="{ fontSize: wishlist.pageStyles?.popupTitleSize + 'px', color: wishlist.pageStyles?.popupTitleColor }">{{ wishlist.newWishlist }}</h2>
      <div class="saveto-wishlist-popup-content-form">
        <input type="text" id="addWishlistName" v-model="addWishlist.name" :placeholder="wishlist.wishlistName" class="saveto-wishlist-popup-content-form-input">
        <textarea id="addWishlistDescription" v-model="addWishlist.description" :placeholder="wishlist.wishlistDescription" class="saveto-wishlist-popup-content-form-textarea"></textarea>
        <select id="addWishlistStatus" v-model="addWishlist.status" class="saveto-wishlist-popup-content-form-select">
          <option value="publish">{{ wishlist.publish }}</option>
          <option value="draft">{{ wishlist.draft }}</option>
        </select>
        <div v-if="addWishlist.status === 'publish'" class="saveto-wishlist-popup-content-form-checkbox">
          <input type="checkbox" v-model="addWishlist.is_default" class="saveto-wishlist-popup-content-form-checkbox-input" id="addWishlistIsDefault">
          <label for="addWishlistIsDefault" :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="addWishlist.is_public" class="saveto-wishlist-popup-content-form-checkbox-input" id="addWishlistIsPublic">
          <label for="addWishlistIsPublic" :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>
        
        <!-- Share Section (Pro Only) -->
        <div v-if="wishlist.activePro && !addWishlist.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="addWishlistEmailInput" 
                @keyup.enter="handleAddEmail('add')"
                :placeholder="wishlist.enterEmail"
                class="share-email-input"
              />
              <button type="button" @click="handleAddEmail('add')" class="share-email-add-btn">
                {{ wishlist.add }}
              </button>
            </div>
            <div v-if="addWishlist.emails.length > 0" class="saveto-wishlist-popup-email-tags">
              <span v-for="email in addWishlist.emails" :key="email" class="saveto-wishlist-popup-email-tag">
                {{ email }}
                <button type="button" @click="handleRemoveEmail(email, 'add')">×</button>
              </span>
            </div>
          </div>
          
          <!-- Share with Users -->
          <div v-if="wishlist.activePro && wishlist.userRole === 'admin'">
            <div class="stwl-popup-section-item-with-clear">
              <label :style="{ fontSize: wishlist.pageStyles?.popupTextSize + 'px', color: wishlist.pageStyles?.popupTextColor }">{{ wishlist.shareWithUsers }}</label>
              <button 
                v-if="addWishlist.user_ids.length > 0"
                type="button" 
                @click="handleClearUsers('add')"
                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="addWishlistUserSearch"
                @input="filterUsers(addWishlistUserSearch, 'add')"
                :placeholder="wishlist.searchUsers"
                class="saveto-wishlist-popup-content-form-input"
                style="width: 100%;"
              />
              <div v-if="addWishlistFilteredUserOptions.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 addWishlistFilteredUserOptions"
                  :key="user.value"
                  @click="selectUser(user, 'add')"
                  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="addWishlistSelectedUsers.length > 0" class="stwlite-tw-mt-3 stwlite-tw-flex stwlite-tw-flex-wrap stwlite-tw-gap-2">
              <div
                v-for="user in addWishlistSelectedUsers"
                :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, 'add')"
                  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>
          
          <!-- Who Can Edit -->
          <div>
            <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="addWishlistEditEmailInput" 
                @keyup.enter="handleAddEditEmail('add')"
                :placeholder="wishlist.enterEmail"
                class="share-email-input"
              />
              <button type="button" @click="handleAddEditEmail('add')" class="share-email-add-btn">
                {{ wishlist.add }}
              </button>
            </div>
            <div v-if="addWishlist.allowed_edit_emails.length > 0" class="saveto-wishlist-popup-email-tags">
              <span v-for="email in addWishlist.allowed_edit_emails" :key="email" class="saveto-wishlist-popup-email-tag">
                {{ email }}
                <button type="button" @click="handleRemoveEditEmail(email, 'add')">×</button>
              </span>
            </div>
          </div>
        </div>
        
        <!-- Restrictions Section (Pro Only) -->
        <div v-if="wishlist.activePro && wishlist.userRole === 'admin' && !addWishlist.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="addWishlist.allowed_roles.length > 0"
                type="button" 
                @click="handleClearRoles('add')"
                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="addWishlistRoleSearch"
                @input="filterRoles(addWishlistRoleSearch, 'add')"
                :placeholder="wishlist.searchRoles"
                class="saveto-wishlist-popup-content-form-input"
                style="width: 100%;"
              />
              <div v-if="addWishlistFilteredRoleOptions.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 addWishlistFilteredRoleOptions"
                  :key="role.value"
                  @click="selectRole(role, 'add')"
                  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="addWishlistSelectedRoles.length > 0" class="stwlite-tw-mt-3 stwlite-tw-flex stwlite-tw-flex-wrap stwlite-tw-gap-2">
              <div
                v-for="role in addWishlistSelectedRoles"
                :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, 'add')"
                  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="handleCreateWishlist" :disabled="addWishlist.name.length === 0 || addingWishlist" :style="{ fontSize: wishlist.pageStyles?.popupButtonTextSize + 'px', color: wishlist.pageStyles?.popupSaveButtonTextColor, backgroundColor: wishlist.pageStyles?.popupSaveButtonBackgroundColor }">
          {{ addingWishlist ? wishlist.creating : wishlist.create }}
        </button>
        <button type="button" class="saveto-wishlist-popup-content-form-button-cancel" @click="handleCloseAddWishlistPopup" :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 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'" 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 ? copiedLabel : 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 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 gap-2"
                :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="editWishlistUserSearch"
                @input="filterUsers(editWishlistUserSearch, 'edit')"
                :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, 'edit')"
                  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, 'edit')"
                  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>
          
          <!-- Who Can Edit -->
          <div v-if="wishlist.activePro && parseInt(editWishlist.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('edit')"
                :placeholder="wishlist.enterEmail"
                class="share-email-input"
              />
              <button type="button" @click="handleAddEditEmail('edit')" 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, 'edit')">×</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, 'edit')"
                :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, 'edit')"
                  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, 'edit')"
                  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="handleEditWishlist" :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>

  <!-- Convert to Registry Modal (web component, registered by registry plugin) -->
  <stwreg-convert-modal
    v-if="wishlist.registryActive && convertCollectionId"
    :collection-id="convertCollectionId"
    @close="handleCloseConvertRegistry"
    @converted="handleRegistryConverted"
  ></stwreg-convert-modal>

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

export default template