globalThis.spotler_search_templates = globalThis.spotler_search_templates || {};
globalThis.spotler_search_templates['837caaa7-c813-48ed-838f-9fd2297037e6'] = (function (props) {
  const currencyFormatter = new Intl.NumberFormat("nl-NL", {
    style: "currency",
    currency: props.spotler.getConfig("currency") || "EUR",
  });

  function formatCurrency(price) {
    let withoutSpace = currencyFormatter.format(price);
    return withoutSpace.replace(/(\p{Sc})\s(\d)/gu, '$1$2');
  }

  function matchQueryInBold(str) {
    if (str === undefined) {
      return "";
    }

    const escapedSearchTerm = props.spotler
      .getSearchTerm()
      .replace(/([.?*+^$[\]\\(){}|-])/g, "\\$&");

    return str.replace(
      new RegExp(escapedSearchTerm, "gi"),
      '<span class="sqr-font-bold">$&</span>'
    );
  }

  function escapeHtml(str) {
    const entityMap = {
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
      '"': "&quot;",
      "'": "&#39;",
      "/": "&#x2F;",
      "`": "&#x60;",
      "=": "&#x3D;",
    };

    return str.replace(/[&<>"'`=/]/g, (s) => entityMap[s]);
  }

  function triggerChangeView(event, view) {
    event.preventDefault();

    props.spotler.triggerViewChange(view);
  }

  function revertToPreviousSuccessfulState(event) {
    props.spotler.revertToPreviousSuccessfulState();
  }

  async function SuggestView(props) {
    const {items, content} = await props.spotler.fetchResults();

    return `
      <div 
        data-sqr-container 
        class="sqr-absolute sqr-bg-white sqr-top-0 sqr-left-0 sqr-right-0 sqr-z-50 sqr-max-w-full sqr-min-w-[500px] sqr-overflow-x-hidden sqr-overflow-y-auto"
      >
        <div class="sqr-border-gray-300 sqr-border-t sqr-p-2">
          <div class="sqr-text-gray-500 sqr-text-sm sqr-text-center sqr-mb-3">Zoeksuggesties</div>
          <div>
            <div>
              <span class="sqr-font-bold">Makita</span> accu
            </div>
            
            <div>
              <span class="sqr-font-bold">Makita</span> accuboormachine
            </div>
            
            <div>
              <span class="sqr-font-bold">Makita</span> bithouder
            </div>
          </div>
        </div>
        
        <div class="sqr-border-gray-300 sqr-border-t sqr-p-2">
          <div class="sqr-text-gray-500 sqr-text-sm sqr-text-center sqr-mb-3">Itemsuggesties</div>
          
          <div>
            ${items.data?.map((item) => `
              <div class="sqr-flex sqr-mb-3">
                <img class="sqr-h-20 sqr-w-20 sqr-object-scale-down" src="${item.properties.image}" alt="" />
                <div class="sqr-grow sqr-px-4">
                  <div>${matchQueryInBold(item.properties.title)}</div>
                  
                  <div>
                    <span data-sqr-stars="4">&starf;&starf;&starf;&starf;&star;</span>
                    <span data-sqr-reviews>53 reviews</span>
                  </div>
                </div>
                
                <div class="sqr-self-end sqr-text-right">
                  <div class="sqr-line-through sqr-text-gray-400">&euro;299</div>
                  <div class="sqr-text-xl sqr-font-bold">${formatCurrency(item.properties.price)}</div>
                </div>
              </div>
            `).join("")}
          </div>
          
          <div class="sqr-text-gray-500 sqr-text-sm sqr-underline sqr-text-right tablet:sqr-text-gray-400">
            <a href="#" onclick="${props.spotler.bindFunction(triggerChangeView, "items")}">
              Alle items (${items.meta?.total})
            </a>
          </div>
        </div>
        
        <div class="sqr-border-gray-300 sqr-border-t sqr-p-2">
          <div class="sqr-text-gray-500 sqr-text-sm sqr-text-center sqr-mb-3">Meer informatie</div>
          
          <div class="" data-search-results="">
            ${content.data?.map((content) => `
              <div>${matchQueryInBold(content.properties.title)}</div>
            `).join("")}
          </div>
          
          <div class="sqr-text-gray-500 sqr-text-sm sqr-underline sqr-text-right">
            <a href="#" onclick="${props.spotler.bindFunction(triggerChangeView, "items")}">
              Alle informatie (${content.meta?.total})
            </a>
          </div>
        </div>
      </div>
    `;
  }

  function TabletAndDesktopHeading(props, items) {
    return `
    <div class="tablet:sqr-flex sqr-hidden sqr-text-sm sqr-text-gray-600 sqr-border-b sqr-items-start sqr-sticky sqr-top-0 sqr-p-3">
      <div class="sqr-w-[350px]"></div>
  
      <div class="sqr-flex sqr-w-full sqr-justify-end sqr-items-center">
        <label>
          <span class="sqr-text-[#8a8a8a] sqr-text-[14px] sqr-mr-[6px]">Toont alle ${items?.meta?.total} ${items?.meta?.total === 1 ? "product" : "producten"}</span>
          <select 
            onchange="${props.spotler.bindFunction((event) => props.spotler.triggerSortingChange( "items", event.currentTarget.value ))}" 
            class="sqr-mr-3 sqr-py-[4px] sqr-pl-[8px] sqr-pr-[48px] sqr-border sqr-border-[#5AB390] sqr-rounded-full sqr-text-[14px] sqr-text-[#39425d]"
          >
            <option value="">Relevantie</option>
            ${items?.sort_fields ?.map( (sortField) => `
              <option value="${sortField.id}" ${ String(props.state.datasets["items"].sortBy) === String(sortField.id) ? "selected" : ""}>
                ${sortField.label}
              </option>
            `).join("")}
          </select>
        </label>
        
        <button 
          data-sqr-close type="button" 
          class="sqr-border-none sqr-text-gray-400 sqr-bg-transparent sqr-hover:bg-gray-200 sqr-hover:text-gray-900 sqr-rounded-lg sqr-text-sm sqr-p-1.5 sqr-inline-flex sqr-items-center"
        >
          <svg aria-hidden="true" class="sqr-w-5 sqr-h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
          
          <span class="sqr-sr-only">Close modal</span>
        </button>
      </div>
    </div>
  `;
  }

  function MobileHeading(props, items) {
    function toggleResultsFilterMobile(event) {
      const element = event.target;
      const view = element.dataset.sptlrMobileViewTrigger;
      const container = event.target.closest("[data-sptlr-container]");

      container.querySelectorAll("[data-sptlr-mobile-view]").forEach((el) => {
        el.classList.toggle("sqr-hidden", el.dataset.sptlrMobileView !== view);
      });

      container
        .querySelectorAll("[data-sptlr-mobile-view-trigger]")
        .forEach((el) => {
          el.classList.toggle(
            "sqr-opacity-50",
            el.dataset.sptlrMobileViewTrigger !== view
          );
        });

      props.state.datasets["items"].mobileView = view;
    }

    return `
      <div class="tablet:sqr-hidden sqr-flex sqr-w-full sqr-items-center sqr-py-3 sqr-px-3">
        <label class="sqr-w-full">
          <select 
            onchange="${props.spotler.bindFunction((event) => props.spotler.triggerSortingChange( "items", event.currentTarget.value ))}" 
            class="sqr-w-full sqr-mr-4 sqr-py-[8px] sqr-pl-[16px] sqr-pr-[48px] sqr-border sqr-border-[#5AB390] sqr-rounded-full sqr-text-[14px] sqr-text-[#39425d]"
          >
            <option value="">Relevantie</option>
            ${items?.sort_fields ?.map( (sortField) => `
              <option value="${sortField.id}" ${ String(props.state.datasets["items"].sortBy) === String(sortField.id) ? "selected" : ""}>
                ${sortField.label}
              </option>
            `).join("")}
          </select>
        </label>
        
        <button 
          data-sqr-close type="button" 
          class="sqr-border-none sqr-text-gray-400 sqr-bg-transparent sqr-hover:bg-gray-200 sqr-hover:text-gray-900 sqr-rounded-lg sqr-text-sm sqr-p-1.5 sqr-inline-flex sqr-items-center"
        >
          <svg aria-hidden="true" class="sqr-w-5 sqr-h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
          
          <span class="sqr-sr-only">Close modal</span>
        </button>
      </div>
      
      <div class="tablet:sqr-hidden sqr-flex sqr-bg-[#5BB290] sqr-text-white sqr-text-center sqr-py-3 sqr-rounded-full sqr-mb-[15px] sqr-mx-3">
        <div 
          data-sptlr-mobile-view-trigger="results" 
          onclick="${props.spotler.bindFunction(toggleResultsFilterMobile)}" 
          class="${props.state.datasets["items"].mobileView === "results" ? "" : "sqr-opacity-50" } sqr-w-1/2"
        >
          Resultaten (${items?.meta?.total})
        </div>
        
        <div 
          data-sptlr-mobile-view-trigger="facets" 
          onclick="${props.spotler.bindFunction(toggleResultsFilterMobile)}" 
          class="${props.state.datasets["items"].mobileView === "facets" ? "" : "sqr-opacity-50"} sqr-w-1/2"
        >
          Filteren
        </div>
      </div>
    `;
  }

  //Spotler container
  async function ItemsView(props) {
    const {items} = await props.spotler.fetchResults();
    props.state.datasets["items"].mobileView = props.state.datasets["items"].mobileView ?? "results";

    function toggleResultsFilterMobile(event) {
      const element = event.target;
      const view = element.dataset.sptlrMobileViewTrigger;
      const container = event.target.closest("[data-sptlr-container]");

      container.querySelectorAll("[data-sptlr-mobile-view]").forEach((el) => {
        el.classList.toggle("sqr-hidden", el.dataset.sptlrMobileView !== view);
      });

      container
        .querySelectorAll("[data-sptlr-mobile-view-trigger]")
        .forEach((el) => {
          el.classList.toggle(
            "sqr-opacity-50",
            el.dataset.sptlrMobileViewTrigger !== view
          );
        });

      props.state.datasets["items"].mobileView = view;
    }

    props.state.datasets["items"].filterStates = items.facets.reduce( (obj, f) => {
        obj[f.id] = {collapsed: f.is_default_collapsed, ...obj[f.id]};
        return obj;
      },
      props.state.datasets["items"].filterStates ?? {}
    );

    if (items.meta.total > items.meta.offset + items.meta.limit) {
      props.spotler.registerInfiniteScroll(
        "items",
        "[data-sqr-infinite-scroll-item]:last-child",
        ({items}) => Items(items.data)
      );
    }

    return `
      <div 
        data-sptlr-container 
        data-sqrc="${props.spotler.getCollectorData("items")}" 
        class="spotler-container container sqr-relative sqr-flex sqr-flex-col sqr-top-0 sqr-scroll-mt-custom sqr-left-0 sqr-right-0 sqr-w-full sqr-min-w-full desktop:sqr-min-w-[1024px] sqr-inset-4 sqr-mb-4 sqr-bg-white sqr-overflow-hidden"
      >
        ${TabletAndDesktopHeading(props, items)}
        ${MobileHeading(props, items)}
        <div class="sqr-flex ${props.spotler.getConfig("floatingFilterBar") ? "" : "sqr-overflow-y-auto"}">
          <div 
            data-sptlr-mobile-view="facets" 
            class="sqr-w-full ${props.state.datasets["items"].mobileView === "facets" ? "" : "sqr-hidden"} tablet:sqr-block tablet:sqr-w-[350px] ${props.spotler.getConfig("floatingFilterBar") ? "sqr-overflow-y-auto" : "" }"
          >
            <div class="sqr-m-4">
              ${ActiveFilters(props.state.datasets["items"], items?.facets)}
              ${Filters(items?.facets)}
            </div>
          </div>
          
          <div 
            data-sptlr-mobile-view="results" 
            class="sqr-w-full ${props.state.datasets["items"].mobileView === "results" ? "" : "sqr-hidden" } tablet:sqr-block sqr-px-4 ${ props.spotler.getConfig("floatingFilterBar") ? "sqr-overflow-y-auto" : ""}"
          >
            ${items.meta.total === 0 ? `
              <div class="sqr-text-center">
                <p>We hebben geen resultaten gevonden</p>
                
                ${props.spotler.hasPreviousSuccessfulState() ? `
                  <button 
                    type="button" 
                    onclick="${props.spotler.bindFunction(revertToPreviousSuccessfulState)}" 
                    class="sqr-bg-transparent sqr-mx-auto sqr-border-none sqr-cursor-pointer sqr-text-color-facet-toggle sqr-text-size-facet-toggle sqr-flex sqr-items-center sqr-font-medium sqr-no-underline hover:sqr-underline"
                  >
                    Toon eerdere resultaten
                  </button>
                  ` : ``}
              </div>
              ` : `
                ${SpellcheckMessage(items?.spellcheck, items?.meta?.total)}
                ${Banners(items?.banners)}
                <div 
                  class="row" 
                  data-sqr-infinite-scroll-container
                >
                  ${Items(items?.data)}
                </div>
              `
            }
          </div>
        </div>
      </div>
    `;
  }

  function ActiveFilters(dataset, facets) {
    if (!dataset.filters || dataset.filters.length === 0) {
      return "";
    }

    const filters = [];

    for (const filter of dataset.filters) {
      const facet = facets.find((f) => f.name === filter.field);

      if (!facet) {
        continue;
      }

      switch (facet.type) {
        case "dualslider":
          filters.push({
            name: facet.name,
            label: facet.label,
            value: `${renderFilterLabel(
              filter.start,
              facet.prefix,
              facet.suffix
            )} - ${renderFilterLabel(filter.end, facet.prefix, facet.suffix)}`,
          });
          break;
        case "multiselect":
          filters.push({
            name: facet.name,
            label: facet.label,
            value: facet.values
              .filter((v) => filter.values.includes(v.value))
              .map((v) =>
                renderFilterLabel(v.label, facet.prefix, facet.suffix)
              )
              .join(", "),
          });
          break;
        default:
          filters.push({
            name: facet.name,
            label: facet.label,
            value: renderFilterLabel(filter.value, facet.prefix, facet.suffix),
          });
      }
    }

    if (filters.length === 0) {
      return "";
    }

    function clearFilters(event, dataset) {
      event.preventDefault();
      props.spotler.clearAllFilters(dataset);
    }

    return `
      <div class="sqr-border-b sqr-border-gray-200 sqr-mb-6">
        <div class="sqr-flex sqr-w-full sqr-items-center sqr-justify-between sqr-bg-white sqr-my-3 sqr-text-sm sqr-text-gray-400 sqr-hover:text-gray-500">
          <h3 class="sqr-m-0 sqr-font-medium sqr-text-gray-900">Gekozen filters</h3>
          <button 
            type="button" 
            onclick="${props.spotler.bindFunction(clearFilters, "items")}" 
            class="sqr-bg-transparent sqr-border-none sqr-cursor-pointer sqr-text-blue-600 sqr-font-medium hover:sqr-underline"
          >
            Wis alle filters
          </button>
        </div>
        
        <div class="sqr-my-2">
            ${filters.map(ActiveFilter).join("")}
        </div>
      </div>
    `;
  }

  function ActiveFilter(filter) {
    function removeFilter(event, dataset, name) {
      props.spotler.triggerFilterChange(dataset, name);
    }

    return `
      <span class="sqr-inline-flex sqr-items-center sqr-px-2 sqr-py-1 sqr-mr-2 sqr-my-1 sqr-text-xs sqr-font-medium sqr-text-blue-800 sqr-bg-blue-100 sqr-rounded">
        ${filter.label}: ${filter.value}
        <button 
          type="button" 
          onclick="${props.spotler.bindFunction(removeFilter, "items", filter.name )}" 
          class="sqr-border-none sqr-inline-flex sqr-items-center sqr-p-0.5 sqr-ml-2 sqr-text-xs sqr-text-blue-400 sqr-bg-transparent sqr-rounded-sm hover:sqr-bg-blue-200 hover:sqr-text-blue-900" 
          aria-label="Remove"
        >
          <svg aria-hidden="true" class="sqr-w-3.5 sqr-h-3.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
          
          <span class="sqr-sr-only">Remove badge</span>
        </button>
      </span>
    `;
  }

  function Filters(filters) {
    return filters?.map((facet) => {
      switch (facet.type) {
        case "select":
          return renderSelectFilter({...facet, dataset: "items"});
        case "multiselect":
          return renderMultiSelectFilter({...facet, dataset: "items"});
        case "radio":
          return renderRadioFilter({...facet, dataset: "items"});
        case "slider":
          return renderSliderFilter({...facet, dataset: "items"});
        case "dualslider":
          return renderDualSliderFilter({...facet, dataset: "items"});
      }
    }).join("");
  }

  function SpellcheckMessage(spellcheck, total) {
    if (!spellcheck) {
      return "";
    }

    return `
      <div class="sqr-text-center sqr-pb-4 sqr-border-0 sqr-border-gray-300 sqr-border-b sqr-border-solid">
        U zocht op 
        <span class="sqr-underline sqr-italic">${spellcheck.old}</span>, maar wij vonden geen resultaten. U zocht op 
        <span class="sqr-underline sqr-italic">${spellcheck.new}</span>, wij vonden ${total} ${total === 1 ? "resultaat" : "resultaten"}.
      </div>
    `;
  }

  function Banners(banners) {
    if (!Array.isArray(banners) || banners.length === 0) {
      return "";
    }

    const banner = banners.pop();
    const bannerTypes = Object.keys(banner);
    let bannerHtml = "";

    for (let i = 0, l = bannerTypes.length; i < l; i++) {
      const bannerType = bannerTypes[i];

      switch (bannerType) {
        case "mobile":
          bannerHtml += Banner(
            banner,
            bannerType,
            "sqr-block tablet:sqr-hidden"
          );
          break;
        case "tablet":
          bannerHtml += Banner(
            banner,
            bannerType,
            "sqr-hidden tablet:sqr-block desktop:sqr-hidden"
          );
          break;
        case "desktop":
          bannerHtml += Banner(
            banner,
            bannerType,
            "sqr-hidden desktop:sqr-block"
          );
          break;
      }
    }

    return bannerHtml;
  }

  function Banner(banner, type, mediaClasses) {
    if (!(type in banner)) {
      return "";
    }

    if (banner[type].url) {
      return `
        <a 
          class="${mediaClasses}" 
          href="${banner[type].url}" data-sqrc-banner="${banner.id}" 
          data-sqrc-banner-url="${banner[type].url}"
        >
          <img 
            loading="lazy" 
            class="sqr-w-full" 
            src="${banner[type].image}"
          />
        </a>
      `;
    }

    return `<img loading="lazy" data-sqrc-banner="${banner.id}" class="sqr-w-full ${mediaClasses}" src="${banner[type].image}" />`;
  }

  function Items(items) {
    return items?.map(Item).join("");
  }

  // Item setup
  // function Item(item) {
  //   return `
  //     <div
  //         class="sqr-group col-12 col-md-6 col-xl-4 product-card mb-3 post-${item.properties.id} product type-product status-publish has-post-thumbnail product_cat-boxen product_cat-hoge-box first instock taxable shipping-taxable purchasable product-type-simple"
  //         data-component="product-card"
  //         data-sqrc-item="${item.properties.id}" 
  //         data-sqr-infinite-scroll-item
  //     >
  //       <div class="product-card__wrapper rounded-5 h-100 d-flex flex-column overflow-hidden position-relative bg-white">
  //         <a
  //           href="${item.properties.detail_url}"
  //           title="${item.properties.title}"
  //         >
  //           <div class="product-card__image">
  //             <img
  //               loading="lazy" 
  //               alt="${item.properties.title}" 
  //               src="${item.properties.image}" 
  //               onerror="this.src='${props.spotler.getConfig("defaultNoImage")}';this.onerror='';" 
  //               class="product-image-1"
  //             >
  //           </div>
  //         </a>
    
  //         <div class="product-card__favo">
  //           <div 
  //             class="tinv-wraper woocommerce tinv-wishlist tinvwl-shortcode-add-to-cart tinvwl-template_redirect" 
  //             data-tinvwl_product_id="${item.properties.id}"
  //           >
  //             <a
  //               role="button"
  //               tabindex="0"
  //               name="bewaar-voor-later"
  //               aria-label="Bewaar voor later"
  //               class="tinvwl_add_to_wishlist_button tinvwl-icon-heart no-txt tinvwl-position-shortcode"
  //               data-tinv-wl-list="[]"
  //               data-tinv-wl-product="${item.properties.id}"
  //               data-tinv-wl-productvariation="0"
  //               data-tinv-wl-productvariations="[]"
  //               data-tinv-wl-producttype="simple"
  //               data-tinv-wl-action="addto"
  //             ></a>

  //             <div class="tinvwl-tooltip">Bewaar voor later</div>
  //           </div>
  //         </div>
  //         <div class="product-card__details p-3 d-flex flex-column h-100">
  //           <div class="product-card__usp d-md-block d-lg-block d-xl-block">
  //               <div class="product-card__usp"></div>
  //           </div>

  //           <div
  //               class="product-card__top pb-2 flex-grow-1"
  //               style="min-height: 0;"
  //           >
  //             <div class="product-card__title">
  //                 <a
  //                     href="${item.properties.detail_url}"
  //                     title="${item.properties.title}"
  //                     class="text-decoration-none h6"
  //                 >
  //                     ${item.properties.title}
  //                 </a>
  //             </div>
              
  //             <!-- TODO attributes not in feed -->
  //             <div class="product-card__attributes fs-7">
  //                 <span>Gemonteerde levering | Premium kwaliteit</span>
  //             </div>

  //             <div class="product-card__rating pt-2"></div>
  //           </div>

  //           <div class="product-card__bottom d-flex justify-content-between pt-2 align-items-end">
  //             <div class="product-card__price d-flex flex-column">
  //               ${renderPrice(item)}
            
  //               <span class="inclprice fs-7 lh-sm text-primary">
  //                 <span class="woocommerce-Price-amount amount">
  //                   <span class="woocommerce-Price-amount amount">
  //                     <bdi>
  //                       ${formatCurrency(item.properties['retailprice'])}
  //                     </bdi>
  //                   </span>
  //                 </span> incl. BTW
  //               </span>
  //             </div>

  //             <div class="input-group-cart add_to_cart d-flex">
  //               <input type="hidden" name="add-to-cart" value="${item.properties.id}">

  //               <input
  //                 type="number"
  //                 class="form-control cart-group qty"
  //                 name="quantity"
  //                 data-product_id="${item.properties.id}"
  //                 value="1"
  //                 title="Aantal"
  //                 min="1" max=""
  //                 step="1"
  //                 placeholder=""
  //                 inputmode="numeric"
  //                 autocomplete="off"
  //               >

  //               <a
  //                 href="?add-to-cart=${item.properties.id}&amp;quantity=1"
  //                 data-quantity="1"
  //                 data-product_id="${item.properties.id}"
  //                 data-product_sku="${item.properties.sku}"
  //                 class="button btn btn-primary add_to_cart_button ajax_add_to_cart"
  //                 aria-label="${item.properties.title}"
  //                 rel="nofollow"
  //               >
  //                 <svg
  //                   class="svg-inline--fa fa-cart-plus"
  //                   aria-hidden="true"
  //                   focusable="false"
  //                   data-prefix="fas"
  //                   data-icon="cart-plus"
  //                   role="img"
  //                   xmlns="http://www.w3.org/2000/svg"
  //                   viewBox="0 0 576 512"
  //                   data-fa-i2svg=""
  //                 >
  //                   <path fill="currentColor" d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96zM252 160c0 11 9 20 20 20h44v44c0 11 9 20 20 20s20-9 20-20V180h44c11 0 20-9 20-20s-9-20-20-20H356V96c0-11-9-20-20-20s-20 9-20 20v44H272c-11 0-20 9-20 20z"></path>
  //                 </svg>
  //               </a>
  //             </div>
  //           </div>
  //         </div>
  //       </div>
  //     </div>
  //   `;
  // }
  
  function Item(item) {
    let reviewCountRaw = item.properties.rating_count ? item.properties.rating_count[0] : '';
    let reviewCountDecimals = reviewCountRaw.split('.');
    let reviewCount = reviewCountDecimals[0];

    return `
      <div
          class="sqr-group col-12 col-md-6 col-xl-4 product-card mb-3 post-${item.properties.id} product type-product status-publish has-post-thumbnail product_cat-boxen product_cat-hoge-box first instock taxable shipping-taxable purchasable product-type-simple"
          data-component="product-card"
          data-sqrc-item="${item.properties.id}" 
          data-sqr-infinite-scroll-item
      >
        <div class="product-card__wrapper rounded-5 h-100 d-flex flex-column overflow-hidden position-relative bg-white">
          <a
            href="${item.properties.detail_url}"
            title="${item.properties.title}"
          >
            <div class="product-card__image">
              <img
                loading="lazy" 
                alt="${item.properties.title}" 
                src="${item.properties.image}" 
                onerror="this.src='${props.spotler.getConfig("defaultNoImage")}';this.onerror='';" 
                class="product-image-1"
              >
            </div>
          </a>

          <div class="product-card__favo">
            <div 
              class="tinv-wraper woocommerce tinv-wishlist tinvwl-shortcode-add-to-cart tinvwl-template_redirect" 
              data-tinvwl_product_id="${item.properties.id}"
            >
              <a
                role="button"
                tabindex="0"
                name="bewaar-voor-later"
                aria-label="Bewaar voor later"
                class="tinvwl_add_to_wishlist_button tinvwl-icon-heart no-txt tinvwl-position-shortcode"
                data-tinv-wl-list="[]"
                data-tinv-wl-product="${item.properties.id}"
                data-tinv-wl-productvariation="0"
                data-tinv-wl-productvariations="[]"
                data-tinv-wl-producttype="simple"
                data-tinv-wl-action="addto"
              ></a>

              <div class="tinvwl-tooltip">Bewaar voor later</div>
            </div>
          </div>

          <div class="product-card__details p-3 d-flex flex-column h-100">
            <div class="product-card__usp d-md-block d-lg-block d-xl-block">
                <div class="product-card__usp"></div>
            </div>

            <div class="product-card__top pb-2 flex-grow-1" style="min-height: 0;">
              <div class="product-card__title">
                  <a
                      href="${item.properties.detail_url}"
                      title="${item.properties.title}"
                      class="text-decoration-none h6"
                  >
                      ${item.properties.title}
                  </a>
              </div>
              
              <div class="product-card__attributes fs-7 ${item.properties.custom_attributes ? "" : "SooqrHide"}">
              
                <span>${item.properties.custom_attributes}</span>
            </div>

              <div class="product-card__rating pt-2 sqr-flex sqr-items-center">
                ${item.properties.rating_avg && item.properties.rating_avg[0] !== '0' ? `
                  <div class="sqr-w-[103px]">
                    <div class="sqr-whitespace-nowrap sqr-overflow-hidden" style="width:${item.properties.rating_avg[0] * 20}%">
                        <svg class="svg-inline--fa fa-star color-stars" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg><!-- <i class="fas fa-star color-stars"></i> Font Awesome fontawesome.com -->
                        <svg class="svg-inline--fa fa-star color-stars" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg><!-- <i class="fas fa-star color-stars"></i> Font Awesome fontawesome.com -->
                        <svg class="svg-inline--fa fa-star color-stars" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg><!-- <i class="fas fa-star color-stars"></i> Font Awesome fontawesome.com -->
                        <svg class="svg-inline--fa fa-star color-stars" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg><!-- <i class="fas fa-star color-stars"></i> Font Awesome fontawesome.com -->
                        <svg class="svg-inline--fa fa-star color-stars" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"></path></svg><!-- <i class="fas fa-star color-stars"></i> Font Awesome fontawesome.com -->
                    </div>
                  </div>
                `:``}
                ${item.properties.rating_count ? `
                <small class="text-primary ms-2">${reviewCount} ${reviewCount === '1' ? 'beoordeling' : 'beoordelingen'}</small>
                `:``}
              </div>
            </div>

            <div class="product-card__bottom d-flex justify-content-between pt-2 align-items-end">
              <div class="product-card__price d-flex flex-column">
                ${renderPrice(item)}
                <span class="inclprice fs-7 lh-sm text-primary">
                  <span class="woocommerce-Price-amount amount">
                    <span class="woocommerce-Price-amount amount">
                      <bdi>${formatCurrency(item.properties['priceincl'])}</bdi>
                    </span>
                  </span> incl. BTW
                </span>
              </div>

              <div class="input-group-cart add_to_cart d-flex">
                <input type="hidden" name="add-to-cart" value="${item.properties.id}">
                <input type="number"
                       class="form-control cart-group qty"
                       name="quantity"
                       data-product_id="${item.properties.id}"
                       value="1"
                       title="Aantal"
                       min="1" 
                       step="1"
                       autocomplete="off">
                <a 
                   data-quantity="1"
                   data-product_id="${item.properties.id}"
                   class="button btn btn-primary add_to_cart_button ajax_add_to_cart"
                   aria-label="${item.properties.title}"
                   rel="nofollow">
                  <svg class="svg-inline--fa fa-cart-plus" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cart-plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                    <path fill="currentColor" d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96zM252 160c0 11 9 20 20 20h44v44c0 11 9 20 20 20s20-9 20-20V180h44c11 0 20-9 20-20s-9-20-20-20H356V96c0-11-9-20-20-20s-20 9-20 20v44H272c-11 0-20 9-20 20z"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    `;
}

// Attach the event listener after the items are rendered

// Use event delegation to handle dynamically created elements
document.body.addEventListener('input', function(event) {
    if (event.target.matches('.qty')) {
        const quantity = event.target.value;
        const productId = event.target.dataset.product_id;
        const link = event.target.closest('.input-group-cart').querySelector('a');
        
        // Update the href and data-quantity attribute
        //link.href = `?add-to-cart=${productId}&quantity=${quantity}`;
        link.setAttribute('data-quantity', quantity);
    }
});



  function renderPrice(item) {
    const price = item.properties.double_normal_price > 0 ? item.properties.double_normal_price : item.properties.price;
    const discountedPrice = item.properties.price;

    if (discountedPrice > 0 && price !== discountedPrice) {
      return `
        <div class="price">
          <span class="woocommerce-Price-amount amount">
            <del aria-hidden="true">
              <span class="woocommerce-Price-amount amount">
                <bdi>
                  ${formatCurrency(price)}
                </bdi>
              </span>
            </del>

            <ins>
              <span class="woocommerce-Price-amount amount">
                <bdi>
                  ${formatCurrency(discountedPrice)}
                </bdi>
              </span>
            </ins>
          </span>
        </div>
      `;
    }

    return `
      <div class="price">
        <span class="woocommerce-Price-amount amount">
          <span class="woocommerce-Price-amount amount">
            <bdi>
              ${formatCurrency(price).replace("€ ", "€")}
            </bdi>
          </span>
        </span>
      </div>
    `;
  }

  function renderFilter(facet, children) {
    const filterState = props.state.datasets[facet.dataset].filterStates?.[facet.id];
    const collapsed = filterState?.collapsed ?? facet.is_default_collapsed;

    function collapse(e, dataset, filterId) {
      e.preventDefault();

      const element = e.currentTarget;
      const filterState = props.state.datasets[dataset].filterStates?.[filterId];
      const active = element.classList.contains("sqr-active");

      element.classList.toggle("sqr-active", !active);
      element.nextElementSibling.classList.toggle("sqr-hidden", active);

      filterState.collapsed = active;
    }

    return `
      <div 
        class="sqr-my-2" 
        data-sqr-filter 
        data-sqr-filter-type="${facet.type}" 
        data-sqr-filter-id="${facet.id}" 
        data-sqr-filter-name="${facet.name}" 
        data-sqr-filter-dataset="items" 
        data-sqr-filter-showing-more="false"
      >
        <button type="button" onclick="${props.spotler.bindFunction(collapse, "items", facet.id)}" 
        class="${collapsed ? "" : "sqr-active"} sqr-group sqr-cursor-pointer sqr-border-none sqr-flex sqr-w-full sqr-items-center sqr-justify-between sqr-bg-white sqr-py-2 sqr-px-1 sqr-text-sm sqr-text-gray-400 sqr-hover:text-gray-500"
        >
          <span class="sqr-m-0 sqr-text-[#8a8a8a] sqr-text-[16px] sqr-font-bold hover:sqr-underline">
            ${facet.label}
          </span>
          
          <span class="sqr-ml-6 sqr-flex sqr-items-center group-[.sqr-active]:sqr-rotate-180">
            <svg class="sqr-h-4 sqr-w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path class="sqr-fill-[#8a8a8a]" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
            </svg>
          </span>
        </button>
        
        <div class="${collapsed ? "sqr-hidden sqr-pt-3" : "sqr-pt-3"}">
            ${children}
        </div>
      </div>
    `;
  }

  function renderSelectFilter(facet) {
    return renderFilter(facet,`
      <div class="sqr-px-1">
        <select 
          name="${facet.name}" 
          class="sqr-bg-gray-50 sqr-border sqr-border-gray-300 sqr-text-gray-900 sqr-text-sm sqr-rounded-lg sqr-focus:ring-blue-500 sqr-focus:border-blue-500 sqr-block sqr-w-full sqr-p-2.5"
        >
          <option value="" selected>Choose</option>
          ${facet.values.map((filterValue) => `
            <option value="${escapeHtml(filterValue.value)}">
              ${renderFilterLabel(filterValue.label, facet.prefix, facet.suffix )} (${filterValue.count})
            </option>
          `).join("")}
        </select>
      </div>
    `);
  }

  function showMore(e, dataset, filterId) {
    e.preventDefault();

    const element = e.currentTarget;
    const parentElement = element.closest("[data-sqr-filter]");
    const filterState = props.state.datasets[dataset].filterStates?.[filterId];

    filterState.showing_more = !filterState.showing_more;
    element.textContent = filterState.showing_more ? "Toon minder" : "Toon meer";
    parentElement.dataset.sqrFilterShowingMore = filterState.showing_more;
    parentElement
      .querySelectorAll("[data-initially-hidden]")
      .forEach((element) => {
        element.classList.toggle("sqr-hidden", !filterState.showing_more);
      });
  }

  function renderMultiSelectFilter(facet) {
    const hasMoreValues = facet.values.length > facet.result_limit;
    const filterState =
      props.state.datasets[facet.dataset].filterStates?.[facet.id];
    const showingMore = filterState.showing_more ?? false;

    return renderFilter(facet,`
      <div class="sqr-px-1 sqr-space-y-2">
        ${facet.searchable? `
          <div class="sqr-relative sqr-w-full sqr-mb-4">
            <div class="sqr-absolute sqr-inset-y-0 sqr-left-0 sqr-flex sqr-items-center sqr-pl-2.5 sqr-pointer-events-none">
              <svg class="sqr-w-4 sqr-h-4 sqr-text-gray-500" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
              </svg>
            </div>
              
            <input 
              data-search-filter type="text" 
              class="sqr-bg-gray-50 sqr-border sqr-border-solid sqr-border-gray-300 sqr-text-gray-900 sqr-text-sm sqr-rounded-lg sqr-focus:ring-blue-500 sqr-focus:border-blue-500 sqr-block sqr-w-full sqr-pl-8 sqr-p-1.5" 
              placeholder="Search..." 
              required
            >
          </div>
          ` : ""
        }
        
        ${facet.values.map((filterValue, index) => `
          <div 
            data-sqr-filter-item ${index >= facet.result_limit ? "data-initially-hidden" : ""} 
            class="sqr-flex sqr-items-center ${!showingMore && index >= facet.result_limit ? "sqr-hidden" : ""} sqr-pl-[14px]"
          >
            <input 
              id="filter_${facet.id}_${filterValue.value}" 
              class="sqr-shrink-0 sqr-h-4 sqr-w-4 sqr-rounded sqr-border-gray-300" 
              type="checkbox" 
              value="${escapeHtml(filterValue.value)}" 
              ${filterValue.count === 0 ? "disabled" : ""}
            >
            
            <label 
              for="filter_${facet.id}_${filterValue.value}" 
              class="sqr-w-full sqr-cursor-pointer sqr-ml-3 sqr-text-size-facet-value ${filterValue.count === 0 ? "sqr-text-gray-400" : "sqr-text-color-facet-value"}" 
              title="${filterValue.label}"
            >
              ${renderFilterLabel(filterValue.label, facet.prefix, facet.suffix )}
            </label>
          </div>
          `).join("")
        }
      
        ${ hasMoreValues ? `
          <button 
            data-sqr-filter-show-more 
            type="button" 
            onclick="${props.spotler.bindFunction( showMore, facet.dataset, facet.id )}" 
            class="sqr-bg-transparent sqr-border-none sqr-w-full sqr-cursor-pointer sqr-text-color-facet-toggle sqr-text-size-facet-toggle sqr-flex sqr-items-center sqr-font-medium sqr-no-underline hover:sqr-underline"
          >
           ${showingMore ? "Toon minder" : "Toon meer"}
          </button> 
          ` : ""
        }
      </div>
    `);
  }

  function renderRadioFilter(facet) {
    const hasMoreValues = facet.values.length > facet.result_limit;
    const filterState = props.state.datasets[facet.dataset].filterStates?.[facet.id];
    const showingMore = filterState.showing_more ?? false;

    return renderFilter( facet, `
      <div class="sqr-space-y-2">
        ${facet.values.map((filterValue) => `
          <div class="sqr-flex sqr-items-center">
            <input 
              id="filter_${facet.id}_${filterValue.value}" 
              class="sqr-h-4 sqr-w-4 sqr-rounded sqr-border-gray-300 sqr-text-indigo-600 focus:sqr-ring-indigo-500" 
              type="radio" 
              name="${facet.name}" 
              value="${escapeHtml(filterValue.value)}" 
              data-sqr-multiselect-input
            >
            
            <label 
              for="filter_${facet.id}_${filterValue.value}" 
              class="sqr-w-full sqr-cursor-pointer sqr-ml-3 sqr-text-sm sqr-text-gray-600" 
              title="${filterValue.label}"
            >
              ${renderFilterLabel(filterValue.label, facet.prefix, facet.suffix)}
            </label>
            
            <span class="sqr-border sqr-border-gray-200 sqr-border-solid sqr-font-normal sqr-text-xs sqr-py-0.5 sqr-px-2.5 sqr-bg-white sqr-rounded-full sqr-whitespace-nowrap sqr-min-w-max sqr-ml-auto">
              ${filterValue.count}
            </span>
          </div>
          `).join("")
    }
        
        ${hasMoreValues ? `
          <button 
            type="button" 
            onclick="${props.spotler.bindFunction(showMore, facet.dataset, facet.id )}" 
            class="sqr-bg-transparent sqr-border-none sqr-w-full sqr-cursor-pointer sqr-block sqr-text-blue-600 sqr-text-sm sqr-flex sqr-items-center sqr-font-medium sqr-no-underline hover:sqr-underline"
          >
            ${showingMore ? "Toon minder" : "Toon meer"}
          </button>
          ` : ""
    }
      </div>
    `);
  }

  function renderSliderFilter(facet) {
    return renderFilter(facet, `
      <div class="sqr-relative sqr-h-3 sqr-mb-3">
        <input 
          class="sqr-w-full sqr-h-1 sqr-outline-none sqr-absolute sqr-m-auto sqr-inset-y-0 sqr-bg-transparent sqr-pointer-events-none" 
          type="range" 
          min="${facet.min}" 
          max="${facet.max}" 
          value="${facet.min}" 
          step="${facet.step}"
        >
      </div>
    `);
  }

  function renderDualSliderFilter(facet) {
    return renderFilter( facet, `
      <div data-sqr-dual-slider>
        <div class="sqr-relative sqr-w-full sqr-h-3">
          <div class="sqr-w-full sqr-bg-gray-200 sqr-h-2 sqr-absolute sqr-inset-y-0 sqr-rounded sqr-m-auto">
              <div class="sqr-slider-range sqr-absolute sqr-bg-[#7F55B2] sqr-h-full sqr-rounded-full" data-sqr-dual-slider-track></div>
          </div>
          
          <input 
            class="sqr-appearance-none sqr-w-full sqr-outline-none sqr-absolute sqr-m-auto sqr-inset-y-0 sqr-bg-transparent sqr-pointer-events-none" 
            type="range" 
            min="${facet.min}" 
            max="${facet.max}" 
            value="${facet.min}" 
            step="${facet.step}" 
            data-sqr-dual-slider-left-input
          >
          
          <input 
            class="sqr-appearance-none sqr-w-full sqr-outline-none sqr-absolute sqr-m-auto sqr-inset-y-0 sqr-bg-transparent sqr-pointer-events-none" 
            type="range" 
            min="${facet.min}" 
            max="${facet.max}" 
            value="${facet.max}" 
            step="${facet.step}" 
            data-sqr-dual-slider-right-input
          >
        </div>
        
        ${facet.use_input? `
          <div class="sqr-flex sqr-justify-between">
            <input 
              class="sqr-w-1/4" 
              type="number" 
              step="${facet.step}" 
              min="${facet.min}" 
              value="${facet.min}" 
              data-sqr-dual-slider-left-input size="4" 
            />
            <input 
              class="sqr-w-1/4" 
              type="number" 
              step="${facet.step}" 
              min="${facet.min}" 
              max="${facet.max}" 
              value="${facet.max}" 
              data-sqr-dual-slider-right-input size="4" 
            />
          </div>
        ` : `
          <div class="sqr-mt-2 sqr-flex sqr-justify-between">
            <div>
              <span>${facet.prefix ?? ""}</span>
              <span data-sqr-dual-slider-left-output>${facet.min}</span>
              <span>${facet.suffix ?? ""}</span>
            </div>
            
            <div class="sqr-text-right">
              <span>${facet.prefix ?? ""}</span>
              <span data-sqr-dual-slider-right-output>${facet.max}</span>
              <span>${facet.suffix ?? ""}</span>
            </div>
          </div>
        `}
      </div>
    `);
  }

  function renderFilterLabel(label, prefix, suffix) {
    return `${prefix ?? ""} ${label} ${suffix ?? ""}`.trim();
  }

  if (props.state.view === "items") {
    return ItemsView(props);
  }

  return SuggestView(props);
});