{% set yesIcon %}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="#10b981" class="size-3 inline-block">
    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
</svg>
{% endset %}


{% set noIcon %}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="#dc2626" class="size-3 inline-block">
    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>  
{% endset %}


{% if feature.titolo is not empty %}
<div class="text-left my-4">
    <span class="text-primary uppercase text-left text-sm font-semibold block border-b border-primary pb-2">{{ feature.titolo }}</span>
</div>
{% endif %}
<ul class="divide-y divide-slate-200 data_{{feature.titolo|lower|replace({' ': '_'})}}">

    {% for spec in feature.features %}
    <li class="w-full flex items-center justify-between py-2 text-sm whitespace-normal">
        <div class="spec-title block max-w-20 text-xs text-left">{{ spec.titolo|raw }}</div>
        <div class="spec-data block text-xs text-right font-semibold">
            {{ spec.value 
                | replace({ 
                    '<i class="ok"></i>': yesIcon,
                    '<i class="wrong"></i>': noIcon 
                }) 
                | raw 
            }}
        </div>
    </li>
    {% endfor %}
    
</ul>

<script>
(function() {
    function equalizeHeights() {
        // Trova tutti gli ul con classi che iniziano con 'data_'
        const ulElements = document.querySelectorAll('ul[class*="data_"]');
        
        if (ulElements.length === 0) return;
        
        // Nascondi temporaneamente per evitare CLS
        const containersToHide = [];
        ulElements.forEach(ul => {
            if (ul.style.visibility !== 'hidden') {
                containersToHide.push(ul);
                ul.style.visibility = 'hidden';
            }
        });
        
        // Raggruppa gli ul per classe
        const classGroups = {};
        
        ulElements.forEach(ul => {
            // Ottieni tutte le classi che iniziano con 'data_'
            const dataClasses = Array.from(ul.classList).filter(className => 
                className.startsWith('data_')
            );
            
            dataClasses.forEach(className => {
                if (!classGroups[className]) {
                    classGroups[className] = [];
                }
                classGroups[className].push(ul);
            });
        });

        // Processa ogni gruppo di classi
        Object.keys(classGroups).forEach(className => {
            processClassGroup(className, classGroups[className]);
        });
        
        // Mostra di nuovo con requestAnimationFrame per evitare CLS
        requestAnimationFrame(() => {
            containersToHide.forEach(ul => {
                ul.style.visibility = 'visible';
            });
        });
    }

    function processClassGroup(className, ulElements) {
        if (ulElements.length === 0) return;

        // Trova il numero massimo di li tra tutti gli ul di questa classe
        let maxLiCount = 0;
        ulElements.forEach(ul => {
            const liCount = ul.querySelectorAll('li').length;
            if (liCount > maxLiCount) {
                maxLiCount = liCount;
            }
        });

        // Per ogni indice di li, equalizza le altezze
        for (let index = 0; index < maxLiCount; index++) {
            equalizeLiAtIndex(ulElements, index);
        }
    }

    function equalizeLiAtIndex(ulElements, index) {
        // Raccogli tutti i li con questo indice
        const liElementsAtIndex = [];
        
        ulElements.forEach(ul => {
            const liElements = ul.querySelectorAll('li');
            if (liElements[index]) {
                liElementsAtIndex.push(liElements[index]);
            }
        });

        if (liElementsAtIndex.length === 0) return;

        // Reset delle altezze per ottenere le altezze naturali
        liElementsAtIndex.forEach(li => {
            li.style.height = 'auto';
        });

        // Trova l'altezza massima tra tutti i li con questo indice
        let maxHeight = 0;
        liElementsAtIndex.forEach(li => {
            const height = li.offsetHeight;
            if (height > maxHeight) {
                maxHeight = height;
            }
        });

        // Imposta tutti i li con questo indice all'altezza massima
        if (maxHeight > 0) {
            liElementsAtIndex.forEach(li => {
                li.style.height = maxHeight + 'px';
            });
        }
    }

    // Debounce per il resize per evitare troppe esecuzioni
    let resizeTimeout;
    function debouncedEqualize() {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(equalizeHeights, 100);
    }

    // Esegui quando il DOM è pronto
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', equalizeHeights);
    } else {
        // Piccolo delay per assicurarsi che tutto sia renderizzato
        setTimeout(equalizeHeights, 10);
    }

    // Riesegui al ridimensionamento della finestra con debounce
    window.addEventListener('resize', debouncedEqualize);

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                equalizeHeights();
            }
        });
    });
})();
</script>

