@if (now() <= $page->starts_at)
    <div id="countdown" class="container lg:max-w-screen-lg mx-auto bg-white" wire:poll.5000ms="pollTheDate">
        <div class="p-4 pt-8 pb-8">
            <div class="grid grid-cols-5 md:w-1/2 mx-auto">
                <div class="col-span-1">
                    <div class="flex items-center justify-center">
                        <div>
                            <span class="font-bold text-techcapital-gray-dark rounded-full border-2 lg:border-4 border-techcapital-red w-12 h-12 lg:w-16 lg:h-16  flex items-center justify-center">{{ $countdown['m'] }}</span>
                            <span class="block text-xxs lg:text-xs md:text-techcapital-gray-dark text-center">Months</span>
                        </div>
                    </div>
                </div>
                <div class="col-span-1">
                    <div class="flex items-center justify-center">
                        <div>
                            <span class="font-bold text-techcapital-gray-dark rounded-full  border-2 lg:border-4 border-techcapital-red w-12 h-12 lg:w-16 lg:h-16  flex items-center justify-center">{{ $countdown['d'] }}</span>
                            <span class="block text-xxs lg:text-xs text-techcapital-gray-dark text-center">Days</span>
                        </div>
                    </div>
                </div>
                <div class="col-span-1">
                    <div class="flex items-center justify-center">
                        <div>
                            <span class="font-bold text-techcapital-gray-dark rounded-full border-2 lg:border-4 border-techcapital-red w-12 h-12 lg:w-16 lg:h-16  flex items-center justify-center">{{ $countdown['h'] }}</span>
                            <span class="block text-xxs lg:text-xs text-techcapital-gray-dark text-center">Hours</span>
                        </div>
                    </div>
                </div>
                <div class="col-span-1">
                    <div class="flex items-center justify-center">
                        <div>
                            <span class="font-bold text-techcapital-gray-dark rounded-full border-2 lg:border-4 border-techcapital-red w-12 h-12 lg:w-16 lg:h-16  flex items-center justify-center">{{ $countdown['i'] }}</span>
                            <span class="block text-xxs lg:text-xs text-techcapital-gray-dark text-center">Minutes</span>
                        </div>
                    </div>
                </div>
                <div class="col-span-1">
                    <div class="flex items-center justify-center">
                        <div>
                            <span class="font-bold text-techcapital-gray-dark rounded-full border-2 lg:border-4 border-techcapital-red w-12 h-12 lg:w-16 lg:h-16  flex items-center justify-center">{{ $countdown['s'] }}</span>
                            <span class="block text-xxs lg:text-xs text-techcapital-gray-dark text-center">Seconds</span>
                        </div>
                    </div>
                </div>
            </div>
            @if ($page->registration_url)
            <p class="text-center">
                <a href="{{ $page->registration_url }}" class="inline-block p-2 pl-4 pr-4 bg-techcapital-red border border-techcapital-red text-white uppercase font-altgothic">Register Now</a>
            </p>
            @endif
        </div>
    </div>
@endif