globalThis.spotler_search_templates = globalThis.spotler_search_templates || {};
globalThis.spotler_search_templates['5bb4d3a4-64f7-40bc-951a-9090e8448761'] = (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 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-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">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="">
                        ${items.meta.total === 0 ? `
                        ${Banners(items?.banners)}
                            <div class="sqr-text-center sqr-p-8">
                                <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>
                        ` : `
                <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-overlay" class="${props.state.datasets['items'].show_mobile_filters ? '' : 'sqrHideFilter'}"></div> -->
                    <!-- <div id="sqr-left-container" class="sqr-hidden desktop:sqr-block sqr-w-[350px] sqr-w-1/4"> -->
                    <div id="sqr-overlay" class="sqrHideFilter"></div>
                    <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="">Filter</div>
                                <div onclick="${props.spotler.bindFunction(() => { props.state.datasets['items'].show_mobile_filters = false; document.getElementsByTagName('body')[0].classList.remove("sqr-overflow-hidden"); document.getElementById("sqr-overlay").classList.add("sqrHideFilter"); 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">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icons-default-x" fill="#758CA3" fill-rule="evenodd"></use></svg>                                
                                </div>
                            </div>
                        <div class="sqr-m-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-bg-white sqr-border-b sqr-justify-between sqr-sticky sqr-top-0 sqr-p-3">
                                <!-- <div> -->
                                    <div class="sooqrSearchMobileTabsFilters ${window.innerWidth > 768 ? 'sqr-hidden' : ''}">
                                        <button onclick="${props.spotler.bindFunction(() => { props.state.datasets['items'].show_mobile_filters = true;document.getElementsByTagName('body')[0].classList.add("sqr-overflow-hidden"); document.getElementById("sqr-overlay").classList.remove("sqrHideFilter"); document.getElementById("sqr-left-container").classList.add("sqr-open-filters"); document.getElementById("sqr-left-container").style.animation = "open-filters 0.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="#758CA3" 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>
                                            Filter
                                        </button>
                                    </div>
                                    <div class="${window.innerWidth < 768 ? 'sqr-hidden' : ''} sqr-search-result-total"><span>${items?.meta?.total}</span> 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"><span>${items?.meta?.total}</span> ${items?.meta?.total === 1 ? 'product' : 'producten'}</div>
                        </div>
                        <div class="sqr-w-full sqr-px-4 ${props.spotler.getConfig('floatingFilterBar') ? 'sqr-overflow-y-auto' : ''}">
                            ${Banners(items?.banners)}
                            ${SpellcheckMessage(items?.spellcheck, items?.meta?.total)}
                            <div class="${window.innerWidth < 768 ? 'sqr-grid-cols-2' : 'sqr-grid-cols-3'} sqr-grid sqr-gap-x-4 sqr-gap-y-10 sqr-my-4" data-sqr-infinite-scroll-container>
                                ${Items(items?.data)}
                            </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(', ') });
                    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-flex sqr-w-3/4 sqr-items-center sqr-justify-between sqr-bg-white sqr-my-3 sqr-text-sm sqr-hover:text-gray-500">
                    <h3 class="sqr-m-0 sqr-uppercase sqr-text-xl">Gekozen filters</h3>
                </div>
                <div class="sqr-my-2 sqr-flex sqr-gap-4 sqr-flex-wrap">
                    ${filters.map(ActiveFilter).join('')}
                </div>
            </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-2 sqr-bg-transparent sqr-rounded-sm hover:sqr-bg-blue-200" aria-label="Remove">
                  <svg aria-hidden="true" class="sqr-w-4 sqr-h-4" 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 naar <span class="sqr-underline sqr-italic">${spellcheck.old}</span>, maar wij vonden geen resultaten. Bedoel je misschien <span class="sqr-underline sqr-italic">${spellcheck.new}</span>Hiervoor vonden we ${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 calculateDiscountPercentage(originalPrice, discountedPrice) {
        if (originalPrice <= 0 || discountedPrice <= 0 || discountedPrice >= originalPrice) {
            return null; // Handle invalid cases gracefully
        }
        let discountAmount = originalPrice - discountedPrice;
        let discountPercentage = (discountAmount / originalPrice) * 100;
        return Math.floor(discountPercentage);
    }

    function Item(item) {
        let discountPercentage = null;
        if (item.properties.double_normal_price && item.properties.double_normal_price !== item.properties.price) {
            discountPercentage = calculateDiscountPercentage(item.properties.double_normal_price, item.properties.price);
        }
        return `
            <div class="product-box sqr-group sqr-relative sqr-py-5 sqr-px-7" data-sqrc-item="${item.properties.id}" data-sqr-infinite-scroll-item>
                <div class="sqr-relative sqr-h-60 sqr-aspect-w-1 sqr-aspect-h-1 sqr-w-full sqr-overflow-hidden sqr-bg-gray-200 group-hover:sqr-opacity-75 desktop:sqr-aspect-none desktop:sqr-h-60">
                    ${discountPercentage ? `
                    <div class="product-badges">
                        <div class="badge bg-danger badge-discount">
                            <span class="price-percentage">${discountPercentage}%</span>
                            <span class="text">korting</span>
                        </div>
                    </div>
                    `:``}
                    <a href="${item.properties.detail_url}?sqr=${props.spotler.getSearchTerm()}"><img loading="lazy" alt="${item.properties.title}" src="${item.properties.image}" onerror="this.src='${props.spotler.getConfig('defaultNoImage')}';this.onerror='';" class="sqr-h-full sqr-w-full sqr-bg-white sqr-object-contain sqr-object-center desktop:sqr-h-full desktop:sqr-w-full" /></a>
                </div>
                <div class="sqr-min-h-56 sqr-mt-4 sqr-flex sqr-justify-between sqr-gap-1 sqr-flex-col">
                    <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}?sqr=${props.spotler.getSearchTerm()}">
                            ${props.spotler.getConfig('enableResultItemClick') ? `<span aria-hidden="true" class="sqr-absolute sqr-inset-0"></span>` : ''}
                            ${item.properties.title}
                        </a>
                    </h3>
                    <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-items-center">
                    ${item.properties.price || item.properties.double_normal_price ? `
                        <div>
                            <p class="sqr-price sqr-text-sm sqr-m-0 sqr-font-medium sqr-text-color-result-price">${formatCurrency(item.properties.price)}
                            ${item.properties.double_normal_price ? `
                            <span class="list-price list-price-no-line-through">
                                <span class="list-price-price">${formatCurrency(item.properties.double_normal_price)}</span>
                            </span>
                            `:``}
                            </p>
                            ${parseInt(item.properties.stock) >= 1 ? '<div class="stock-status in-stock">Op voorraad</div>' : '<div class="stock-status out-of-stock">Binnenkort beschikbaar</div>'}
                        </div>
                    `:``}
                        <div class="maxia-quickbuy-actions">
                            ${getButton(item)}
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    function getButton(item) {
        if(parseInt(item.properties.stock) >= 1 ) {
            return `
            <a class="btn btn-buy sqr-cart-btn" data-sqrc-item="${item.properties.id}" href="${item.properties.detail_url}?sqr=${props.spotler.getSearchTerm()}">
                <span class="icon icon-valantic icon-valantic-cart">
                    <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.53564 2.3374L5.27684 6.63464H11.6951L9.43634 2.3374C9.27106 2.00685 9.4088 1.59365 9.71181 1.42837C10.0424 1.26309 10.4556 1.40082 10.6208 1.70384L13.1826 6.63464H15.5516C16.0199 6.63464 16.4331 7.04783 16.4331 7.51612C16.4331 8.01196 16.0199 8.39761 15.5516 8.39761L14.1192 14.1273C13.9264 14.8986 13.2102 15.4495 12.4114 15.4495H4.58818C3.76179 15.4495 3.07313 14.8986 2.85276 14.1273L1.44789 8.39761C0.952056 8.39761 0.566406 8.01196 0.566406 7.51612C0.566406 7.04783 0.952056 6.63464 1.44789 6.63464H3.78933L6.35115 1.70384C6.51643 1.40082 6.92962 1.26309 7.26018 1.42837C7.56319 1.59365 7.70092 2.00685 7.53564 2.3374ZM5.85531 9.71983C5.85531 9.49946 5.63494 9.27909 5.41457 9.27909C5.16665 9.27909 4.97383 9.49946 4.97383 9.71983V12.3643C4.97383 12.6122 5.16665 12.805 5.41457 12.805C5.63494 12.805 5.85531 12.6122 5.85531 12.3643V9.71983ZM8.49976 9.27909C8.25185 9.27909 8.05902 9.49946 8.05902 9.71983V12.3643C8.05902 12.6122 8.25185 12.805 8.49976 12.805C8.72014 12.805 8.94051 12.6122 8.94051 12.3643V9.71983C8.94051 9.49946 8.72014 9.27909 8.49976 9.27909ZM12.0257 9.71983C12.0257 9.49946 11.8053 9.27909 11.585 9.27909C11.337 9.27909 11.1442 9.49946 11.1442 9.71983V12.3643C11.1442 12.6122 11.337 12.805 11.585 12.805C11.8053 12.805 12.0257 12.6122 12.0257 12.3643V9.71983Z" fill="white"></path>
                    </svg>
                </span>
            </a>
            `
        } else if (item.properties.content_type && item.properties.content_type[0] === 'content') {
            return `
            <a class="btn btn-buy sqr-mail-btn" href="${item.properties.detail_url}?sqr=${props.spotler.getSearchTerm()}" title="Details">
                <span class="icon icon-valantic icon-valantic-mail">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#FFFFFF" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
                </span>
            </a>
              `
        }
        else {
            return `
            <a class="btn btn-buy sqr-mail-btn" href="${item.properties.detail_url}?sqr=${props.spotler.getSearchTerm()}" title="Details">
                <span class="icon icon-valantic icon-valantic-mail">
                    <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.875 0.0244141H18.125C19.1406 0.0244141 20 0.826497 20 1.77441C20 2.35775 19.6875 2.86816 19.2188 3.19629L10.7422 9.139C10.2734 9.46712 9.6875 9.46712 9.21875 9.139L0.742188 3.19629C0.273438 2.86816 0 2.35775 0 1.77441C0 0.826497 0.820312 0.0244141 1.875 0.0244141ZM0 5.10775L8.47656 11.0869C9.375 11.7067 10.5859 11.7067 11.4844 11.0869L20 5.10775V12.6911C20 14.0036 18.8672 15.0244 17.5 15.0244H2.5C1.09375 15.0244 0 14.0036 0 12.6911V5.10775Z" fill="white"></path>
                    </svg>
                </span>
            </a>
              `
        }
    }

    

    function renderFilter(facet, children) {
        // if (facet.id === 206205 && ['bbq','barbeque','barbecue'].indexOf(props.spotler.getSearchTerm().toLowerCase()) !== -1) {
        //     return
        // }
        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-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-lg sqr-m-0 sqr-font-medium sqr-text-color-facet-label sqr-uppercase">${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 ? 'Bekijk minder' : 'Bekijk 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;
        const excludeFilters = ["Angus & Oink","Bad Byron’s","Barebones","BBQ","Benegas","Biolite","Bison","Blues Hog","BonFeu","Bowls and Dishes","Butler","Don Marco’s","Excellent Housewar","Feuerhand","Fire & Smoke Society","Fire up","Forged","Goeie Dingen","Grill Fanatics","Heath Riles","Hit","Homey’s","Intco","Jack Daniels","Jealous Devil","Killer Hogs","Koopman","Kosmo’s","Laguiole","Laguiole,Premium Line","Loods Roden","Loot n’ Booty BBQ","Louisiana Grills","Luxury Line","Madame Jeanette Hote Sauce","Madison","Meat Church","Meater","Nachtmann","NomadiQ","Noskos","Noviplast","Outlaw BBQ","Petromax","Pitmaster X","Premium Line","Rijngas","Rock’n’Rubs","Ronneby","Rub Some","Saus.Guru","SenS-Line","Skulls","Smokey Goodness","Smokey Olive Wood","Smokin’ Flavours","Special Shit Big Cock Ranch","Style de vie","Sucklebusters","Sunware","The Spit on Fire","Three Little Pigs","Vaggan","Victorinox","Zeeuwsche Zoute","Smokin' Flavours","Don Marco's","Rock'n' Rubs","Style de Vie","Kosmo’s Q","Bad Byron's","Madame Jeanette Hot Sauce","Homey's","Fire Up","Omnia"];
        const searchTerm = props.spotler.getSearchTerm().toLowerCase();
        const isExcludedTerm = ['bbq', 'barbeque', 'barbecue'].some(term => searchTerm.includes(term));

        return renderFilter(facet, `
            <div class="sqr-px-1 sqr-space-y-2">
                ${facet.label !== "Kleur" ?
                    facet.values.map((filterValue, index) => `
                    ${facet.id === 206205 && isExcludedTerm && excludeFilters.some(filter => filterValue.label.includes(filter)) ?  ``  :`
                        <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-filters-label sqr-w-full sqr-cursor-pointer sqr-ml-3 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}" 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-filters-label 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("")
                }
                ${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 ? 'Bekijk minder' : 'Bekijk 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 ? 'Bekijk minder' : 'Bekijk 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) {
        const filterState = props.state.datasets[facet.dataset].filters?.[facet.id];

        return renderFilter(facet, `
            <div class="filter-range-container" data-sqr-dual-slider>
                <div class="unit-text">€</div>
                <label class="filter-range-min">
                    <input class="form-control min-input" type="number" value="${filterState?.start}" data-sqr-dual-slider-left-input>
                </label>
                <div class="unit-text">tot</div>
                <label class="filter-range-max">
                    <input class="form-control max-input" type="number" value="${filterState?.end}" data-sqr-dual-slider-right-input>
                </label>
            </div>
        `);
    }


    function renderFilterLabel(label, prefix, suffix) {
        const colors = {
            Beige: "#e8dcca",
            Antraciet: "#383e42",
            Blauw: "#6891E8",
            Bruin: "#674630",
            Donkerblauw: "#00008B",
            Donkergroen: "#013220",
            Geel: "#EADDCA",
            Grijs: "#959595",
            Groen: "#689f69",
            Lichtblauw: "#add8e6",
            Oranje: "#ffa500",
            Paars: "#800080",
            Rood: "#ff0000",
            Roze: "#ffc0cb",
            Wit: "#ffffff",
            Zilver: "#c0c0c0",
            Zwart: "#000000",
            Creme: "#f5f5dc",
            Bordeaux: "#800020",
            Goud: "#ffd700",
            Grafietzwart: "#1c1c1c",
            Khaki: "#f0e68c",
            Lichtbruin: "#a67b5b",
            Lichtgrijs: "#d3d3d3",
            Lichtgroen: "#90ee90",
            Lichtroze: "#ffb6c1",
            Mediumblauw: "#0000cd",
            Taupe: "#483c32",
            Turquoise: "#40e0d0",
            "Diverse kleuren": "#ffffff",  
            Donkerbruin: "#654321",
            Doorzichtig: "#ffffff",     
            Multicolour: "#ffffff",
            Transparant: "#ffffff",
            Brons: "#774f2e"
        };

    function getColorValue(colorName) {
        if (colors.hasOwnProperty(colorName)) {
            return `
            <div class="sqr-flex sqr-items-center">
                <div style="background-color:${colors[colorName]};width:2em;height:2em;border-radius:4px;border:1px solid #d0d0d0" class="sqr-mr-2"></div>
                <div>${label}</div>
            </div>`;
        }
        return label;
    }
        return `${prefix ?? ''} ${getColorValue(label)} ${suffix ?? ''}`.trim();
    }

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

    return SuggestView(props);
});