@if($contracts->isNotEmpty())
    <ul class="space-y-2">
        @foreach($contracts as $contract)
            <li x-data="{ open: false }" class="block">
                {{-- Título del contrato --}}
                <button
                    @click="open = !open" 
                    class="item-menu-nav w-full flex justify-between items-center hover:!bg-white"
                >
                    {{ $contract->name }}
                    
                    {{-- Flecha que rota según open --}}
                    <x-icons.arrow-down 
                        :class="{'rotate-180': open}" 
                        class="transition-transform duration-300 text-current"
                    />
                </button>

                {{-- Submenu de secciones --}}
                <ul 
                    x-show="open" 
                    x-transition 
                    class="mt-2 ml-4 space-y-1"
                >
                    @if($contract->sections->isNotEmpty())
                        @foreach($contract->sections as $section)
                            <li>
                                <x-menu.link 
                                    :route="'contract-sections.index'" 
                                    :params="['idTemplateSection' => $section->id]"
                                >
                                    {{ $section->title }}
                                </x-menu.link>
                            </li>
                        @endforeach
                    @endif
                </ul>
            </li>
        @endforeach
    </ul>
@endif