{% 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 %}


{% for section in specs.sections %}

    {% if section.section_title == 'Prezzi' %}

    {% include "templates/components/versus2/pricetable.twig" %}

    {% else %}
    <div class="my-4 -mx-4 border-b border-slate-200">
        {% if section.section_title is not empty %}
        <div class="text-center my-4 px-4">
            <div class="font-semibold block text-xl">{{ section.section_title }}</div>
        </div>
        {% endif %}
        {% for spec in section.sections_specs %}
            <div class="text-center my-4 px-4 bg-slate-100">
                <div class="text-sm font-bold">{{ spec.titolo }}</div>
            </div>
            <div class="grid grid-cols-2 gap-2 divide-x justify-between my-4 text-center text-sm">    
                {% for value in spec.values %}
                    <div class="text-xs">{{ value|replace({ '<i class="ok"></i>': yesIcon, '<i class="wrong"></i>': noIcon }) | raw }}</div>
                {% endfor %}
            </div>
        {% endfor %}
    </div>
    {% endif %}



{% endfor %}

