@if(Auth::user()->role == 1 || Auth::user()->role == 2)
    <x-card title="MOU List (Expired within a month)">
        <!-- Table -->
        <div class="p-4">
            <x-table :headers="$headers" :rows="$expiringContracts">
            @scope('cell_end_date', $expiringContracts)
                <span>{{ \Carbon\Carbon::parse($expiringContracts->end_date)->format('d-M-Y') }}</span>
            @endscope
            </x-table>
            <!-- Pagination -->
            <div class="mt-4">
                {{ $expiringContracts->links() }}
            </div>
        </div>
    </x-card>
@else
    <div lazy x-data="weatherWidget('{{ $initialTime }}')" class="relative w-full sm:w-full h-full p-6 bg-gradient-to-r from-[#00D2FF] to-[#3A7BD5] dark:from-[#0A192F] dark:to-[#1B3A6D] rounded-lg shadow-md text-white flex flex-col justify-between">
        <div class="flex justify-between items-end h-full mb-4">
            <div>
                <p x-text="time" class="text-xl font-semibold"></p>
                <p x-text="greeting" class="text-2xl mt-1 font-extralight"></p>
            </div>
            <div class="text-2xl font-bold" wire:poll.1s="updateCurrentTime">{{ $currentTime }}</div>
        </div>
        <div class="absolute top-0 right-8 p-3 overflow-hidden animate-pulse">
            <div class="w-60 h-60 -mt-24 bg-[#FFFFFF4D] rounded-full opacity-40"></div>
        </div>
        <div class="absolute top-0 right-12 p-3 overflow-hidden animate-pulse">
            <div class="w-52 h-52 -mt-20 bg-[#FFFFFF4D] rounded-full opacity-40"></div>
        </div>
        <div class="absolute top-0 right-16 p-3 overflow-hidden animate-pulse">
            <div class="w-44 h-44 -mt-16 bg-[#FCE588] dark:bg-[#F1F1F1] rounded-full opacity-70 shadow-md"></div>
        </div>
    </div>
@endif