{% set yesIcon %}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="#10b981" class="size-4 inline-block -mt-1">
    <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-4 inline-block -mt-1">
    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>  
{% endset %}


<div class="-mx-4">
    {% if feature.title is not empty %}
    <div {% if feature.title|lower == 'prezzi' %}x-data="{ open: true }"{% else %}x-data="{ open: false }"{% endif %}>
        <button @click="open = !open" class="w-full text-left text-primary px-4 py-3 uppercase text-base font-semibold flex justify-between items-center">
            <span>{{ feature.title|raw }}</span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-4 h-4 transition-transform" :class="{ 'rotate-180': open }">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
            </svg>
        </button>
        <div 
            x-cloak
            x-show="open" 
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 h-0"
            x-transition:enter-end="opacity-100 h-auto"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 h-auto"
            x-transition:leave-end="opacity-0 h-0"
            class="overflow-hidden px-4">

            <ul class="divide-y">
                {% for spec in feature.data %}
                <li class="w-full flex items-center justify-between py-2 text-sm whitespace-normal">
                    <div class="spec-title flex items-center max-w-40 lg:max-w-full text-sm text-left pr-4">{{ spec.title|raw }}</div>
                    <div class="spec-data block text-sm text-right font-semibold max-w-[450px]">
                        {% if spec.url is defined and spec.url is not empty %}
                            <a target="_blank" href="{{ spec.url }}" class="underline hover:text-primary">{{ spec.value|raw }}</a>
                        {% else %}
                            {% if spec.value == 'true' %}
                                {{ yesIcon }}
                            {% elseif spec.value == 'false' %}
                                {{ noIcon }}
                            {% else %}
                                {{ spec.value|raw }}
                            {% endif %}
                        {% endif %}
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    {% endif %}
</div>


