<section id="scheda-tecnica-{{ post.id }}" class="mb-6 max-w-screen">
    <div class="scheda_container">

        <div x-data="{ open: false }">
            <button 
                x-on:click="open = ! open" 
                class="text-slate-900 rounded-md py-2 text-base font-medium flex items-center justify-between w-full hover:text-primary"
                >
                <span class="font-semibold">Caratteristiche principali</span>
                <div class="h-3 w-3 ml-2 fill-primary" :class="open?'rotate-180':''">
                    {% include "templates/components/icons/angle-down.twig" %} 
                </div>
                
            </button>
            
            <div x-show="open" x-transition class="mb-6">
                <div class="grid grid-cols-2 gap-6">
                    <div class="block">
                        {% include "templates/components/versus/datatable.twig" with {'model': 'A', 'dataset': 'caratteristiche_principali'} %}
                    </div>
                    <div class="block">
                        {% include "templates/components/versus/datatable.twig" with {'model': 'B', 'dataset': 'caratteristiche_principali'} %}
                    </div>
                    
                </div>
            </div>
        </div>

        <div x-data="{ open: false }">
            <button 
                x-on:click="open = ! open" 
                class="text-slate-900 rounded-md py-2 text-base font-medium flex items-center justify-between w-full hover:text-primary"
                >
                <span class="font-semibold">Caratteristiche fotocamera</span>
                <div class="h-3 w-3 ml-2 fill-primary" :class="open?'rotate-180':''">
                    {% include "templates/components/icons/angle-down.twig" %} 
                </div>
                
            </button>
            
            <div x-show="open" x-transition class="mb-6">
                <div class="grid grid-cols-2 gap-6">
                    <div class="block">
                        {% include "templates/components/versus/datatable.twig" with {'model': 'A', 'dataset': 'caratteristiche_fotocamera'} %}
                    </div>
                    <div class="block">
                        {% include "templates/components/versus/datatable.twig" with {'model': 'B', 'dataset': 'caratteristiche_fotocamera'} %}
                    </div>
                    
                </div>
            </div>
        </div>

        <div x-data="{ open: false }">
            <button 
                x-on:click="open = ! open" 
                class="text-slate-900 rounded-md py-2 text-base font-medium flex items-center justify-between w-full hover:text-primary"
                >
                <span class="font-semibold">Altre caratteristiche</span>
                <div class="h-3 w-3 ml-2 fill-primary" :class="open?'rotate-180':''">
                    {% include "templates/components/icons/angle-down.twig" %} 
                </div>
                
            </button>
            
            <div x-show="open" x-transition class="mb-6">
                <div class="grid grid-cols-2 gap-6">
                    <div class="block">
                        {% include "templates/components/versus/datatable.twig" with {'model': 'A', 'dataset': 'altre_caratteristiche'} %}
                    </div>
                    <div class="block">
                        {% include "templates/components/versus/datatable.twig" with {'model': 'B', 'dataset': 'altre_caratteristiche'} %}
                    </div>
                    
                </div>
            </div>
        </div>

        <div x-data="{ open: false }">
            <button 
                x-on:click="open = ! open" 
                class="text-slate-900 rounded-md py-2 text-base font-medium flex items-center justify-between w-full hover:text-primary"
                >
                <span class="font-semibold">Caratteristiche minori</span>
                <div class="h-3 w-3 ml-2 fill-primary" :class="open?'rotate-180':''">
                    {% include "templates/components/icons/angle-down.twig" %} 
                </div>
                
            </button>
            
            <div x-show="open" x-transition class="mb-6">
                <div class="grid grid-cols-2 gap-6">
                    <div class="block">
                        {% include "templates/components/versus/datatable.twig" with {'model': 'A', 'dataset': 'caratteristiche_minori'} %}
                    </div>
                    <div class="block">
                        {% include "templates/components/versus/datatable.twig" with {'model': 'B', 'dataset': 'caratteristiche_minori'} %}
                    </div>
                    
                </div>
            </div>
        </div>

    </div>

</section>
