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


<div class="bg-white rounded-lg mb-4 -mx-4">
    {% if feature.title is not empty %}
    <div class="relative text-xl font-semibold block py-2 px-4">
        {{ feature.title|raw }}
    </div>
    {% endif %}
    <ul>

        {% for spec in feature.data %}
        <li class="w-full flex items-center justify-between py-2 text-sm whitespace-normal px-4 odd:bg-slate-50">
            <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.textlink is defined and spec.url.textlink is not empty %}
                    <div class="flex gap-2">
                        <a target="_blank" href="{{ spec.url.textlink }}" class="underline text-primary-dark">{{ spec.value|raw }}</a>
                        {% if spec.prices is defined and spec.prices is not empty %}
                        <a target="_blank" href="{{ spec.prices }}" class="underline font-light text-primary-dark">(vedi tutti)</a>
                        {% endif %}
                    </div>
                    
                {% else %}
                    {% if spec.value == 'true' %}
                        {{ yesIcon }}
                    {% elseif spec.value == 'false' %}
                        {{ noIcon }}
                    {% else %}
                        {{ spec.value|raw }}
                    {% endif %}
          
                {% endif %}
            </div>
        </li>
        {% endfor %}
        
    </ul>
</div>
