globalThis.spotler_search_templates = globalThis.spotler_search_templates || {};
globalThis.spotler_search_templates['4a586502-7a90-41ea-8d36-8d2983a4a3e4'] = (function (props) {
const currencyFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
});

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

function matchQueryInBold(str) {
if (str === undefined) {
return '';
}
if (Array.isArray(str)) { str = str.join('') }

const escapedQuery = props.spotler.getSearchTerm().replace(/([.?*+^$[\]\\(){}|-])/g, "\\$&");

return str.replace(new RegExp(escapedQuery, 'gi'), '<span class="sqr-font-bold">$&</span>');
}

function triggerChangeView(event, view) {
event.preventDefault();

props.spotler.triggerViewChange(view);
}
function revertToPreviousSuccessfulState() {
props.spotler.revertToPreviousSuccessfulState();
}

async function SooqrSuggestView(props) {
const { products, 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 sqr-md:inset-0 sqr-md:h-full">
    <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 class="" data-search-results="">
            <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 class="" data-search-results="">
            ${products.data?.map(product => `
            <div class="sqr-flex sqr-mb-3">
                <img class="sqr-h-20 sqr-w-20 sqr-object-scale-down" src="${product.properties.image}" alt="" />
                <div class="sqr-grow sqr-px-4">
                    <div>${matchQueryInBold(product.properties.title)}
                        ${product.properties.singlestring_ExtraData_Promotionalproductname}</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(product.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, 'products')}">Alle producten
                (${products.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, 'products')}">Alle informatie
                (${content.meta?.total})</a>
        </div>
    </div>
</div>
`;
}

async function SooqrProductsView(props) {
const { products } = await props.spotler.fetchResults();

props.state.datasets['products'].filterStates = products.facets.reduce((obj, f) => {
obj[f.id] = { collapsed: f.is_default_collapsed, ...obj[f.id] };
return obj;
}, props.state.datasets['products'].filterStates ?? {});

if (products.meta.total > (products.meta.offset + products.meta.limit)) {
props.spotler.registerInfiniteScroll('products', '[data-sqr-infinite-scroll-item]:last-child', ({ products }) =>
Products(products.data));
}

return `
<div data-sqrc='${props.spotler.getCollectorData('products')}' class="sooqrSearchContainer">
    ${products.meta.total === 0 ? `
    <div class="sooqrCustom">
        <div class="sqr-options ui-helper-clearfix">
            <button data-sqr-close type="button" class="sqr-closeButton">
                <!--<span class="sqr-sr-only">Close modal</span>-->
                <span class="">schließen</span>
            </button>
        </div>
        <div class="sqr-content sqr-no-results">
            <div class="sqr-banners">
                ${Banner(products?.banners)}
            </div>
            <div class="sqr-text-center">
                <h1>Es tut uns leid...</h1>
                <p>Deine Anfrage <b>"${props.spotler.getSearchTerm()}"</b> hat keine Ergebnisse geliefert.</p>
                ${props.spotler.hasPreviousSuccessfulState() ? `
                <p><button type="button" onclick="${props.spotler.bindFunction(revertToPreviousSuccessfulState)}"
                        class="sqr-back-button">
                        Vorherige Ergebnisse anzeigen
                    </button></p>
                ` : ``}
            </div>
        </div>
    </div>
    ` : `
    <div class="sooqrSearchOptionsMobile">
        <div class="sqr-options">
            <div class="sqr-flex sqr-items-center sqr-justify-between">
            <p class="sooqrFilterTextResults"><span class="sqrSearchResultCounter">${products.meta.total}</span> ${products.meta.total === 1 ? ' Ergebnis' : ' Ergebnisse'}</p>
                <label>
                    <select
                        onchange="${props.spotler.bindFunction((event) => props.spotler.triggerSortingChange('products', event.currentTarget.value))}"
                        class="sqr-mr-3">
                        ${products?.sort_fields?.map(sortField => `
                        <option value="${sortField.id}"
                            ${String(props.state.datasets['products'].sortBy)===String(sortField.id) ? 'selected' : ''
                            }>${sortField.label}</option>
                        `).join('')}
                    </select>
                </label>
                <button data-sqr-close type="button" class="sqr-closeButton">
                    <span class="sqr-sr-only">schließen</span>
                </button>
            </div>
        </div>
        <div class="sooqrSearchMobileTabs">
            <div class="sooqrSearchMobileTabsResults ${ props.state.datasets['products'].show_mobile_filters ? '' : 'sooqrSearchMobileTabsActive' }"
                onclick="${props.spotler.bindFunction(() => { props.state.datasets['products'].show_mobile_filters = false; document.querySelector('.sooqrSearchFilters').classList.add('sqr-hidden'); document.querySelector('.sooqrSearchResultsContainer').classList.remove('sqr-hidden'); document.querySelector('.sooqrSearchMobileTabsResults').classList.add("sooqrSearchMobileTabsActive")})}">
                <a><span data-results-text="">Ergebnisse</span> (<span class="sqrSearchResultCounter"
                        aria-live="polite">${products?.meta?.total}</span>)</a>
            </div>
            <div class="sooqrSearchMobileTabsFilters ${ props.state.datasets['products'].show_mobile_filters ? 'sooqrSearchMobileTabsActive' : '' }"
                onclick="${props.spotler.bindFunction(() => { props.state.datasets['products'].show_mobile_filters = true; document.querySelector('.sooqrSearchFilters').classList.remove('sqr-hidden'); document.querySelector('.sooqrSearchResultsContainer').classList.add('sqr-hidden'); })}">
                <a data-filters-text="">Filter</a></div>
        </div>
    </div>

    <!-- Filters -->
    <div
        class="sooqrSearchFilters ${ props.state.datasets['products'].show_mobile_filters ? '' : 'sqr-hidden' } sm:sqr-block">
        <div class="sooqrFilterText">
            <p class="sooqrFilterTextResults">
                <span class="sqrSearchResultCounter">${products?.meta?.total}</span>${products.meta.total === 1 ? 'Ergebnis' : ' Ergebnisse'}
            </p>
            <p class="sqr-reset-filters">
                <a href="#" rel="reset">Filter zurücksetzen</a>
            </p>
            <p>Ergebnisse eingrenzen</p>
        </div>
        <div class="sqr-filters">
            ${ActiveFilters(props.state.datasets['products'], products?.facets)}
            ${Filters(products?.facets)}
        </div>
    </div>
    <div
        class="sooqrSearchResultsContainer sm:sqr-block">
        <div class="sooqrSearchResults">
            <div class="sqr-options">
                <div class="sqr-flex sqr-items-center sqr-w-full sqr-justify-between">
                    <span class="sqr-flex">
                        <p class="sooqrFilterTextResults"><span class="sqrSearchResultCounter">${products.meta.total}</span> ${products.meta.total === 1 ? ' Ergebnis' : ' Ergebnisse'}</p>
                        <label>
                            <select
                                onchange="${props.spotler.bindFunction((event) => props.spotler.triggerSortingChange('products', event.currentTarget.value))}"
                                class="sqr-mr-3">
                                ${products?.sort_fields?.map(sortField => `
                                <option value="${sortField.id}"
                                    ${String(props.state.datasets['products'].sortBy)===String(sortField.id) ? 'selected'
                                    : '' }>${sortField.label}</option>
                                `).join('')}
                            </select>
                        </label>
                    </span>
                    <button data-sqr-close type="button" class="sqr-closeButton">schließen</button>
                </div>
            </div>
            <div class="sqr-banners">
                ${Banner(products?.banners)}
            </div>
            ${SpellcheckMessage(products?.spellcheck, products?.meta?.total)}

            <div class="productList sqr-results" data-sqr-infinite-scroll-container>
                ${Products(products?.data)}
            </div>
        </div>
    </div>
    `}
</div>
`;
}

function ActiveFilters(dataset, facets) {
if (!dataset.filters || Object.keys(dataset.filters).length === 0) {
return '';
}

const filters = [];

for (const [key, value] of Object.entries(dataset.filters)) {
const facet = facets.find(f => Number(f.id) === Number(key));

if (!facet) {
continue;
}

switch (facet.type) {
case 'dualslider':
filters.push({ id: key, label: facet.label, value: `${renderFilterLabel(value.start, facet.prefix, facet.suffix)} -
${renderFilterLabel(value.end, facet.prefix, facet.suffix)}` });
break;
case 'multiselect':
filters.push({ id: key, label: facet.label, value: facet.values.filter(v => value.includes(v.value)).map(v =>
renderFilterLabel(v.label, facet.prefix, facet.suffix)).join(', ') });
break;
default:
filters.push({ id: key, label: facet.label, value: renderFilterLabel(value, facet.prefix, facet.suffix) });
}
}

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

function clearFilters(event, dataset) {
event.preventDefault();
props.spotler.clearAllFilters(dataset);
}

return `
<div class="sqr-border-b sqr-border-gray-200 sqr-mb-6 sqr-chosen-filters">
    <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">Selected filters</h3>
        <button type="button" onclick="${props.spotler.bindFunction(clearFilters, 'products')}" class="sqrResetFilters">Alle Filter zurücksetzen</button>
    </div>
    <div class="sqr-my-2">
        ${filters.map(ActiveFilter).join('')}
    </div>
</div>
`;
}

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

return `
<span
    class="sqrActiveFilters sqr-inline-flex sqr-items-center sqr-px-2 sqr-mr-2 sqr-my-1 sqr-text-xs sqr-font-medium sqr-text-white sqr-rounded">
    ${filter.label}: ${filter.value}
    <button type="button" onclick="${props.spotler.bindFunction(removeFilter, 'products', filter.id)}"
        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="white" 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">Abzeichen entfernen</span>
    </button>
</span>
`;
}

function Filters(filters) {
return filters?.map(facet => {
switch (facet.type) {
case 'select':
return renderSelectFilter({ ...facet, dataset: 'products' });
case 'multiselect':
return renderMultiSelectFilter({ ...facet, dataset: 'products' });
case 'radio':
return renderRadioFilter({ ...facet, dataset: 'products' });
case 'slider':
return renderSliderFilter({ ...facet, dataset: 'products' });
case 'dualslider':
return renderDualSliderFilter({ ...facet, dataset: 'products' });
}
}).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">
    Du hast nach oben geschaut <span class="sqr-underline sqr-italic">${spellcheck.old}</span>, aber wir haben keine Ergebnisse gefunden. Du hast nach oben geschaut 
    <span class="sqr-underline sqr-italic">${spellcheck.new}</span>, wir dachten ${total} Ergebnisse.
</div>
`;
}

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

const banner = banners.pop();

if (banner.desktop.url) {
return `
<a href="${banner.desktop.url}" data-sqrc-banner="${banner.id}" data-sqrc-banner-url="${banner.desktop.url}">
    <img class="sqr-object-cover sqr-w-full" src="${banner.desktop.image}" />
</a>
`;
}

return `<img data-sqrc-banner="${banner.id}" data-sqrc-banner-url="${banner.desktop.url}"
    class="sqr-object-cover sqr-w-full" src="${banner.desktop.image}" />`;
}

function Products(products) {
return products?.map(Product).join('');
}

function Product(product) {
return `
<div class="item sqr-resultItem" data-sqrc-product="${product.properties.id}" data-sqr-infinite-scroll-item>
    <div class="inner active" data-lazyload-role="container" data-lazyload-trigger="scroll" data-lazyload-fadeout="true">
        <div class="thumb">
            <a class="centerImg" data-layer-role="url" href="${product.properties.detail_url}" title="${product.properties.title}">
                <img class="portrait" width="235" height="285" alt="${product.properties.title}" src="${product.properties.image ? product.properties.image : 'https://static.spotlersearch.com/global/image/no-image.png'}">
            </a>
            <div class="labels"></div>
        </div>
        <ul class="availableColors">
                &#173;
        </ul>
        <div class="content">
            <div class="block__title">
                <a class="brandTitle" data-layer-role="url" href="${product.properties.detail_url}" title="View item">
                    <div class="title">${product.properties.title}</div>
                </a>
            </div>
            <div class="priceBlock">
                ${product.properties.price < product.properties.double_normal_price ? `
                    <span class="price priceOld">${formatCurrency(product.properties.double_normal_price)}</span>
                ` : ''}
                <span class="price ${product.properties.price < product.properties.double_normal_price ? 'newPrice' : ''}">${formatCurrency(product.properties.price)}</span>
            </div>
        </div>
    </div>
</div>
`;
}

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.nextElementSibling.classList.contains('sqr-active');

element.nextElementSibling.classList.toggle('sqr-active', !active);
element.nextElementSibling.classList.toggle('sqr-hidden', active);

filterState.collapsed = active;
}
//<div class="searchFilter${collapsed ? '' : ' sqr-active'}">
    return `
    <div data-sqr-filter data-sqr-filter-type="${facet.type}" data-sqr-filter-id="${facet.id}"
        data-sqr-filter-name="${facet.id}" data-sqr-filter-dataset="products">
        <div class="searchFilter">
            <label onclick="${props.spotler.bindFunction(collapse, 'products', facet.id)}">${facet.label}</label>
            <div class="searchFilterValues${collapsed ? '' : ' sqr-active'}">
                ${children}
            </div>
        </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-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="${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.innerHTML = filterState.showing_more ? '<a>Zusätzliche Optionen ausblenden</a>' : '<a>Weitere Optionen anzeigen</a>';

    parentElement.querySelectorAll('[data-initially-hidden]').forEach(element => {
    element.classList.toggle('sqr-hidden', !filterState.showing_more);
    element.classList.toggle('searchFilterField', filterState.showing_more);
    element.classList.toggle('searchFilterFieldMultiselect', 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, `

    ${facet.values.map((filterValue, index) => `
    <div ${index>= facet.result_limit ? 'data-initially-hidden' : ''} class="${(!showingMore && index >= facet.result_limit) ? 'sqr-hidden' : 'searchFilterField searchFilterFieldMultiselect'}">
        <input id="filter_${facet.id}_${filterValue.value}" type="checkbox" value="${filterValue.value}"
            onclick="${props.spotler.bindFunction(() => { props.state.datasets['products'].show_mobile_filters = true; document.querySelector('.sooqrSearchFilters').classList.remove('sqr-hidden');})}">
        <label for="filter_${facet.id}_${filterValue.value}" title="${filterValue.label}">
            ${renderFilterLabel(filterValue.label, facet.prefix, facet.suffix)}
        </label>
        <span>
            ${filterValue.count}
        </span>
    </div>
    `).join("")}
    ${hasMoreValues ? `
    <div type="button" onclick="${props.spotler.bindFunction(showMore, facet.dataset, facet.id)}"
        class="${showingMore ? 'searchFilterHideAllValues' : 'searchFilterShowAllValues'}">
        ${showingMore ? '<a>Zusätzliche Optionen ausblenden</a>' : '<a>Weitere Optionen anzeigen</a>'}
    </div>
    ` : ''}
    `);
    }

    function renderRadioFilter(facet) {
    const hasMoreValues = facet.values.length > facet.result_limit;
    const filterState = props.state.datasets[facet.dataset].filterStates?.[facet.id];
    const showingMore = filterState.showing_more ?? false;

    return renderFilter(facet, `
    <div class="sqr-space-y-2">
        ${facet.values.map((filterValue) => `
        <div class="sqr-flex sqr-items-center">
            <input id="filter_${facet.id}_${filterValue.value}"
                class="sqr-h-4 sqr-w-4 sqr-rounded sqr-border-gray-300 sqr-text-indigo-600 focus:sqr-ring-indigo-500"
                type="radio" name="${facet.name}" value="${filterValue.value}" data-sqr-multiselect-input>
            <label for="filter_${facet.id}_${filterValue.value}"
                class="sqr-w-full sqr-cursor-pointer sqr-ml-3 sqr-text-sm sqr-text-gray-600"
                title="${filterValue.label}">
                ${renderFilterLabel(filterValue.label, facet.prefix, facet.suffix)}
            </label>
            <span
                class="sqr-border sqr-border-gray-200 sqr-border-solid sqr-font-normal sqr-text-xs sqr-py-0.5 sqr-px-2.5 sqr-bg-white sqr-rounded-full sqr-whitespace-nowrap sqr-min-w-max sqr-ml-auto">
                ${filterValue.count}
            </span>
        </div>
        `).join("")}
        ${hasMoreValues ? `
        <button type="button" onclick="${props.spotler.bindFunction(showMore, facet.dataset, facet.id)}"
            class="sqr-bg-transparent sqr-border-none sqr-w-full sqr-cursor-pointer sqr-block sqr-text-blue-600 sqr-text-sm sqr-flex sqr-items-center sqr-font-medium sqr-no-underline hover:sqr-underline">
            ${showingMore ? 'Zusätzliche Optionen ausblenden' : 'Weitere Optionen anzeigen'}
        </button>
        ` : ''}
    </div>
    `);
    }

    function renderSliderFilter(facet) {
    return renderFilter(facet, `
    <div>
        <div class="sqr-dual-slider-track-container">
            <div class="sqr-dual-slider-track" 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 class="sqr-price-inputs 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>
    `);
    }

    function renderDualSliderFilter(facet) {
    return renderFilter(facet, `
    <div>
        <div class="sqr-dual-slider-track-container">
            <div class="sqr-dual-slider-track" 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>
        ${facet.use_input ? `
        <div class="sqr-price-inputs sqr-flex sqr-justify-between">
            <input class="sqr-w-1/4" type="number" step="${facet.step}" min="${facet.min}" value="${facet.min}"
                data-sqr-dual-slider-left-input size="4" />
            <input class="sqr-w-1/4" type="number" step="${facet.step}" min="${facet.min}" max="${facet.max}"
                value="${facet.max}" data-sqr-dual-slider-right-input size="4" />
        </div>
        ` : `
        <div class="sqr-mt-2 sqr-flex sqr-justify-between">
            <div>
                <span>${facet.prefix ?? ''}</span>
                <span data-sqr-dual-slider-left-output>${facet.min}</span>
                <span>${facet.suffix ?? ''}</span>
            </div>
            <div class="sqr-text-right">
                <span>${facet.prefix ?? ''}</span>
                <span data-sqr-dual-slider-right-output>${facet.max}</span>
                <span>${facet.suffix ?? ''}</span>
            </div>
        </div>
        `}
    </div>
    `);
    }

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

    if (props.state.view === 'products') {
    return SooqrProductsView(props);
    }

    return SooqrSuggestView(props);
    });