globalThis.spotler_search_templates = globalThis.spotler_search_templates || {};
globalThis.spotler_search_templates['d024914b-c005-4a6b-9df1-2023744438c7'] = (function (props) {
  const currencyFormatter = new Intl.NumberFormat("nl-NL", {
    style: "currency",
    currency: props.spotler.getConfig("currency") || "EUR",
  });

  function formatCurrency(price) {
    return currencyFormatter.format(price);
  }

  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-font-sans 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="sqrOptions 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] sqr-h-full sqr-flex sqr-self-center">
        <div class="sqr-font-semibold">
          ${items?.meta?.total} ${
            items?.meta?.total === 1 ? "resultaat" : "resultaten"
          }
        </div>
      </div>
  
      <div class="sqr-flex sqr-w-full sqr-justify-end sqr-items-center">
        <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-bg-[#171f25] sqr-text-white sqr-text-center sqr-py-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>`;
  }

  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"
    )}" id="sqr-container" class="sqr-flex sqr-flex-col sqr-font-sans sqr-scroll-mt-custom sqr-z-[9999] sqr-w-full sqr-min-w-full desktop:sqr-min-w-[1024px] sqr-mb-4 sqr-bg-white ssqr-overflow-hidden">
      ${TabletAndDesktopHeading(props, items)}
      ${MobileHeading(props, items)}
      <div id="sqr-filters-results-container" ${
        props.spotler.getConfig("floatingFilterBar")
          ? ""
          : "sqr-overflow-y-auto"
      }">
        <div data-sptlr-mobile-view="facets" class="${props.state.datasets["items"].mobileView === "facets"? "": "sqr-hidden"} sqr-z-10 tablet:sqr-block">
          <div class="sqr-my-4">
            <h2 class="sqr-filter-h3 sqr-m-0 sqr-font-bold sqr-pl-3.5">Filters</h2>

            <label class="sqr-p-4">
              <span style="color: #828282; min-width: fit-content; margin-right: 0.8rem;">Sorteren op:</span>
              <span class="sqr-select">
                <select onchange="${props.spotler.bindFunction((event) =>
                  props.spotler.triggerSortingChange(
                    "items",
                    event.currentTarget.value
                  )
                )}" class="sqr-mr-3">
                  ${items?.sort_fields
                    ?.map(
                      (sortField) => `
                    <option value="${sortField.id}" ${
                      String(props.state.datasets["items"].sortBy) ===
                      String(sortField.id)
                        ? "selected"
                        : ""
                    }>${sortField.label}</option>
                  `
                    )
                    .join("")}
                </select>
              </span>
            </label>
            ${ActiveFilters(props.state.datasets["items"], items?.facets)}
            ${Filters(items?.facets)}
          </div>
        </div>
        <div data-sptlr-mobile-view="results" class="${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 sqr-flex sqr-flex-col sqr-items-center sqr-justify-items-center sqr-py-4">
              <h3>Kun je het juiste veiligheidsartikel niet vinden?</h3> 
              <p>Gebruik onze keuzehulp voor <a href="https://www.arbowinkel.nl/service/keuzehulp-brandblussers/" title="brandblussers">brandblussers</a> of <a href="https://www.arbowinkel.nl/service/keuzehulp-ehbo-koffers/" title="EHBO-koffers">EHBO-koffers</a>,</p> 
              <p>Of neem gerust contact op met onze <a href="https://www.arbowinkel.nl/service/" title="klantenservice">klantenservice</a> en we helpen je graag zo verder! </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="sqr-grid sqr-my-4" 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-filter-h3 sqr-m-0 sqr-text-lg sqr-font-bold sqr-pl-3.5">Gekozen filters</h3>
                    <button type="button" onclick="${props.spotler.bindFunction(
                      clearFilters,
                      "items"
                    )}" class="sqr-bg-transparent sqr-border-none sqr-cursor-pointer sqr-text-[#ff6000] 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-pl-3.5 sqr-py-1 sqr-mr-2 sqr-my-1 sqr-text-xs sqr-font-medium sqr-text-black sqr-bg-white 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-[#ff6000] 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("");
  }

  function Item(item) {
    return `
            <div class="sqr-result-item sqr-group sqr-relative" data-sqrc-item="${
              item.properties.id
            }" data-sqr-infinite-scroll-item>
                <div class="sqr-aspect-w-1 sqr-aspect-h-1 sqr-w-full sqr-overflow-hidden sqr-bg-white sqr-flex sqr-align-end group-hover:sqr-opacity-75 tablet:sqr-aspect-none tablet:sqr-h-52">
                    <a href="${item.properties.detail_url}">
                      <img loading="lazy" alt="${item.properties.title}" src="${
                        item.properties.image
                      }" onerror="this.src='${props.spotler.getConfig(
                        "defaultNoImage"
                      )}';this.onerror='';" class="tablet:sqr-h-full sqr-w-full sqr-bg-white sqr-object-contain sqr-object-center tablet:sqr-w-full" />
                    </a>
                </div>
                <div class="sqr-w-full sqr-mt-4 sqr-flex sqr-flex-col sqr-justify-between sqr-gap-1">
                    <h3 class="sqr-m-0" style="font-size: 1.1rem; font-weight: 700;">
                        <a class="sqrTitle" href="${
                          item.properties.detail_url
                        }">
                            ${
                              props.spotler.getConfig("enableResultItemClick")
                                ? `<span aria-hidden="true" class="sqr-absolute sqr-inset-0"></span>`
                                : ""
                            }
                            ${item.properties.title}
                        </a>
                    </h3>
                    <div class="sqr-flex sqr-mt-7">
                     ${renderPrice(item)}
                    </div>
                    <p class="sqr-hidden sqr-incl-btw-price">(00,00 incl.btw)</p>
                    <form action="https://www.arbowinkel.nl/cart/add/${item.properties.id}/" data-action="https://www.arbowinkel.nl/cart/add/${item.properties.id}/" id="product_configure_form_${item.properties.assoc_id}" method="post">
                  <p class="sqr-flex amount" style="z-index: 104; margin-top: 0.5rem;">
                    <label for="product-q-${item.properties.assoc_id}" class="hidden">Aantal</label>
                    <span class="select">
                      <select style="margin: 0 12px 0 0; display: block; float: left; width: 62px; height: 45px; color: #000; font-size: 14px;" id="product-q-${item.properties.assoc_id}" name="quantity">
                        <option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option>
                      </select>
                    </span>
                    <button class="cart-form-submit" type="submit">
                      <span class="hidden">Toevoegen aan winkelwagen</span>
                      <i class="icon-cart-plus"></i>
                    </button>
                  </p>
                </form>
                </div>
                
            </div>
        `;
  }

  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 `
          <p class="sqr-text-sm sqr-m-0 sqr-font-medium sqr-mr-2 sqr-text-gray-400 sqr-line-through">
            ${price}
          </p>
          <p class="sqr-text-sm sqr-m-0 sqr-font-medium sqr-text-color-result-price">
            ${formatCurrency(discountedPrice)}
          </p>
        `;
    }

    return `
        <p class="sqr-text-sm sqr-m-0 sqr-font-medium sqr-text-color-result-price">
          ${formatCurrency(price)}
        </p>
      `;
  }

  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);
      element.classList.toggle('sqr-rotate');

      filterState.collapsed = active;
    }

    function removeFilter(event, dataset, name) {
      event.preventDefault();
      console.log('removeFilter', dataset, name, event);
      props.spotler.triggerFilterChange(dataset, name);
    }

    return `
            <div class="sqr-relative sqr-flex sqr-flex-col sqr-my-2 sqr-mb-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">
                ${props.state.datasets["items"].filters?.find(f => f.field === facet.name) ? `<a href="#" class="sqr-absolute sqr-z-50 sqr-right-8 sqr-top-5 sqr-text-xs" onclick="${props.spotler.bindFunction(
                removeFilter,
                facet.dataset,
                facet.name
              )}">${facet.type == "dualslider" ? "" : "Herstel"}</a>` : ''}
                <button type="button" onclick="${props.spotler.bindFunction(
                  collapse,
                  "items",
                  facet.id
                )}" class="${
                  collapsed ? "" : "sqr-active"
                } sqr-filter-title sqr-pl-3.5 sqr-filter 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">
                    <h3 class="sqr-filter-name sqr-m-0 sqr-font-medium sqr-text-color-facet-label sqr-text-size-facet-label">${
                      facet.label
                    }</h3>
                </button>
                <div class="${collapsed ? "sqr-hidden sqr-pt-3 sqr-inline-block" : "sqr-pt-3 sqr-inline-block"} sqr-w-full">
                    ${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 ? "Show fewer" : "Show more";

    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 sqr-mb-4 sqr-pl-3 ${
                      !showingMore && index >= facet.result_limit
                        ? "sqr-hidden"
                        : ""
                    }">
                        <input id="filter_${facet.id}_${
                          filterValue.value
                        }" class="sqr-shrink-0 sqr-h-4 sqr-w-4 sqr-rounded sqr-border-gray-200" style="accent-color: #ff6000;" type="checkbox" value="${escapeHtml(
                          filterValue.value
                        )}" ${filterValue.count === 0 ? "disabled" : ""}>
                        <label for="filter_${facet.id}_${
                          filterValue.value
                        }" class="sqr-filter-value sqr-w-full sqr-cursor-pointer sqr-mb-0 sqr-ml-3 sqr-text-size-facet-value ${
                          filterValue.count === 0
                            ? "sqr-text-black"
                            : "sqr-text-black"
                        }" title="${filterValue.label}">
                            ${renderFilterLabel(
                              filterValue.label,
                              facet.prefix,
                              facet.suffix
                            )}
                        </label>
                          <span class="sqr-font-normal sqr-text-size-facet-value sqr-py-0.5 sqr-px-2.5 ${
                          filterValue.count === 0
                            ? "sqr-text-gray-400 sqr-bg-gray-50"
                            : "sqr-bg-white"
                        } sqr-rounded-full sqr-whitespace-nowrap sqr-min-w-max">
                            (${filterValue.count})
                        </span>
                    </div>
                `
                  )
                  .join("")}
                ${
                  hasMoreValues
                    ? `
                    <button style="color: #0090e3;" data-sqr-filter-show-more type="button" onclick="${props.spotler.bindFunction(
                      showMore,
                      facet.dataset,
                      facet.id
                    )}" class="sqr-pl-3 sqr-py-0 sqr-bg-transparent sqr-border-none sqr-w-full sqr-cursor-pointer 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>
            ${
                  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 sqr-items-baseline">
                        <div class="sqr-left-slider-price">
                            <span>${facet.prefix ?? ""}</span>
                            <span data-sqr-dual-slider-left-output>${
                              facet.min
                            }</span>
                            <span>${facet.suffix ?? ""}</span>
                        </div>
                        <div style="color: black;">tot</div>
                        <div class="sqr-text-right sqr-right-slider-price">
                            <span>${facet.prefix ?? ""}</span>
                            <span data-sqr-dual-slider-right-output style="display: flex;">${
                              facet.max
                            }</span>
                            <span>${facet.suffix ?? ""}</span>
                        </div>
                    </div>
                `
                }
                <div class="sqr-relative sqr-w-full sqr-h-3">
                    <div class="sqr-w-full sqr-bg-gray-200 sqr-h-1 sqr-absolute sqr-inset-y-0 sqr-rounded sqr-m-auto sqr-h-2">
                        <div class="sqr-slider-range sqr-absolute sqr-bg-color-facet-toggle sqr-h-full" data-sqr-dual-slider-track></div>
                    </div>
                    <input class="sqr-border-0 sqr-p-0 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-border-0 sqr-p-0 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>
            </div>
        `
    );
  }

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

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

  return SuggestView(props);
});