<x-layouts.auth-layout>
    <div class="flex flex-col">
        <h2 class="text-size-subtitle font-semibold mb-8">
            Bienvenido <span class="bg-secondary">{{ auth()->user()->name }}</span>
        </h2>
        @if(auth()->user()->hasAnyRole(['admin', 'editor']))
            <h3 class="text-size-heading">Aquí puedes editar las secciones de los contratos.</h3>
            <div class="max-w-[920px] mt-8">
                @if($contracts->isNotEmpty())
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
                        @foreach($contracts as $contract)
                            <x-cards.contract-card :contract="$contract" />
                        @endforeach
                    </div>
                @else
                    <h3 class="text-size-heading">
                        <span class="bg-primary100 text-white">
                            Lo sentimos no hay contratos disponibles.
                        </span>
                    </h3>
                @endif
            </div>
        @endif
    </div>
</x-layouts.auth-layout>