@props(['contract'])

<div class="bg-white rounded-md border border-optional p-8 flex flex-col">
    <h3 class="text-size-heading mb-2">{{ $contract->name }}</h3>

    @if($contract->description)
        <p class="text-gray text-size-small-heading">{{ $contract->description }}</p>
    @endif

    @if($contract->sections->isNotEmpty())
        <ul class="space-y-4 mt-4">
            @foreach($contract->sections as $section)
                <li>
                    <a href="{{ route('contract-sections.index', ['idTemplateSection' => $section->id]) }}" 
                       class="item-option">
                        {{ $section->title }}
                        <div class="icon-round">
                            <x-icons.chevron-r />
                        </div>
                    </a>
                </li>
            @endforeach
        </ul>
    @else
        <p class="text-primary100">Lo sentimos no tiene secciones disponibles.</p>
    @endif
</div>