globalThis.spotler_search_templates = globalThis.spotler_search_templates || {};
globalThis.spotler_search_templates['6034f778-27bd-415a-8c8c-3e73d3bedfae'] = // 2 TODO's
(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="sqr-flex sqr-items-center sqr-text-sm sqr-text-gray-600 min-[768px]:sqr-border-b sqr-items-start sqr-sticky sqr-top-0 sqr-p-3">
      <div class="sqr-w-[350px] max-[767px]:sqr-hidden">
        <div class="sqr-font-semibold">
          ${items?.meta?.total} ${items?.meta?.total === 1 ? "resultaat" : "resultaten"}
        </div>
        
        ${items?.facets.length > 0 ? `<div>Verfijn uw resultaten</div>` : ""}
      </div>
  
      <div class="sqr-flex sqr-w-full sqr-justify-between sqr-items-center">
        <label>
          <span class="max-[767px]:sqr-hidden">Sorteer op:</span>
          <select 
            onchange="${props.spotler.bindFunction((event) => props.spotler.triggerSortingChange( "items", event.currentTarget.value ))}" 
            class="sqr-mr-3"
          >
            <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-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>
    `;
  }
  

  // 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 sqr-relative sqr-flex sqr-flex-col sqr-font-sans 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 columns"
      >
        ${TabletAndDesktopHeading(props, items)}
        ${MobileHeading(props, items)}
        <div class="sqr-flex">
          <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="min-[768px]: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="sqr-grid sqr-grid-cols-1 sqr-gap-x-4 sqr-gap-y-10 tablet:sqr-grid-cols-4 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-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) {
    function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
  }

  const formKey = getCookie('form_key');

    return `
      <!-- TODO Sergey please add uenc-->
      <!-- spotlerUenc = placeholder -->
      <form data-sqr-infinite-scroll-item
        method="post" 
        action="https://${window.location.hostname}/checkout/cart/add/uenc/spotlerUenc/product/${item.properties.id}/" 
        class="item product product-item product_addtocart_form card card-interactive flex flex-col w-full "
      >
        <input name="form_key" type="hidden" value="${formKey}">    
        <input type="hidden" name="product" value="${item.properties.id}">
        <a 
          href="${item.properties.detail_url}" 
          class="product photo product-item-photo block mx-auto mb-3 max-h-[310px]" 
          tabindex="-1"
        >
          <picture class="hover:shadow-sm object-contain product-image-photo">
          ${item.properties.image ? `
            <source 
              type="image/png" 
              srcset="${item.properties.image}"
              width="360" 
              height="360"
              title="${item.properties.title}"
            >
            <img 
              class="hover:shadow-sm object-contain product-image-photo"
              loading="eager"
              alt="${item.properties.title}" 
              src="${item.properties.image}" 
              width="360" 
              height="360"
            >
            `:`
              <source 
                type="image/png" 
                srcset="https://www.celzouten.eu/static/version1712150430/frontend/MountainIT/celzouten/nl_NL/images/AnemoonCelzouten-logo-horiz_v2Anemoon_icon.svg"
                width="360" 
                height="360"
                title="${item.properties.title}"
              >
              <img 
                class="hover:shadow-sm object-contain product-image-photo"
                loading="eager"
                alt="${item.properties.title}" 
                src="https://www.celzouten.eu/static/version1712150430/frontend/MountainIT/celzouten/nl_NL/images/AnemoonCelzouten-logo-horiz_v2Anemoon_icon.svg" 
                width="360" 
                height="360"
              >
            `}
          </picture>
        </a>
        
        <div class="product-info flex flex-col grow">
          <div class="mt-2 mb-1 items-center justify-center text-primary font-semibold text-lg text-start ">
            <a 
              class="product-item-link sqrProductTitle h-[85px] overflow-hidden inline-block" 
              href="${item.properties.detail_url}"
            >
              ${item.properties.title}               
            </a>
          </div>
            <!-- TODO rating -->
            <div class="py-1 star-rating">
              <div 
                class="rating-summary flex sqr-hidden"
                tabindex="-1" 
                aria-label="rating" 
                role="img"
                data-rating="${item.properties['sqr:rating'] ? item.properties['sqr:rating'] : ''}"
              >
                <svg 
                  xmlns="http://www.w3.org/2000/svg" 
                  class="star" 
                  viewBox="3 0 20 20"
                  aria-hidden="true"
                >
                  <path fill="#E5E6EA"  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                </svg>
                
                <svg 
                  xmlns="http://www.w3.org/2000/svg" 
                  class="star" 
                  viewBox="3 0 20 20" 
                  aria-hidden="true"
                >
                  <path fill="#E5E6EA"  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                </svg>
                
                <svg 
                  xmlns="http://www.w3.org/2000/svg" 
                  class="star" 
                  viewBox="3 0 20 20" 
                  aria-hidden="true"
                >
                  <path fill="#E5E6EA" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                </svg>
                
                <svg 
                  xmlns="http://www.w3.org/2000/svg" 
                  class="star" 
                  viewBox="3 0 20 20"
                  aria-hidden="true"
                >
                  <path fill="#E5E6EA" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                </svg>
                
                <svg 
                  xmlns="http://www.w3.org/2000/svg" 
                  class="star" 
                  viewBox="3 0 20 20"
                  aria-hidden="true"
                >
                  <path fill="#E5E6EA" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                </svg>
              </div>
            </div>
            
            <div class="pt-1 text-gray-900 mt-2">
              <div 
                class="price-box price-final_price" 
                data-role="priceBox" 
                data-product-id="${item.properties.id}" 
                data-price-box="product-id-${item.properties.id}">
                <span class="price-container text-lg mr-2 price-final_price tax weee">
                  ${renderPrice(item)}
                </span>
              </div>            
            </div>

            <div class="mt-auto pt-3 flex flex-wrap justify-center items-center">
            ${item.properties['sqr:availability'] && item.properties['sqr:availability'][0] === 'in stock' ? `
              <div class="w-auto justify-center mr-auto">
                <div class="text-right">
                  <p 
                    class="py-3 flex items-center justify-end align-middle available gap-x-2 stock" 
                    title="Beschikbaarheid"
                  >
                  
                  <span class="w-4 h-4 rounded-full shrink-0">
                    <svg 
                      xmlns="http://www.w3.org/2000/svg" 
                      height="1em" 
                      viewBox="0 0 512 512" 
                      class="fill-green-500"
                    >
                      <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path>
                    </svg>
                  </span>
                  
                  <span class="text-start w-24">Op vooraad</span>
                  
                  </p>
                </div>
              </div>
              `:``}
              
              <button class="p-3 w-auto btn btn-primary justify-center text-sm ml-auto" aria-label="Add to cart">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-6 w-6 border-current inline fill-white" width="25" height="25" role="img">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    <title>shopping-cart</title>
                    </svg>
                  <span class="ml-0 md:ml-2 inline md:ml-0 md:hidden lg:ml-0 lg:inline"></span>
              </button>
          </div>
        </div>
      </form>
    `;
  }

  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 `
        <!-- TODO add discounted bit, can't find example -->
        <span 
          data-price-amount="${item.properties.price}" 
          data-price-type="finalPrice" 
          class="price-wrapper " 
          id="product-price-${item.properties.id}-1"
        >
          <span class="sqr-text-black price ${price || discountedPrice ? '':'sqr-hidden'}">${formatCurrency(price)}</span>
        </span>
      `;
    }

    return `
      <span 
        data-price-amount="${item.properties.price}" 
        data-price-type="finalPrice" 
        class="price-wrapper " 
        id="product-price-${item.properties.id}-1"
      >
        <span class="sqr-text-black price ${price || discountedPrice ? '':'sqr-hidden'}">${formatCurrency(price)}</span>
      </span>
    `;
  }

  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.classList.toggle("sqr-pb-2", !active);
      element.classList.toggle("sqr-border-b", !active);
      element.classList.toggle("sqr-border-[#E7E6E6]", !active);
      element.nextElementSibling.classList.toggle("sqr-hidden", active);

      filterState.collapsed = active;
    }

    return `
      <div 
        class="sqr-my-4 sqr-p-[16px] sqr-filter" 
        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="sqr-group sqr-cursor-pointer sqr-flex sqr-w-full sqr-items-center sqr-justify-between sqr-bg-white sqr-px-1 sqr-text-sm sqr-text-gray-400 sqr-hover:text-gray-500 ${collapsed ? "" : "sqr-active sqr-pb-2 sqr-border-b sqr-border-[#E7E6E6]"}"
        >
          <h3 class="sqr-m-0 sqr-text-base sqr-text-black">
            ${facet.label}
          </h3>
          
          <span class="sqr-ml-6 sqr-flex sqr-items-center group-[.sqr-active]:sqr-rotate-180 sqr-p-1.5 sqr-border sqr-border-[#E7E6E6] sqr-rounded">
            <svg class="sqr-h-4 sqr-w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path 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 ? "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-black sqr-text-gray-900 sqr-text-sm 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" : ""}"
          >
            <input 
              id="filter_${facet.id}_${filterValue.value}" 
              class="sqr-shrink-0 sqr-h-4 sqr-w-4 sqr-border-gray-300" 
              type="checkbox" 
              value="${escapeHtml(filterValue.value)}" 
              ${filterValue.count === 0 ? "disabled" : ""}
            >
            
            <label 
              for="filter_${facet.id}_${filterValue.value}" 
              class="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 )} (${filterValue.count})
            </label>
          </div>
          `).join("")
        }
      
        ${ hasMoreValues ? `
          <div class="sqr-flex sqr-w-full sqr-justify-end">
            <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-cursor-pointer sqr-text-size-facet-toggle sqr-inline-flex sqr-items-center sqr-underline text-secondary"
            >
             ${showingMore ? "Show fewer" : "Show more"}+
            </button> 
          </div>
          ` : ""
        }
      </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 ? "Show fewer" : "Show more"}
          </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-1 sqr-absolute sqr-inset-y-0 sqr-rounded sqr-m-auto">
              <div class="sqr-slider-range sqr-absolute sqr-bg-[#30a86b] sqr-h-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);
});