globalThis.spotler_search_templates = globalThis.spotler_search_templates || {};
globalThis.spotler_search_templates['0d872e3c-a5c2-4f26-a2e5-c3381790e19c'] = (function (props) {
        const currencyFormatter = new Intl.NumberFormat('nl-NL', {
        //style: 'currency',
        //currency: 'EUR',
        minimumFractionDigits: 2, maximumFractionDigits: 2
    });

    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 triggerChangeView(event, view) {
        event.preventDefault();

        props.spotler.triggerViewChange(view);
    }

    function revertToPreviousSuccessfulState() {
        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-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">Productsuggesties</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">
                        <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>
        `;
    }

    async function ItemsView(props) {
        const { items } = await props.spotler.fetchResults();

        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-sqrc="${props.spotler.getCollectorData('items')}" id="sqr-container" class="spotlerSearchContainer">
            <div id="sqr-container-wrap">
                <div id="${window.innerWidth < 768 ? 'sqr-filters-results-container-mobile' : 'sqr-filters-results-container'}" class="sqr-overflow-x-auto sqr-flex ${props.spotler.getConfig('floatingFilterBar') ? '' : 'sqr-overflow-y-auto'}">
                    <div id="sqr-left-container" class="${props.state.datasets['items'].show_mobile_filters ? 'sqr-open-filters' : window.innerWidth < 768 ? 'sqrHideFilter' : ''} desktop:sqr-block ${props.spotler.getConfig('floatingFilterBar') ? 'sqr-overflow-y-auto' : ''}">
                        <div id="sqr-close-filters-mobile" class="${window.innerWidth > 768 ? 'sqr-hidden' : ''} flex w-full items-center justify-between">
                            <div class="">Kies je filter</div>
                                <button onclick="${props.spotler.bindFunction(() => { props.state.datasets['items'].show_mobile_filters = false; document.getElementsByTagName('html')[0].classList.remove("sqr-overflow-hidden"); document.getElementById("sqr-left-container").classList.add("sqrHideFilter"); document.getElementById("sqr-right-container").classList.remove("sqrHideFilter") })}" class="sqr-close-filters-x flex items-center justify-center border-2 h-10 w-10 rounded-full border-secondary text-secondary transition group-hover:bg-secondary">Close</button>
                            </div>
                        <div class="sqr-ml-4 sqr-mb-4 sqr-mt-4 max-[768px]:sqr-pb-52 sqr-pr-4">
                            ${ActiveFilters(props.state.datasets['items'], items?.facets)}
                            ${Filters(items?.facets)}
                        </div>
                    </div>
                    <!-- <div id="sqr-right-container" class="sqr-w-3/4 sqr-px-4 ${props.spotler.getConfig('floatingFilterBar') ? 'sqr-overflow-y-auto' : ''}"> -->
                        <div id="sqr-right-container" class="${props.state.datasets['items'].show_mobile_filters ? 'sqrHideFilter' : ''}">
                            <div class="sqr-top-container ${window.innerWidth > 768 ? 'sqr-items-baseline' : ''} sqr-flex sqr-text-sm sqr-text-gray-600 sqr-border-b sqr-justify-between sqr-sticky sqr-col-2 sqr-top-0 sqr-p-4">
                                <!-- <div> -->
                                    <div class="sooqrSearchMobileTabsFilters ${window.innerWidth > 768 ? 'sqr-hidden' : ''}">
                                        <button onclick="${props.spotler.bindFunction(() => { props.state.datasets['items'].show_mobile_filters = true;document.getElementsByTagName('html')[0].classList.add("sqr-overflow-hidden"); document.getElementById("sqr-left-container").classList.add("sqr-open-filters"); document.getElementById("sqr-left-container").style.animation = "open-filters .5s 1"; document.getElementById("sqr-left-container").classList.remove("sqrHideFilter"); document.getElementById("sqr-right-container").classList.add("sqrHideFilter") })}" class="btn btn-primary md:hidden" >
                                            <span class="icon icon-sliders-horizontal">
                                                <svg class="icon-sliders-horizontal-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" style="transform: rotate(90deg);>
                                                    <use xlink:href="#icons-default-sliders-horizontal" fill="#000" fill-rule="evenodd">
                                                        <g id="icons-default-sliders-horizontal">
                                                            <g id="Productlistig" transform="translate(-156 -444)">
                                                                <g id="Components-Forms-Button-large-secondary-normal" transform="translate(28 432)">
                                                                    <g id="Group" transform="translate(128 12)">
                                                                        <path d="M3.3333 0a.8333.8333 0 0 1 .8334.8333l.0002 3.4757c.9709.3433 1.6664 1.2693 1.6664 2.3577 0 1.0884-.6955 2.0143-1.6664 2.3576l-.0002 10.1424a.8333.8333 0 0 1-1.6667 0L2.4997 9.0243C1.529 8.681.8333 7.7551.8333 6.6667S1.529 4.6523 2.4997 4.309L2.5.8333A.8333.8333 0 0 1 3.3333 0zM10 0a.8333.8333 0 0 1 .8333.8333l.0013 10.976c.9703.3436 1.6654 1.2693 1.6654 2.3574 0 1.088-.695 2.0137-1.6654 2.3573l-.0013 2.6427a.8333.8333 0 1 1-1.6666 0l-.0003-2.6424C8.1955 16.181 7.5 15.2551 7.5 14.1667s.6955-2.0144 1.6664-2.3577L9.1667.8333A.8333.8333 0 0 1 10 0zm6.6667 0A.8333.8333 0 0 1 17.5.8333v3.3334a.839.839 0 0 1-.0116.1392c.977.3387 1.6783 1.2678 1.6783 2.3608 0 1.0884-.6956 2.0143-1.6664 2.3576L17.5 19.1667a.8333.8333 0 1 1-1.6667 0l-.0002-10.1424c-.9709-.3433-1.6664-1.2692-1.6664-2.3576 0-1.093.7013-2.022 1.6784-2.362a.7927.7927 0 0 1-.0118-.138V.8333A.8333.8333 0 0 1 16.6667 0zM10 13.3333A.8333.8333 0 1 0 10 15a.8333.8333 0 0 0 0-1.6667zm-6.6667-7.5a.8333.8333 0 1 0 0 1.6667.8333.8333 0 0 0 0-1.6667zm13.3334 0a.8333.8333 0 1 0 0 1.6667.8333.8333 0 0 0 0-1.6667z" id="Shape"></path>
                                                                    </g>
                                                                </g>   
                                                            </g> 
                                                        </g>
                                                    </use>
                                                </svg>                                            
                                            </span>
                                            Open filters
                                        </button>
                                    </div>
                                    <div class="${window.innerWidth < 768 ? 'sqr-hidden' : ''} sqr-search-result-total"><span>${items?.meta?.total === 1 ? 'Resultaat' : 'Resultaten'}</span>${items?.meta?.total} ${items?.meta?.total === 1 ? 'product' : 'producten'}</div>
                                <!-- </div> -->
                                <div class="sqr-search-sort sqr-flex sqr-items-center">
                                    <span class="${window.innerWidth < 768 ? 'SooqrHide' : ''}">Sortering: </span>
                                    <select onchange="${props.spotler.bindFunction((event) => props.spotler.triggerSortingChange('items', event.currentTarget.value))}" class="sqr-form-select">  
                                        ${items?.sort_fields?.map(sortField => ` 
                                            <option value="${sortField.id}" ${String(props.state.datasets['items'].sortBy) === String(sortField.id) ? 'selected' : ''}>${sortField.label}</option>
                                        `).join('')}
                                    </select>
                                </div>
                            </div>
                        <div class="${window.innerWidth > 768 ? 'sqr-hidden' : ''} sqr-result-count sqr-flex sqr-text-sm sqr-bg-white sqr-border-b sqr-justify-between sqr-items-start sqr-sticky sqr-top-0 sqr-p-3">
                            <div class="sqr-font-semibold">Resultaten<span class="sqr-font-normal sqr-text-slate-500 sqr-ml-2">${items?.meta?.total}</span><span class="sqr-font-normal sqr-text-slate-500"> ${items?.meta?.total === 1 ? 'resultaat' : 'resultaten'}</span></div>
                        </div>
                        <div class="sqr-w-full 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="${window.innerWidth < 768 ? 'sqr-grid-cols-2' : 'sqr-grid-cols-3'} sqr-grid sqr-gap-x-8 sqr-gap-y-10 sqr-my-4" data-sqr-infinite-scroll-container>
                                ${Items(items?.data)}
                            </div>
                        `}
                    </div>
                </div>
                </div>
            </div>
        `;
    }

    function ActiveFilters(dataset, facets) {
        if (!Array.isArray(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(',&nbsp') });
                    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="filters">
                <div class="sqr-filter-button sqr-flex sqr-items-center sqr-bg-white sqr-my-3 sqr-text-sm sqr-hover:text-gray-500">
                    <i class="icon icon-filters icon-medium mr-2"></i>
                    <h3 class="sqr-m-0 sqr-text-xl">Filteren</h3>
                </div>
                <div class="sqr-my-2 sqr-flex sqr-gap-4 sqr-flex-wrap sqr-flex-col">
                    <div class="sqr-font-semibold">Huidige filters</div>
                    ${filters.map(ActiveFilter).join('')}
                </div>
                <a onclick="${props.spotler.bindFunction(clearFilters,"items")}" class="sqr-cursor-pointer sqr-text-sm sqr-text-[#ff6610] hover:sqr-underline">Alles wissen</a>
            </div>
        `;
    }

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

        return `
            <span class="sqr-chosen-filter sqr-inline-flex sqr-items-center">
              ${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-1 sqr-bg-transparent sqr-rounded-sm sqr-mt-1" aria-label="Remove">
                  <svg aria-hidden="true" class="sqr-w-3 sqr-h-3" 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">
                Je zocht op <span class="sqr-underline sqr-italic">${spellcheck.old}</span>, maar wij vonden geen resultaten. Bedoel je <span class="sqr-underline sqr-italic">${spellcheck.new}</span>? Daar vonden wij ${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 isBeforeNovemberFirst(dateString) {
        // Parse the input date string
        const givenDate = new Date(dateString);

        // Create the comparison date for November 1, 2024, 00:00:00 UTC
        const novemberFirst2024 = new Date('2024-11-01T00:00:00Z');

        // Check if the given date is valid and compare the dates
        if (isNaN(givenDate.getTime())) {
            throw new Error("Invalid date format.");
        }
        return givenDate < novemberFirst2024;
    }

    function Item(item) {
        let num = item.properties.min_sale_qty
        let integerPart = Math.trunc(num);
        let hasStock = ( (
            item.properties.stock_barneveld &&
            item.properties.stock_barneveld.length > 0 &&
            parseInt(item.properties.stock_barneveld[0]) >= 1
            ) || (
            item.properties.leverdatum &&
            item.properties.leverdatum.length &&
            isBeforeNovemberFirst(item.properties.leverdatum) &&
            item.properties.voorraadkoppeling &&
            item.properties.voorraadkoppeling > 0
            )
        );
        let stockCLass = window.innerWidth < 768 ? `in-stock-mobile` : `in-stock`
        let stockStatus = hasStock ? `<div class="stock-status ${stockCLass}">Op voorraad</div>` : '';
        return `
            <div class="sqr-result-item sqr-group sqr-relative" data-sqrc-item="${item.properties.id}" data-sqr-infinite-scroll-item>
                <a class="card-product__heart wishlist-login" href="/sooqr/wishlist/add/product/${item.properties.id}" aria-label="wishlist">
                    <i class="icon icon-heart-o"></i> <i class="icon icon-heart-f icon--hidden"></i>
                </a>
                <a class="sqr-w-full" href="${item.properties.detail_url}">
                    <div onclick="${props.spotler.bindFunction(getUrl, item)}" class="sqr-aspect-w-1 sqr-aspect-h-1 sqr-w-full sqr-overflow-hidden desktop:sqr-aspect-none">
                        <img onloading="lazy" alt="${item.properties.title}" src="${item.properties.image}?class=thumbnail" onerror="this.src='${props.spotler.getConfig('defaultNoImage')}';this.onerror='';" class="sqr-bg-gray-100 sqr-w-full sqr-object-center sqr-object-contain desktop:sqr-w-full sqr-aspect-square sqr-m-auto" style="max-height:264px;" />
                    </div>
                </a>
                    <div class="sqr-h-full sqr-flex sqr-justify-between sqr-gap-1 sqr-flex-col sqr-pt-6 sqr-px-2 sqr-pb-2">
                        <span>
                            <p class="sqr-text-[#6b6b6b]">${item.properties.brand && item.properties.brand[0]}</p>
                            <h3 class="sqr-product-title sqr-m-0 sqr-text-sm sqr-text-xl">
                                <a class="[overflow-wrap:anywhere] sqr-text-color-result-title" 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>
                        </span>
                        <ul>
                            <li ${item.properties.attributes_usps_usp_1 ? "" : "style='display:none'"}>${item.properties.attributes_usps_usp_1}</li>
                            <li ${item.properties.attributes_usps_usp_2 ? "" : "style='display:none'"}>${item.properties.attributes_usps_usp_2}</li>
                            <li ${item.properties.attributes_usps_usp_3 ? "" : "style='display:none'"}>${item.properties.attributes_usps_usp_3}</li>
                        </ul>
                        <div class="sqr-flex sqr-justify-between sqr-flex-col">
                            <div class="sqr-flex sqr-flex-wrap sqr-justify-between sqr-items-baseline sqr-mb-4">
                            <span class="sqr-flex sqr-col-2 sqr-items-center">
                                ${item.properties.price ? `<p class="sqr-price sqr-text-sm sqr-m-0 sqr-font-medium sqr-text-color-result-price ${item.properties.double_normal_price ? "sqr-old-price" : ""}">${formatCurrency(item.properties.price)}</p>` : ''}
                                <div class="sqr-price sqr-new-price">${item.properties.double_normal_price ? formatCurrency(item.properties.double_normal_price) : ""}</div>
                            </span>
                                ${stockStatus}
                            </div>
                            <div class="card-product__btn-wrap card-product__btn-wrap--sm">

                <a class="btn btn-product sqr-cart-btn btn--primary btn--xsmall btn--mobile-sm fs-xs fs-sm-xxs fs-xl-sm flex-grow-1 flex-shrink-0" data-sqrc-item="${item.properties.id}" href="${item.properties.detail_url}">
                    ${window.innerWidth < 768 ? `<span>Bekijken</span>` : `<span>Product bekijken</span>`}
                </a>
                <div class="ml-1">
                    <form class="h-100" data-role="tocart-form" data-product-sku="" action="https://www.gigameubel.nl/checkout/cart/add/uenc/aHR0cHM6Ly93d3cuZ2lnYW1ldWJlbC5ubC9hYW5iaWVkaW5nZW4%2C/product/35955/" method="post">
                        <input type="hidden" name="product" value="${item.properties.id}">
                        <input name="form_key" type="hidden" value="${integerPart}">
                        <button type="submit" title="In Winkelwagen" class="btn btn--primary btn--xsmall d-flex align-items-center h-100">
                            <i class="icon icon-direct-cart icon-small"></i><span class="sr-only">In Winkelwagen</span>
                        </button>
                    </form>
                </div>
                                <!--<form data-role="tocart-form" method="get" class="sqrAddToCart upsell-form sqr-order-new" data-product-sku="" action="/sooqr/cart/add/product/${item.properties.id}">
                                    <input type="hidden" name="product" value="${item.properties.id}">
                                    <input name="form_key" type="hidden">
                                    <input type="hidden" name="qty" value="${integerPart}">
                                    <div class="btn-block">
                                        <button type="submit" title="In Winkelwagen" class="btn btn-buy sqr-cart-btn btn--primary btn--xsmall btn--mobile-sm fs-xs fs-sm-xxs fs-xl-sm flex-grow-1 flex-shrink-0" id="ajaxPopup${item.properties.id}" data-id="${item.properties.id}" data-product-sku=""><span class="icon icon-direct-cart icon-small"></span></button>
                                    </div>
                                </form>-->
                            </div>
                        </div>
                    </div>
            </div>
        `;
    }

    function getUrl(item) {
        window.open(item.properties.detail_url)
    }

    function getButton(item, num) {
            return `
                <a class="btn btn-product sqr-cart-btn btn--primary btn--xsmall btn--mobile-sm fs-xs fs-sm-xxs fs-xl-sm flex-grow-1 flex-shrink-0" data-sqrc-item="${item.properties.id}" href="${item.properties.detail_url}">
                    ${num === 1 ?
                    window.innerWidth < 768 ? `<span>Bekijken</span>` : `<span>Product bekijken</span>`
                    :
                    `<span class="icon icon-direct-cart icon-small"></span>`}
                </a>
            `;
    }

    

    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-filter-container 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-filter-title 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-hover:text-gray-500">
                    <h3 class="sqr-text-base sqr-m-0 sqr-font-bold sqr-text-color-facet-label">${facet.label}</h3>
                    <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 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="filter${facet.id}" class="sqr-bg-gray-50 sqr-border sqr-border-gray-300 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="${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.label.includes("Kleur") ? 'sqr-color-filter':''}">
                ${facet.label.includes("Kleur") ?
                    facet.values.map((filterValue, index) => `
                        <div data-sqr-filter-item ${index >= facet.result_limit ? 'data-initially-hidden' : ''} class="sqr-flex sqr-items-baseline ${(!showingMore && index >= facet.result_limit) ? 'sqr-hidden' : ''}">
                            <input id="filter_${facet.id}_${filterValue.value}" style="display:none" class="sqr-filters-checkbox sqr-w-5 sqr-h-5 sqr-shrink-0 sqr-h-4 sqr-w-4" type="checkbox" value="${filterValue.value}" ${filterValue.count === 0 ? 'disabled': ''}>
                            <label for="filter_${facet.id}_${filterValue.value}" class="sqr-flex sqr-items-center sqr-m-0 sqr-w-full sqr-cursor-pointer sqr-text-size-facet-value ${filterValue.count === 0 ? '' : 'sqr-text-color-facet-value'}" title="${filterValue.label}">
                                ${renderFilterLabel(filterValue.label, facet.prefix, facet.suffix)}
                            </label>
                        </div>
                    `).join("")
                    : 
                    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-filters-checkbox sqr-w-5 sqr-h-5 sqr-shrink-0 sqr-h-4 sqr-w-4" type="checkbox" value="${filterValue.value}" ${filterValue.count === 0 ? 'disabled': ''}>
                            <label for="filter_${facet.id}_${filterValue.value}" class="sqr-relative sqr-flex sqr-items-center sqr-filters-label sqr-w-full sqr-cursor-pointer sqr-text-size-facet-value ${filterValue.count === 0 ? '' : 'sqr-text-color-facet-value'}" 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-1 ${filterValue.count === 0 ? 'sqr-text-gray-400 sqr-bg-gray-50' : 'sqr-bg-white'} sqr-rounded-full sqr-whitespace-nowrap sqr-min-w-max sqr-text-gray-700">
                                (${filterValue.count})
                            </span>
                        </div>
                    `).join("")
                }
                ${hasMoreValues ? `
                    <button data-sqr-filter-show-more type="button" onclick="${props.spotler.bindFunction(showMore, facet.dataset, facet.id)}" class="sqr-show-more 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 focus:sqr-ring-indigo-500" type="radio" name="${facet.name}" value="${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" 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-show-more sqr-bg-transparent sqr-border-none sqr-w-full sqr-cursor-pointer sqr-block 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>
                ${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-font-thin">
                        <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 class="sqr-relative sqr-w-full sqr-h-3">
                    <div class="sqr-w-full sqr-h-1 sqr-absolute sqr-inset-y-0 sqr-rounded sqr-m-auto" data-sqr-dual-slider-track></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>
            </div>
        `);
    }


    function renderFilterLabel(label, prefix, suffix) {
        const colors = {
            Antraciet: { color1: "#303030" },
            AntiqueBrass: { color1: "#CD9575" },
            Ash: { color1: "#B2BEB5" },
            Beige: { color1: "#F5F5DC" },
            Betongrijs: { color1: "#7F8C8D" },
            Blauw: { color1: "#0000FF" },
            Blush: { color1: "#FFC0CB" },
            Bordeaux: { color1: "#800020" },
            Brick: { color1: "#CB4154" },
            Bronze: { color1: "#CD7F32" },
            Bruin: { color1: "#A52A2A" },
            "Bruin/Beige": { color1: "#A52A2A", color2: "#F5F5DC" },
            "Bruin/Zwart": { color1: "#A52A2A", color2: "#000000" },
            Camel: { color1: "#C19A6B" },
            Caramel: { color1: "#FFDDAF" },
            Champagne: { color1: "#F7E7CE" },
            Charcoal: { color1: "#36454F" },
            Chrome: { color1: "#CCCCCC" },
            Cinnamon: { color1: "#D2691E" },
            Clay: { color1: "#B66A50" },
            Cognac: { color1: "#87421F" },
            Crème: { color1: "#FFFDD0" },
            Donkerblauw: { color1: "#00008B" },
            Donkerbruin: { color1: "#654321" },
            Donkergrijs: { color1: "#A9A9A9" },
            Donkergroen: { color1: "#013220" },
            Eiken: { color1: "#DEB887" },
            Ecru: { color1: "#C2B280" },
            Espresso: { color1: "#613318" },
            Geel: { color1: "#FFFF00" },
            Gember: { color1: "#D2C295" },
            Goud: { color1: "#FFD700" },
            Greige: { color1: "#B8A07E" },
            Grijs: { color1: "#808080" },
            "Grijs/Bruin": { color1: "#808080", color2: "#A52A2A" },
            "Grijs/Groen": { color1: "#808080", color2: "#008000" },
            Groen: { color1: "#008000" },
            "Wit/Eiken": { color1: "#FFFFF", color2: "#DEB887" },
            "Groen/Eiken": { color1: "#008000", color2: "#DEB887" },
            "Groen/Walnoot": { color1: "#008000", color2: "#774422" },
            Ivory: { color1: "#FFFFF0" },
            Khaki: { color1: "#C3B091" },
            Koper: { color1: "#B87333" },
            Lila: { color1: "#C8A2C8" },
            Lichtbruin: { color1: "#D2B48C" },
            Lichtgrijs: { color1: "#D3D3D3" },
            "lichtgroen": { color1: "#98FF98" },
            Marmer: { color1: "#FFFFFF" },
            Messing: { color1: "#B5A642" },
            Mint: { color1: "#98FF98" },
            Mosterd: { color1: "#FFDB58" },
            Multi: { color1: "#FFFFFF" },
            Multikleur: { color1: "#FFFFFF" },
            Mushroom: { color1: "#8F7D6B" },
            Naturel: { color1: "#FFFFFF" },
            Nikkel: { color1: "#727472" },
            Nude: { color1: "#E3BC9A" },
            Oker: { color1: "#CC7722" },
            Okerbruin: { color1: "#CC7722" },
            Olijfgroen: { color1: "#808000" },
            Oranje: { color1: "#FFA500" },
            Patchwork: { color1: "#FFFFFF" },
            Paars: { color1: "#800080" },
            Petrol: { color1: "#005F6A" },
            Pistache: { color1: "#93C572" },
            Roest: { color1: "#985F2A" },
            Rood: { color1: "#FF0000" },
            Roze: { color1: "#FFC0CB" },
            ShadowZwart: { color1: "#000000" },
            Shiitake: { color1: "#826644" },
            Silver: { color1: "#C0C0C0" },
            Stone: { color1: "#928E85" },
            Tan: { color1: "#D2B48C" },
            Taupe: { color1: "#483C32" },
            Terra: { color1: "#E2725B" },
            Thyme: { color1: "#748B83" },
            Transparant: { color1: "#FFFFFF" },
            Travertin: { color1: "#FFFFFF" },
            Turquoise: { color1: "#40E0D0" },
            Vermiljoen: { color1: "#E34234" },
            Walnoot: { color1: "#774422" },
            WarmBeige: { color1: "#F5F5DC" },
            Wit: { color1: "#FFFFFF" },
            Zand: { color1: "#C2B280" },
            Zilver: { color1: "#C0C0C0" },
            Zwart: { color1: "#000000" },
            "Zwart/Wit": { color1: "#000000", color2: "#FFFFFF" },
            Lood: { color1: "#8D8D8D" },
            Smoke: { color1: "#738276" },
            "Wit/Naturel": { color1: "#FFFFFF", color2: "#FFFFFF" }, // Adjust color2 if needed
            "Wit Marmerlook": { color1: "#FFFFFF" }, // Assuming single color representation
            "Zwart / Goud": { color1: "#000000", color2: "#FFD700" },
            "Zwart Marmerlook": { color1: "#FFFFFF", color2: "#000000" }, // Assuming single color representation
            "Zwart/Brons": { color1: "#000000", color2: "#CD7F32" },
            Brass: { color1: "#B5A642" },
            Ivoor: { color1: "#FFFFF0" },
            Brons: { color1: "#CD7F32" },
            "Off White": { color1: "#FAF9F6" },
            "Shadow Zwart": { color1: "#000000" },
            Nougat: { color1: "#E6B997" },
            "Wit/Zwart": { color1: "#FFFFFF", color2: "#000000" },
            "Licht beige": { color1: "#F5F5DC" },
            "Wit/Groen": { color1: "#FFFFF", color2: "008000"  },
            Bloemenprint: { color1: "#FFFFFF" }, // Defaulting to white as it's a pattern
            "Rococo Agave": { color1: "#67A588" },
            "Warm beige": { color1: "#F5F5DC" },
            "Zwart/Naturel": { color1: "#000000", color2: "#F5F5DC" },
            "Wit/Walnoot": { color1: "#FFFFFF", color2: "#774422" },
            "Naturel/Zwart": { color1: "#F5F5DC", color2: "#000000" },
            "Walnoot/Antraciet": { color1: "#774422", color2: "#303030" },
            "Walnoot/Zwart": { color1: "#774422", color2: "#000000" },
            "Walnoot/Wit": { color1: "#774422", color2: "#FFFFFF" },
            "Zwart/Walnoot": { color1: "#000000", color2: "#774422" },
            "Naturel/Rood": { color1: "#F5F5DC", color2: "#FF0000" },
            "Naturel/Wit": { color1: "#F5F5DC", color2: "#FFFFFF" },
            "Shadow_Zwart": { color1: "#000000" },
            "Wit/Goud": { color1: "#FFFFFF", color2: "#FFD700" },
            "Zwart Brushed": { color1: "#000000" }, // Assuming a single color, brushed texture
            "Antique Brass": { color1: "#CD9575" },
            "Naturel/Blauw": { color1: "#F5F5DC", color2: "#0000FF" },
            "Naturel/Grijs": { color1: "#F5F5DC", color2: "#808080" },
            "Naturel_Groen": { color1: "#F5F5DC", color2: "#008000" },
            "Stone/Wit": { color1: "#928E85", color2: "#FFFFFF" },
            "Walnoot/Geel": { color1: "#774422", color2: "#FFFF00" },
            "Wit/Bruin": { color1: "#FFFFFF", color2: "#A52A2A" },
            "Wit/Zwart": { color1: "#FFFFFF", color2: "#000000" }
        };

        function getColorValue(colorName) {
            if (colors.hasOwnProperty(colorName)) {
                const colorInfo = colors[colorName];
                const numColors = Object.keys(colors[colorName]).length;
                let styleString = `background-color: ${colorInfo.color1};`;
                let colorClass = 'one-color';

                if (numColors === 2) {
                    styleString = `background: linear-gradient(to left, ${colors[colorName].color1}, ${colors[colorName].color2});`;
                    colorClass = 'two-colors';
                }

                return `
                
                    <span class="${colorClass} sqr-mr-2" style="${styleString} width: 1em; height: 1em; border-radius: 50px; border: 1px solid #d0d0d0;display:block"></span>
                    <span class="sqr-filters-label">${label}</span>
                `;
            }
            return label;
        }
        return `${prefix ?? ''} ${getColorValue(label) || colors[defaultColor]} ${suffix ?? ''}`.trim();
    }

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

    return SuggestView(props);
});