const wishlistPublicTemplatePro = `
<div v-if="!wishlist.disablePublicWishlists" id="saveto-wishlist-public-app" class="saveto-wishlist-public-lists-wrapper">
  <h2 class="stwlite-tw-wishlist-title" :style="{ fontSize: wishlist.pageStyles?.headingTitleSize + 'px', color: wishlist.pageStyles?.headingTitleColor }">{{ wishlist.publicWishlistsTitle }}</h2>
  <div class="stwlite-tw-subtitle" :style="{ fontSize: wishlist.pageStyles?.headingTextSize + 'px', color: wishlist.pageStyles?.headingTextColor }" v-html="wishlist.sanitizeSubtitleHtml(wishlist.publicWishlistsDescription)"></div>
  
  <div class="saveto-wishlist-container stwlite-tw-item-wishlist">
    <div class="stwlite-tw-search-wrapper" :class="{ 'stwlite-tw-has-content': publicSearch }">
      <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="publicSearch"
        type="text"
        class="stwlite-tw-search-input"
        :placeholder="wishlist.searchPlaceholder"
        :aria-label="wishlist.searchLabel"
        @input="onPublicSearch"
      >
      <button type="button" class="stwlite-tw-clear-button" :aria-label="wishlist.clearSearch" @click="clearPublicSearch">
        &times;
      </button>
    </div>
  </div>
  
  <div v-if="!fetchingPublicItems" 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', publicSortColumn === 'name' ? publicSortOrder === 'asc' ? 'sort-asc' : 'sort-desc' : '']" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }" @click="handlePublicSort('name')">
              {{ wishlist.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="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" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
              {{ wishlist.table.date_added }}
            </th>
            <th data-column="actions" :style="{ fontSize: wishlist.pageStyles?.tableColumnTextSize + 'px' }">
              {{ wishlist.table.actions }}
            </th>
          </tr>
        </thead>
        <tbody v-if="publicLists.length > 0" id="publicTableBody">
          <tr v-for="item in publicLists" :key="item.id" :style="{ fontSize: wishlist.pageStyles?.tableRowTextSize + 'px' }">
            <td><a :href="wishlist.pageUrls.wishlistUrl + item.url_code">{{ item.name }}</a></td>
            <td>
              <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>
            </td>
            <td v-if="wishlist.userRole === 'admin'">{{ getUserName(item.user_id) }}</td>
            <td>{{ new Date(item.created_at).toLocaleDateString() }}</td>
            <td>
              <div class="stwlite-tw-wishlist-items-actions">
                <a
                  :href="wishlist.pageUrls.wishlistUrl + item.url_code"
                  class="stwlite-tw-action-btn stwlite-tw-view-btn"
                >
                  <svg 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>
              </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-publicTableInfo">{{ publicTableInfo }}</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-publicItemsSelect" class="stwlite-tw-whitespace-nowrap">{{ wishlist.table.show }}:</label>
          <select v-model="publicPagination.pageSize" id="stwlite-tw-publicItemsSelect" @change="handlePublicItemsPerPageChange" 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-publicPrevBtn" :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor }" @click="handlePublicPagination('prev')" :disabled="publicPagination.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-publicPaginationNumbers" v-if="publicPaginationItems && publicPaginationItems.length > 0">
            <span v-for="item in publicPaginationItems" :key="typeof item === 'number' ? item : 'ellipsis'" style="display: contents;">
              <button
                v-if="typeof item === 'number'"
                :class="['stwlite-tw-pagination-number', { 'active': item === publicPagination.current }]"
                :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor, opacity: item === publicPagination.current ? 1 : 0.5 }"
                @click="handlePublicPaginationNumber(item)"
                :disabled="item === publicPagination.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-publicNextBtn" :style="{ fontSize: wishlist.pageStyles?.buttonTextSize + 'px', color: wishlist.pageStyles?.buttonTextColor, backgroundColor: wishlist.pageStyles?.buttonBackgroundColor }" @click="handlePublicPagination('next')" :disabled="publicPagination.current === publicPagination.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>
`

export default wishlistPublicTemplatePro