globalThis.spotler_search_templates = globalThis.spotler_search_templates || {};
globalThis.spotler_search_templates['3cc6eefd-c500-47f1-a8d1-d13cdb622ab5'] = (function (props) {
    const currencyFormatter = new Intl.NumberFormat('nl-NL', {
        // style: 'currency',
        // currency: props.spotler.getConfig('currency') || 'EUR',
        minimumFractionDigits: 2, maximumFractionDigits: 2
    });

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

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

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

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

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

        props.spotler.triggerViewChange(view);
    }

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

    async function SuggestView(props) {
        const { items, content } = await props.spotler.fetchResults();

        return `
            <div data-sqr-container class="sqr-font-sans sqr-absolute sqr-bg-white sqr-top-0 sqr-left-0 sqr-right-0 sqr-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();

        await attachStock(items);

        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', async ({ items }) => {
                await attachStock(items);
                return Items(items.data);
            });
        }

        return `
            <div data-sqrc="${props.spotler.getCollectorData('items')}" class="sooqrSearchContainer sqr-w-full">
                <div class="sqr-flex">
                    <div class="sooqrSearchFilters ${props.state.datasets['items'].show_mobile_filters ? '' : 'sqr-hidden'} desktop:sqr-block ${props.spotler.getConfig('floatingFilterBar') ? 'sqr-overflow-y-auto' : ''}">
                        <div class="">
                            ${ActiveFilters(props.state.datasets['items'], items?.facets)}
                            ${Filters(items?.facets)}
                        </div>
                    </div>
                    <div class="sqr-w-full desktop:sqr-px-4">
                        <div class="sqrOptions">
                        <button id="sqrFilterToggle" onclick="${props.spotler.bindFunction(() => { props.state.datasets['items'].show_mobile_filters = true; document.querySelector('.sooqrSearchFilters').classList.remove('sqr-hidden'); })}">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#747474" d="M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z"/></svg>
                            <span>Filter</span>
                        </button>
                            <label>
                                <select onchange="${props.spotler.bindFunction((event) => props.spotler.triggerSortingChange('items', event.currentTarget.value))}" class="sqr-mr-3">
                                    ${items?.sort_fields?.map(sortField => `
                                        <option value="${sortField.id}" ${String(props.state.datasets['items'].sortBy) === String(sortField.id) ? 'selected' : ''}>${sortField.label}</option>
                                    `).join('')}
                                </select>
                            </label>
                            <span class="sqr-flex sqr-items-center sqr-gap-x-1">
                                <div class="sqrResultCount sqr-font-semibold"><span>${items?.meta?.total}</span> ${items?.meta?.total === 1 ? 'résultat' : 'résultats'}</div>
                                <div class="modes">
                                    <strong class="modes-label" id="modes-label">Afficher en</strong>
                                    <button onclick="${props.spotler.bindFunction(gridToggle, '')}" title="Grille" class="modes-mode ${props.state.variables['list_view'] === 'grid' || !props.state.variables['list_view'] ? 'active' :''} mode-grid" data-value="grid">
                                        <span>Grille</span>
                                    </button>
                                    <button onclick="${props.spotler.bindFunction(listToggle, '')}" class="modes-mode mode-list ${props.state.variables['list_view'] === 'list' ? 'active' :''}" title="Liste" href="#" data-role="mode-switcher" data-value="list" id="mode-list" aria-labelledby="modes-label mode-list">
                                        <span>Liste</span>
                                    </button>
                                    <button onclick="${props.spotler.bindFunction(fastToggle, '')}" class="modes-mode mode-fast ${props.state.variables['list_view'] === 'fast' ? 'active' :''}" title="Fast" href="#" data-role="mode-switcher" data-value="fast" id="mode-fast" aria-labelledby="modes-label mode-fast">
                                        <span>Fast</span>
                                    </button>
                                </div>
                                <button data-sqr-close type="button" class="sqr-flex 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">
                                    <span>Fermer</span>
                                    <svg aria-hidden="true" class="sqr-w-5 sqr-h-5" fill="#000" 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>
                                </button>
                            </span>
                        </div>
                        ${items.meta.total === 0 ? `
                            <div class="sqr-text-center">
                                <p>Nous n'avons trouvé aucun résultat</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">
                                        Afficher les résultats précédents
                                    </button>
                                ` : ``}
                            </div>
                        ` : `
                            ${SpellcheckMessage(items?.spellcheck, items?.meta?.total)}
                            ${Banners(items?.banners)}
                            <div class="products wrapper ${props.state.variables['list_view'] === 'grid' || !props.state.variables['list_view'] ? 'grid columns4 products-grid no-padding divider-line' : ''}${props.state.variables['list_view'] === 'list' ? 'list  products-list' : ''}${props.state.variables['list_view'] === 'fast' ? 'fast  products-fast' : ''}">
                                ${props.state.variables['list_view'] === 'fast' ? `
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>Photo</th>
                                                <th>Nom / Référence</th>
                                                <th>Prix de référence HT</th>
                                                <th>Disponibilité</th>
                                                <th>Document</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody data-sqr-infinite-scroll-container>
                                            ${Items(items?.data)}
                                        </tbody>
                                    </table>
                                ` : `
                                    <ol class="filterproducts products list items product-items" data-sqr-infinite-scroll-container>
                                        ${Items(items?.data)}
                                    </ol>
                                `}
                            </div>
                        `}
                    </div>
                </div>
            </div>
        `;
    }

    async function attachStock(items) {
        const itemIds = items.data?.map(item => item.properties.id);

        if (!Array.isArray(itemIds) || itemIds.length === 0) {
            return;
        }

        try {
            const response = await fetch(`https://www.eshop-alliance.com/rest/eshopalliance_fr/V1/getStockAvailability?productIds=${itemIds.join(',')}`, {
            // const response = await fetch(`https://nexitup.eshop-alliance.com/rest/nexitup_fr/V1/getStockAvailability?productIds=${itemIds.join(',')}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            });

            const results = await response.json();

            if (results.length === 0) {
                return;
            }

            const stockMap = results[0];

            for (const item of items.data) {
                item.properties.stock = stockMap[item.properties.id] ?? false;
            }
        } catch (error) {
            console.log('Failed to retrieve stock');
        }
    }

    function gridToggle() {
        if (props.state.variables['list_view'] === 'list') {
            document.querySelector('.sooqrSearchContainer .products').classList.add('grid','columns4','products-grid','no-padding','divider-line');
            document.querySelector('.sooqrSearchContainer .products').classList.remove('list','products-list');
            document.querySelector('button.modes-mode.mode-grid').classList.add('active');
            document.querySelector('button.modes-mode.mode-list').classList.remove('active');
        }
        if (props.state.variables['list_view'] === 'fast') {
            document.querySelector('.sooqrSearchContainer .products').classList.add('grid','columns4','products-grid','no-padding','divider-line');
            document.querySelector('.sooqrSearchContainer .products').classList.remove('fast','products-fast');
            document.querySelector('button.modes-mode.mode-fast').classList.remove('active');
            document.querySelector('button.modes-mode.mode-grid').classList.add('active');
        };
        props.spotler.setVariable('list_view', 'grid');
        props.spotler.handleChanges()
    }

    function listToggle() {
        if (props.state.variables['list_view'] === 'grid') {
            document.querySelector('.sooqrSearchContainer .products').classList.add('list','products-list');
            document.querySelector('.sooqrSearchContainer .products').classList.remove('grid','columns4','products-grid','no-padding','divider-line');
            document.querySelector('button.modes-mode.mode-grid').classList.remove('active');
            document.querySelector('button.modes-mode.mode-list').classList.add('active');
        };
        if (props.state.variables['list_view'] === 'fast') {
            document.querySelector('.sooqrSearchContainer .products').classList.add('list','products-list');
            document.querySelector('.sooqrSearchContainer .products').classList.remove('fast','products-fast');
            document.querySelector('button.modes-mode.mode-fast').classList.remove('active');
            document.querySelector('button.modes-mode.mode-list').classList.add('active');
        };
        props.spotler.setVariable('list_view', 'list');
        props.spotler.handleChanges()
    }

    function fastToggle() {
        if (props.state.variables['list_view'] === 'grid') {
            document.querySelector('.sooqrSearchContainer .products').classList.add('fast','products-fast');
            document.querySelector('.sooqrSearchContainer .products').classList.remove('grid','columns4','products-grid','no-padding','divider-line');
            document.querySelector('button.modes-mode.mode-grid').classList.remove('active');
            document.querySelector('button.modes-mode.mode-fast').classList.add('active');
        };
        if (props.state.variables['list_view'] === 'list') {
            document.querySelector('.sooqrSearchContainer .products').classList.add('fast','products-fast');
            document.querySelector('.sooqrSearchContainer .products').classList.remove('list','products-list');
            document.querySelector('button.modes-mode.mode-list').classList.remove('active');
            document.querySelector('button.modes-mode.mode-fast').classList.add('active');
        };
        props.spotler.setVariable('list_view', 'fast');
        props.spotler.handleChanges()
    }

    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="sqrActiveFilters">
                <label>Filtres sélectionnés</label>
                <div class="searchFilterValues">
                    <div class="sqr-my-2">
                        ${filters.map(ActiveFilter).join('')}
                    </div>
                </div>
            </div>
            <button class="sqrDeleteAllFilters" type="button" onclick="${props.spotler.bindFunction(clearFilters, 'items')}">Tout supprimer</button>
        `;
    }

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

        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-gray-800">
              ${filter.label}: ${filter.value}
              <button class="action remove" type="button" onclick="${props.spotler.bindFunction(removeFilter, 'items', filter.name)}" class="sqr-border-none sqr-inline-flex sqr-items-center sqr-p-0.5 sqr-ml-2 sqr-text-xs sqr-text-blue-400 sqr-bg-transparent sqr-rounded-sm hover:sqr-bg-blue-200 hover:sqr-text-blue-900" aria-label="Remove">
                  <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">
                Votre recherche de <span class="sqr-italic sqr-text-red-500">/${spellcheck.old}/</span>  n'a donné aucun résultat. Nous avons recherché <span class="sqr-italic sqr-text-green-500">/${spellcheck.new}/</span> avec ${total} ${total === 1 ? 'résultat' : 'résultats'}.
            </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('');
    }

    
    var loggedIn = document.querySelectorAll('body.loggedin');  
    function getCookie(name) {
    let cookieArr = document.cookie.split(";");

    for(let i = 0; i < cookieArr.length; i++) {
        let cookiePair = cookieArr[i].split("=");

        // Removing whitespace at the beginning of the cookie name and compare it with the given name
        if(name == cookiePair[0].trim()) {
            // Decode the cookie value and return
            return decodeURIComponent(cookiePair[1]);
        }
    }

    // Return null if not found
    return null;
    }

    var formKey = getCookie('form_key');
    var addToCartEnabled = false;
    function Item(item) {
        if (props.state.variables['list_view'] === 'grid' || props.state.variables['list_view'] === 'list' || !props.state.variables['list_view']){
            return `
                <li class="item product product-item nth-child-2np1 nth-child-3np1 nth-child-4np1 nth-child-5np1 nth-child-6np1 nth-child-7np1 nth-child-8np1" data-sqrc-item="${item.properties.id}" data-sqr-infinite-scroll-item>
                    <div class="product-item-info type2" data-container="product-grid">
                        <div class="product photo product-item-photo">
                            <a href="${item.properties.detail_url}" title="${item.properties.title}">
                                <img class="product-image-photo default_image porto-lazyload" 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="product details product-item-details">
                            <strong class="product name product-item-name">
                                <a class="product-item-link" href="${item.properties.detail_url}">${item.properties.title}</a>
                            </strong>
                            ${props.state.variables['list_view'] === 'list' ? `
                                <div class="product description product-item-description">
                                        <p>${
                                            item.properties['sqr:description'] 
                                                ? (function(encodedString) {
                                                    let tempElement = document.createElement('div');
                                                    tempElement.innerHTML = encodedString;
                                                    return tempElement.textContent || tempElement.innerText;
                                                })(item.properties['sqr:description']) 
                                                : ''
                                        }</p>
                                </div>
                            `:``}
                            ${loggedIn.length !== 0 ? `
                                <span class="price-label-ac">Prix net</span>
                                <div class="price-box price-final_price">
                                    <span class="special-price">${formatCurrency(item.properties.double_normal_price)}€ HT</span>
                                </div>
                            `:``}
                            <div class="price-label-ac ${loggedIn.length !== 0 ? 'sqr-hidden' : ''}">Prix de référence HT</div>
                            <div class="${loggedIn.length !== 0 ? 'sqr-hidden' : 'price-box price-final_price'}" data-role="priceBox" data-product-id="${item.properties.id}" data-price-box="product-id-${item.properties.id}">
                                <span class="base-price">${formatCurrency(item.properties.price)}€ HT</span>
                            </div>
                            <div class="info-reference">Référence :  ${item.properties['sqr:sku']}</div>
                            ${props.state.variables['list_view'] === 'list' ? `
                                ${item.properties['sqr:ac_ns_reference_fabriquant'] ? `
                                    <div class="info-reference-fournisseur">Réf. fournisseur :  ${item.properties['sqr:ac_ns_reference_fabriquant']}</div>`:``}
                                ${item.properties['sqr:ac_ns_ean_code'] ? `
                                    <div class="info-ean">Code EAN :  ${item.properties['sqr:ac_ns_ean_code']}</div>`:``}
                            `:``}
                            <div class="info-stock ${item.properties.stock ? 'in-stock' : 'out-of-stock'}">${item.properties.stock ? 'En stock' : 'Sur commande'}</div>
                            <div class="product-item-inner">
                                <div class="product actions product-item-actions">
                                ${props.state.variables['list_view'] === 'grid' || !props.state.variables['list_view'] ? `
                                    <a href="/sooqr/wishlist/add/product/${item.properties.id}" class="action towishlist actions-secondary" title="Ajouter à ma liste d’envie" aria-label="Ajouter à ma liste d’envie" role="button">
                                        <span>Ajouter à ma liste d’envie</span>
                                    </a>
                                `:``}
                                    <div class="actions-primary">
                                        ${addToCartEnabled && loggedIn.length !== 0 && item.properties['sqr:is_in_stock'][0] === 'in stock' ? `
                                            <form data-role="tocart-form" action="/sooqr/cart/add/product/${item.properties.id}/" method="post">
                                                <input type="hidden" name="product" value="${item.properties.id}">
                                                <input name="form_key" value="${formKey}" type="hidden">
                                                <input type="hidden" name="qty" value="1">
                                                </button>
                                                <button type="submit" title="Ajouter au panier" class="action tocart primary" id="ajaxPopup${item.properties.id}" data-id="${item.properties.id}" >
                                                    <span>Ajouter au panier</span>
                                                </button>
                                            </form>
                                        
                                        `:`
                                            <a href="${item.properties.detail_url}" class="action secondary">
                                                <span>Lire la suite</span>
                                            </a>
                                        `}
                                    </div>
                                ${props.state.variables['list_view'] === 'list' ? `
                                    <a href="/sooqr/wishlist/add/product/${item.properties.id}" class="action towishlist actions-secondary" title="Ajouter à ma liste d’envie" aria-label="Ajouter à ma liste d’envie" role="button">
                                        <span>Ajouter à ma liste d’envie</span>
                                    </a>
                                `:``}
                                    <a href="default/sooqr/compare/add/product/${item.properties.id}" class="action tocompare actions-secondary" title="Ajouter au comparateur" aria-label="Ajouter au comparateur" role="button">
                                        <span>Ajouter au comparateur</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            `;
        }
        else {
            return `
                <tr class="sqr-item" data-sqr-infinite-scroll-item>
                    <td data-th="Photo">
                        <a href="${item.properties.detail_url}"> 
                            <img class="product-image-photo default_image porto-lazyload" 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>
                    </td>
                    <td data-th="Nom / Référence">
                        ${item.properties.title} <div class="info-reference">Référence : ${item.properties['sqr:sku']}</div>
                        ${item.properties['sqr:ac_ns_ean_code'] || item.properties['sqr:ac_ns_reference_fabriquant'] ? `
                        <div class="info-reference-fournisseur">Réf. fournisseur : ${item.properties['sqr:ac_ns_reference_fabriquant']}</div>`:``}
                        ${item.properties['sqr:ac_ns_ean_code'] ? `
                        <div class="info-ean">Code EAN : ${item.properties['sqr:ac_ns_ean_code']}</div>
                        `:''}
                    </td>
                    <td data-th="Prix de référence HT">
                        <div class="price-box price-final_price" data-role="priceBox" data-product-id="317541" data-price-box="product-id-317541">
                            <span class="base-price${item.properties.double_normal_price && item.properties.double_normal_price > item.properties.price ? '' : ' sqr-hidden'}">
                                ${formatCurrency(item.properties.double_normal_price)} € HT
                            </span>
                            <span class="price-label-ac">Prix net</span>
                            <span class="special-price">
                                ${formatCurrency(item.properties.price)} € HT
                            </span>
                        </div>
                    </td>
                    <td data-th="Disponibilité">
                        <div class="info-stock ${item.properties.stock ? 'in-stock' : 'out-of-stock'}">${item.properties.stock ? 'En stock' : 'Sur commande'}</div>
                    </td>
                    <td data-th="Document">
                    ${item.properties['sqr:ac_ns_lien_fiche_technique'] || item.properties['sqr:ac_ns_nom_fiche_technique'] ? `
                        <p><a href="/media/fiches_techniques/${item.properties['sqr:ac_ns_lien_fiche_technique']}">${item.properties['sqr:ac_ns_nom_fiche_technique'] ? item.properties['sqr:ac_ns_nom_fiche_technique'] : item.properties['sqr:ac_ns_lien_fiche_technique']}</a></p>
                        `:``}
                    </td>
                    <td data-th="Action">
                        <div class="actions-primary">
                        ${addToCartEnabled && loggedIn.length !== 0 && item.properties.stock ? `
                            <form data-role="tocart-form" action="/sooqr/cart/add/product/${item.properties.id}/" method="post">
                                <input type="hidden" name="product" value="${item.properties.id}">
                                <input name="form_key" type="hidden">
                                    <div class="qty-box">
                                        <a href="javascript:void(0)" class="qtyminus"><i class="porto-icon-minus"></i></a>
                                        <input type="text" name="qty" id="qty" maxlength="12" value="1" title="Qté" class="input-text qty" data-validate="null">
                                        <a href="javascript:void(0)" class="qtyplus"><i class="porto-icon-plus"></i></a>
                                    </div>
                                </button>
                                <button type="submit" title="Ajouter au panier" class="action tocart primary" id="ajaxPopup${item.properties.id}" data-id="${item.properties.id}" >
                                    <span>Ajouter au panier</span>
                                </button>
                            </form>
                        
                        `:`
                            <a href="${item.properties.detail_url}" class="action secondary">
                                <span>Lire la suite</span>
                            </a>
                        `}
                        </div>
                    </td>
                </tr>
            `
        }
    }

    function renderFilter(facet, children) {
        const filterState = props.state.datasets[facet.dataset].filterStates?.[facet.id];
        const collapsed = filterState?.collapsed ?? facet.is_default_collapsed;

        function collapse(e, dataset, filterId) {
            e.preventDefault();

            const element = e.currentTarget;
            const filterState = props.state.datasets[dataset].filterStates?.[filterId];
            const active = element.classList.contains('sqr-active');

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

            filterState.collapsed = active;
        }

        return `
            <div class="searchFilter 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-text-gray-400 sqr-hover:text-gray-500">
                    <h3 class="sqr-m-0 sqr-font-medium sqr-text-color-facet-label sqr-text-size-facet-label">${facet.label}</h3>
                </button>
                <div class="searchFilterValues ${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-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.textContent = filterState.showing_more ? 'Show fewer' : 'Show more';

        parentElement.dataset.sqrFilterShowingMore = filterState.showing_more;

        parentElement.querySelectorAll('[data-initially-hidden]').forEach(element => {
            element.classList.toggle('sqr-hidden', !filterState.showing_more);
        });
    }

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

        return renderFilter(facet, `
            <div class="sqr-px-1 sqr-space-y-2">
                ${facet.searchable ? `
                    <div class="sqr-relative sqr-w-full sqr-mb-4">
                        <div class="sqr-absolute sqr-inset-y-0 sqr-left-0 sqr-flex sqr-items-center sqr-pl-2.5 sqr-pointer-events-none">
                            <svg class="sqr-w-4 sqr-h-4 sqr-text-gray-500" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </div>
                        <input data-search-filter type="text" class="sqr-bg-gray-50 sqr-border sqr-border-solid sqr-border-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 ${(!showingMore && index >= facet.result_limit) ? 'sqr-hidden' : ''}">
                        <input id="filter_${facet.id}_${filterValue.value}" class="sqr-shrink-0 sqr-h-4 sqr-w-4 sqr-rounded sqr-border-gray-300" type="checkbox" value="${filterValue.value}" ${filterValue.count === 0 ? 'disabled': ''}>
                        <label for="filter_${facet.id}_${filterValue.value}" class="sqr-w-full sqr-cursor-pointer sqr-ml-1 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>
                            (${filterValue.count})
                        </span>
                    </div>
                `).join("")}
                ${hasMoreValues ? `
                    <button data-sqr-filter-show-more type="button" onclick="${props.spotler.bindFunction(showMore, facet.dataset, facet.id)}" class="sqr-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 ? 'Show fewer' : 'Show more'}
                    </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 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-1 sqr-text-sm sqr-text-gray-600" title="${filterValue.label}">
                            ${renderFilterLabel(filterValue.label, facet.prefix, facet.suffix)}
                        </label>
                        <span>
                            (${filterValue.count})
                        </span>
                    </div>
                `).join("")}
                ${hasMoreValues ? `
                    <button type="button" onclick="${props.spotler.bindFunction(showMore, facet.dataset, facet.id)}" class="sqr-bg-transparent sqr-border-none sqr-w-full sqr-cursor-pointer sqr-block sqr-text-blue-600 sqr-text-sm sqr-flex sqr-items-center sqr-font-medium sqr-no-underline hover:sqr-underline">
                        ${showingMore ? 'Show fewer' : 'Show more'}
                    </button>
                ` : ''}
            </div>
        `);
    }

    function renderSliderFilter(facet) {
        return renderFilter(facet, `
            <div class="sqr-relative sqr-h-3 sqr-mb-3">
                <input class="sqr-w-full sqr-h-1 sqr-outline-none sqr-absolute sqr-m-auto sqr-inset-y-0 sqr-bg-transparent sqr-pointer-events-none" type="range" min="${facet.min}" max="${facet.max}" value="${facet.min}" step="${facet.step}">
            </div>
        `);
    }

    function renderDualSliderFilter(facet) {
        return renderFilter(facet, `
            <div>
                <div class="sqr-relative sqr-w-full sqr-h-3">
                    <div class="sqrHorizonalSlider sqr-w-full sqr-h-1 sqr-absolute sqr-inset-y-0 sqr-rounded sqr-m-auto" data-sqr-dual-slider-track></div>
                    <input class="sqr-appearance-none sqr-w-full sqr-outline-none sqr-absolute sqr-m-auto sqr-inset-y-0 sqr-bg-transparent sqr-pointer-events-none" type="range" min="${facet.min}" max="${facet.max}" value="${facet.min}" step="${facet.step}" data-sqr-dual-slider-left-input>
                    <input class="sqr-appearance-none sqr-w-full sqr-outline-none sqr-absolute sqr-m-auto sqr-inset-y-0 sqr-bg-transparent sqr-pointer-events-none" type="range" min="${facet.min}" max="${facet.max}" value="${facet.max}" step="${facet.step}" data-sqr-dual-slider-right-input>
                </div>
                ${facet.use_input ? `
                    <div class="sqr-flex sqr-justify-between">
                        <input class="sqr-w-1/4" type="number" step="${facet.step}" min="${facet.min}" value="${facet.min}" data-sqr-dual-slider-left-input size="4" />
                        <input class="sqr-w-1/4" type="number" step="${facet.step}" min="${facet.min}" max="${facet.max}" value="${facet.max}" data-sqr-dual-slider-right-input size="4" />
                    </div>
                ` : `
                    <div class="sqr-mt-2 sqr-flex sqr-justify-between">
                        <div>
                            <span>${facet.prefix ?? ''}</span>
                            <span data-sqr-dual-slider-left-output>${facet.min}</span>
                            <span>${facet.suffix ?? ''}</span>
                        </div>
                        <div class="sqr-text-right">
                            <span>${facet.prefix ?? ''}</span>
                            <span data-sqr-dual-slider-right-output>${facet.max}</span>
                            <span>${facet.suffix ?? ''}</span>
                        </div>
                    </div>
                `}
            </div>
        `);
    }

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

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

    return SuggestView(props);
});