globalThis.spotler_search_templates = globalThis.spotler_search_templates || {};
globalThis.spotler_search_templates['b35a4a6a-b901-438f-8d4c-7755ad50dcce'] = (function (props) {
    const [state, setState] = props.useState({
        mobileView: 'results',
        tileLayout: props.getConfig('defaultTileLayout'),
        facets: [],
    });

    const currencyFormatter = new Intl.NumberFormat('nl-NL', {
        style: 'currency',
        currency: props.getConfig('currency') || 'EUR',
    });

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

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

        const escapedSearchTerm = props.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]);
    }

    async function SuggestView() {
        const { data, error, isFetching } = props.useSpotlerQuery();

        if (isFetching && !data) {
            return `<div></div>`;
        }

        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>
                        ${data.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="#" ${props.onClick(() => props.setView('items'))}>Alle items (${data.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="">
                        ${data.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="#" ${props.onClick(() => props.setView('items'))}>Alle informatie (${data.content.meta?.total})</a>
                    </div>
                </div>
            </div>
        `;
    }

    async function ItemsView() {
        const { data, error, hasNextPage, fetchNextPage, isFetching, isFetchingNextPage, hasLastSuccessfulState, revertToLastSuccessfulState } = props.useSpotlerInfiniteQuery('items', {
            onSuccess: (data) => {
                setState('facets', (prev) => data.facets.map(facet => {
                    const prevFacet = prev?.find(f => f.id === facet.id);

                    return {
                        ...facet,
                        collapsed: prevFacet?.collapsed ?? facet.is_default_collapsed,
                        showing_more: prevFacet?.showing_more ?? false,
                    }
                }))

                if (props.getConfig('autoScrollToTop')) {
                    props.scrollToTop();
                }
            }
        });

        if (isFetching && !data.pages.length) {
            //return ItemsViewSkeleton();
            return `<div></div>`;
        }

        const items = data.pages[0];

        const tileLayoutClasses = {
            detail: 'sqr-grid-cols-2 sqr-gap-x-4 tablet:sqr-grid-cols-3 desktop:sqr-grid-cols-4',
            list: 'sqr-grid-cols-1',
            grid: 'sqr-grid-cols-2 sqr-gap-x-4 tablet:sqr-grid-cols-3 desktop:sqr-grid-cols-4',
        }

        return `
            <div data-sqr-container class="sooqrSearchContainer sooqrSearchContainer-119457-1 sooqr-index-collection-19457" id="sooqrView5acd69a398d78aab">
                ${items.meta.total === 0 ? `
                    <div class="sooqrCustom">
                        <div class="sqr-content sqr-no-results">
                            <div class="sqr-text-center">
                                <h1>Helaas...</h1>
                                <p>Uw zoekopdracht op <b>"${props.getSearchTerm()}"</b> gaf geen resultaten terug.</p>
                                ${hasLastSuccessfulState ? `
                                    <p>
                                        <button type="button" ${props.onClick(() => revertToLastSuccessfulState())} 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>
                                    </p>
                                ` : ``}
                            </div>
                        </div>
                    </div>
                `:`
                <div class="sooqrSearchResultsContainer">
                    <div class="sooqrSearchResults">
                        ${isFetching ? `
                            <div class="sqr-sticky sqr-top-1/2 -sqr-mt-8 sqr-z-10 sqr-flex sqr-items-center sqr-justify-center sqr-pointer-events-none">
                                <div class="sqr-w-8 sqr-h-8 sqr-border-4 sqr-rounded-full sqr-border-solid sqr-border-t-transparent sqr-border-primary sqr-animate-spin" role="status">
                                    <span class="!sqr-absolute !-sqr-m-px !sqr-h-px !sqr-w-px !sqr-overflow-hidden !sqr-whitespace-nowrap !sqr-border-0 !sqr-p-0 ![clip:sqr-rect(0,0,0,0)]">Loading...</span>
                                </div>
                            </div>
                        ` : ''}
                        
                        <div class="sqr-banners">
                            ${Banners(items?.banners)}
                        </div>
                        ${SpellcheckMessage(items?.spellcheck, items?.meta?.total)}
                        <ul class="${isFetching ? 'sqr-opacity-50' : ''} search-results sqr-results sqr-list">
                            ${data.pages.map((page) => Items(page.data)).join('')}
                        </ul>
                        ${items.meta.total > 5 ? `
                                <a class="button more" href="/zoeken/?q=${!items?.spellcheck ? props.getSearchTerm() : items.spellcheck.new }">Bekijk alle zoekresultaten</a>
                        `:''}
                    </div>
                </div>
                `}
            </div>
        `;
    }

    function ItemsViewSkeleton() {
        return `
            <div data-sqr-container class="sqr-flex sqr-flex-col sqr-font-sans sqr-text-base sqr-scroll-mt-custom sqr-w-full sqr-h-full sqr-bg-white sqr-shadow sqr-overflow-hidden">
                <div class="sqr-flex sqr-text-sm sqr-text-gray-600 sqr-bg-white sqr-border-b sqr-justify-between sqr-items-center sqr-sticky sqr-top-0 sqr-p-3">
                    <div role="status" class="sqr-w-40 sqr-animate-pulse">
                        <div class="sqr-h-2.5 sqr-w-3/4 sqr-bg-gray-200 sqr-rounded-full sqr-mb-2"></div>
                        <div class="sqr-h-2 sqr-w-full sqr-bg-gray-200 sqr-rounded-full"></div>
                    </div>
                    <div class="sqr-flex sqr-items-center">
                        <button ${props.onClick(() => props.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">${props.t('close_modal')}</span>
                        </button>
                    </div>
                </div>
                <div class="sqr-overflow-x-auto sqr-flex sqr-overflow-y-hidden">
                    <div class="sqr-hidden tablet:sqr-block sqr-w-[350px]">
                        <div role="status" class="sqr-m-4 sqr-animate-pulse">
                            ${Array(2).fill().map(() => (`
                                <div class="sqr-mb-8 sqr-space-y-2 sqr-divide-y sqr-divide-gray-200">
                                    <div class="sqr-flex sqr-items-center sqr-justify-between">
                                        <div class="sqr-w-full sqr-h-4 sqr-mr-2 sqr-bg-gray-200 sqr-rounded-full"></div>
                                        <div class="sqr-h-6 sqr-bg-gray-300 sqr-rounded sqr-w-8"></div>
                                    </div>
                                    ${Array(8).fill().map(() => (`
                                        <div class="sqr-flex sqr-items-center sqr-justify-between sqr-pt-1">
                                            <div class="sqr-h-4 sqr-w-6 sqr-bg-gray-300 sqr-rounded"></div>
                                            <div class="sqr-w-full sqr-h-2.5 sqr-mx-2 sqr-bg-gray-200 sqr-rounded-full"></div>
                                            <div class="sqr-h-4 sqr-bg-gray-300 sqr-rounded-full sqr-w-10"></div>
                                        </div>
                                    `)).join('')}
                                </div>
                            `)).join('')}
                            <span class="sqr-sr-only">${props.t('loading')}</span>
                        </div>
                    </div>
                    <div class="sqr-relative sqr-w-full sqr-px-4">
                        <div class="sqr-grid sqr-grid-cols-2 sqr-gap-x-4 sqr-gap-y-10 tablet:sqr-grid-cols-3 desktop:sqr-grid-cols-4 sqr-my-4">
                            ${Array(12).fill().map(() => (`
                                <div role="status" class="sqr-border sqr-border-gray-200 sqr-shadow sqr-animate-pulse">
                                    <div class="sqr-flex sqr-items-center sqr-justify-center sqr-h-48 sqr-mb-4 sqr-bg-gray-300">
                                        <svg class="sqr-w-10 sqr-h-10 sqr-text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
                                            <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
                                            <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
                                        </svg>
                                    </div>
                                    <div class="sqr-p-4">
                                        <div class="sqr-h-2.5 sqr-bg-gray-200 sqr-rounded-full sqr-mb-4"></div>
                                        <div class="sqr-h-2 sqr-w-3/4 sqr-bg-gray-200 sqr-rounded-full sqr-mb-2.5"></div>
                                        <div class="sqr-h-2 sqr-w-3/4 sqr-bg-gray-200 sqr-rounded-full sqr-mb-2.5"></div>
                                        <div class="sqr-h-2 sqr-w-3/4 sqr-bg-gray-200 sqr-rounded-full"></div>
                                        <span class="sqr-sr-only">${props.t('loading')}</span>
                                    </div>
                                </div>
                            `)).join('')}
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    function LayoutButtons() {
        return '';

        return `
            <div class="sqr-mx-8">
                <button type="button" class="${state.tileLayout === 'grid' ? 'sqr-text-blue-400' : 'sqr-cursor-pointer sqr-text-gray-400 hover:sqr-text-gray-600'} sqr-bg-transparent sqr-border-0 sqr-p-1" ${props.onClick(() => setState('tileLayout', 'grid'))} title="Grid">
                    <svg aria-hidden="true" fill="currentColor" class="sqr-w-4 sqr-h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm88 64l0 64-88 0 0-64 88 0zm56 0l88 0 0 64-88 0 0-64zm240 0l0 64-88 0 0-64 88 0zM64 224l88 0 0 64-88 0 0-64zm232 0l0 64-88 0 0-64 88 0zm64 0l88 0 0 64-88 0 0-64zM152 352l0 64-88 0 0-64 88 0zm56 0l88 0 0 64-88 0 0-64zm240 0l0 64-88 0 0-64 88 0z"/>
                    </svg>
                </button>
                <button type="button" class="${state.tileLayout === 'list' ? 'sqr-text-blue-400' : 'sqr-cursor-pointer sqr-text-gray-400 hover:sqr-text-gray-600'} sqr-bg-transparent sqr-border-0 sqr-p-1" ${props.onClick(() => setState('tileLayout', 'list'))} title="List">
                    <svg aria-hidden="true" fill="currentColor" class="sqr-w-4 sqr-h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z"/>
                    </svg>
                </button>
                <button type="button" class="${state.tileLayout === 'detail' ? 'sqr-text-blue-400' : 'sqr-cursor-pointer sqr-text-gray-400 hover:sqr-text-gray-600'} sqr-bg-transparent sqr-border-0 sqr-p-1" ${props.onClick(() => setState('tileLayout', 'detail'))} title="Detail">
                    <svg aria-hidden="true" fill="currentColor" class="sqr-w-4 sqr-h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                        <path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/>
                    </svg>
                </button>
            </div>
        `
    }

    function ActiveFilters(filters, facets) {
        if (!Array.isArray(filters) || filters.length === 0) {
            return '';
        }

        const convertedFilters = [];

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

            if (!facet) {
                continue;
            }

            switch (facet.type) {
                case 'dualslider':
                    convertedFilters.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':
                    convertedFilters.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:
                    convertedFilters.push({
                        name: facet.name,
                        label: facet.label,
                        value: renderFilterLabel(filter.value, facet.prefix, facet.suffix)
                    });
            }
        }

        if (convertedFilters.length === 0) {
            return '';
        }

        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">${props.t('chosen_filters')}</h3>
                    <button type="button" ${props.onClick(() => props.clearAllFilters('items'))} class="sqr-bg-transparent sqr-border-none sqr-cursor-pointer sqr-text-color-link sqr-font-medium hover:sqr-underline">
                        ${props.t('remove_all_filters')}
                    </button>
                </div>
                <div class="sqr-my-2">
                    ${convertedFilters.map(ActiveFilter).join('')}
                </div>
            </div>
        `;
    }

    function ActiveFilter(filter) {
        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" ${props.onClick((e, filter) => props.clearFilter('items', filter.name), filter)} 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">${props.t('remove_filter')}</span>
              </button>
            </span>
        `;
    }

    function Facets(facets) {
        return facets?.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">
                ${props.t('spellcheck_results', { old: spellcheck.old, new: spellcheck.new, count: total })}
            </div>
        `;
    }

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

        const banner = banners[0];
        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}" ${props.onClick((e, banner) => props.sendEvent('banner', banner), banner[type])}>
                    <img loading="lazy" class="sqr-w-full" src="${banner[type].image}" />
                </a>
            `;
        }

        return `<img loading="lazy" ${props.onClick((e, banner) => props.sendEvent('banner', banner), banner[type])} class="sqr-w-full ${mediaClasses}" src="${banner[type].image}" />`;
    }

    function Items(items) {
        return items?.map((item, index) => Item({ ...item, index })).join('');
    }

    function Item(item) {
        const tileLayoutClasses = {
            detail: '',
            list: {
                container: 'sqr-flex sqr-gap-x-2',
                image: 'sqr-grow-0 sqr-max-h-32',
                content: 'sqr-grow',
            },
            grid: {
                container: 'sqr-flex-col',
                image: 'sqr-max-h-60 sqr-w-full tablet:sqr-h-60',
                content: 'sqr-mt-4 sqr-h-[100px]',
            },
        }

        const layout = tileLayoutClasses[state.tileLayout]

        return `
            <li class="sqr-resultItem sqr-relative" data-sqrc-item="${item.properties.id}">
                <div class="content sqr-right">
                    <h3>
                        <a ${props.onClick((e, item) => props.sendEvent('click', item), item)} href="${item.properties.detail_url}?sqr=${props.getSearchTerm()}" class="[overflow-wrap:anywhere]">
                            <span aria-hidden="true" class="sqr-absolute sqr-inset-0"></span>
                            ${item.properties.title}
                        </a>
                    </h3>
                    ${item.properties.type ? `
                        <span class="type">${item.properties.type[0]}</span>
                    `:``}
                    <span class="sqr-description">${item.properties.text_text ? matchQueryInBold(item.properties.text_text[0]): ''}</span>
                </div>
            </li>
        `;
    }

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

        if (discountedPrice > 0 && price !== discountedPrice) {
            return `
                <p class="sqr-m-0 sqr-font-medium sqr-font-font-result-old-price sqr-text-size-result-old-price sqr-text-color-result-old-price sqr-line-through">
                    ${formatCurrency(price)}
                </p>
                <p class="sqr-m-0 sqr-font-medium sqr-font-font-result-discount-price sqr-text-size-result-discount-price sqr-text-color-result-discount-price">
                    ${formatCurrency(discountedPrice)}
                </p>
            `;
        }

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


    function renderFilter(facet, children) {
        return `
            <div class="sqr-my-2" data-sqr-filter data-sqr-filter-dataset="${facet.dataset}" data-sqr-filter-type="${facet.type}" data-sqr-filter-id="${facet.id}" data-sqr-filter-name="${facet.name}">
                <button type="button" ${props.onClick((e, facet) => setState(prev => ({ ...prev, facets: prev.facets.map(f => ({ ...f, collapsed: f.id === facet.id ? !f.collapsed : f.collapsed })) })), facet)} class="${facet.collapsed ? '' : 'sqr-active'} sqr-group sqr-cursor-pointer sqr-border-none sqr-flex sqr-w-full sqr-items-center sqr-justify-between sqr-bg-white sqr-py-2 sqr-px-1 sqr-text-sm sqr-text-gray-400 sqr-hover:text-gray-500">
                    <h3 class="sqr-m-0 sqr-font-medium sqr-font-font-facet-title sqr-text-size-facet-title sqr-text-color-facet-title">${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="${facet.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 renderMultiSelectFilter(facet) {
        const hasMoreValues = facet.values.length > facet.result_limit;
        const filterValues = props.getFilterValue(facet.dataset, facet.name) || [];

        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-border sqr-border-solid sqr-border-gray-300 sqr-text-gray-900 sqr-text-sm sqr-rounded-lg sqr-focus:ring-blue-500 sqr-focus:border-blue-500 sqr-block sqr-w-full sqr-pl-8 sqr-p-1.5" placeholder="Search..." required>
                    </div>
                ` : ''}
                ${facet.values.map((filterValue, index) => `
                    <div data-sqr-filter-item ${index >= facet.result_limit ? 'data-initially-hidden' : ''} class="sqr-flex sqr-items-center ${(!facet.showing_more && index >= facet.result_limit) ? 'sqr-hidden' : ''}">
                        <input
                            id="filter_${facet.id}_${filterValue.value}"
                            class="sqr-shrink-0 sqr-h-4 sqr-w-4 sqr-rounded sqr-border-gray-300"
                            type="checkbox"
                            value="${escapeHtml(filterValue.value)}"
                            ${filterValues.includes(filterValue.value) ? 'checked': ''}
                            ${filterValue.count === 0 ? 'disabled': ''}
                            ${props.onChange((e, dataset, name, value) => props.toggleFilterValue(dataset, name, value), facet.dataset, facet.name, filterValue.value)}
                        >
                        <label for="filter_${facet.id}_${filterValue.value}" class="sqr-w-full sqr-cursor-pointer sqr-ml-3 sqr-font-font-facet-value sqr-text-size-facet-value ${filterValue.count === 0 ? 'sqr-text-gray-400' : 'sqr-text-color-facet-value'}" title="${filterValue.label}">
                            ${renderFilterLabel(filterValue.label, facet.prefix, facet.suffix)}
                        </label>
                        <span class="sqr-border sqr-border-gray-200 sqr-border-solid sqr-font-normal sqr-font-font-facet-value sqr-text-size-facet-value sqr-py-0.5 sqr-px-2.5 ${filterValue.count === 0 ? 'sqr-text-gray-400 sqr-bg-gray-50' : 'sqr-bg-white'} sqr-rounded-full sqr-whitespace-nowrap sqr-min-w-max sqr-ml-auto">
                            ${filterValue.count}
                        </span>
                    </div>
                `).join("")}
                ${hasMoreValues ? `
                    <button type="button" ${props.onClick((e, facet) => setState(prev => ({ ...prev, facets: prev.facets.map(f => ({ ...f, showing_more: f.id === facet.id ? !f.showing_more : f.showing_more })) })), facet)} class="sqr-bg-transparent sqr-border-none sqr-w-full sqr-cursor-pointer sqr-text-color-link sqr-text-size-facet-toggle sqr-font-font-facet-toggle sqr-flex sqr-items-center sqr-font-medium sqr-no-underline hover:sqr-underline">
                        ${facet.showing_more ? props.t('show_less') : props.t('show_more')}
                    </button>
                ` : ''}
            </div>
        `);
    }

    function renderRadioFilter(facet) {
        const hasMoreValues = facet.values.length > facet.result_limit;

        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)}"
                            ${props.onChange((e, dataset, name, value) => props.setFilterValue(dataset, name, value), facet.dataset, facet.name, filterValue.value)}
                        >
                        <label for="filter_${facet.id}_${filterValue.value}" class="sqr-w-full sqr-cursor-pointer sqr-ml-3 sqr-font-font-facet-value sqr-text-size-facet-value sqr-text-color-facet-value" 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-font-font-facet-value sqr-text-size-facet-value sqr-py-0.5 sqr-px-2.5 ${filterValue.count === 0 ? 'sqr-text-gray-400 sqr-bg-gray-50' : 'sqr-bg-white'} sqr-rounded-full sqr-whitespace-nowrap sqr-min-w-max sqr-ml-auto">
                            ${filterValue.count}
                        </span>
                    </div>
                `).join("")}
                ${hasMoreValues ? `
                    <button type="button" ${props.onClick(() => setState(prev => ({ ...prev, facets: prev.facets.map(f => ({ ...f, showing_more: f.id === facet.id ? !f.showing_more : f.showing_more })) })))} class="sqr-bg-transparent sqr-border-none sqr-w-full sqr-cursor-pointer sqr-text-color-link sqr-text-size-facet-toggle sqr-font-font-facet-toggle sqr-flex sqr-items-center sqr-font-medium sqr-no-underline hover:sqr-underline">
                        ${facet.showing_more ? props.t('show_less') : props.t('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-color-facet-toggle 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 (state.view === 'suggest') {
        return SuggestView();
    }

    return ItemsView();
});