@unless (count($hotJobs) == 0)
<div class="container mx-auto py-10">
    <h3 class="text-3xl text-rose-400 dark:text-rose-200 text-center animate-pulse"><i class="fa fa-fire fa-sm text-orange-500" aria-hidden="true"></i> Hot Jobs</h3>
    <div class="text-right">
        <a href="hot-jobs" class="text-rose-400 dark:text-rose-200 mr-10" wire:navigate>View All ({{ $hotJobs->count() }})</a>
    </div>
    <hr class="py-3 mt-3 dark:opacity-20 ">
    <div class="flex flex-row justify-center flex-wrap">
        @if (isset($banner300x250))
        <div class="flex justify-center pt-5 mx-5">
            <a href="{{ $banner300x250->url }}" target="_blank" rel="noopener noreferrer">
                <img src="{{ Storage::url($banner300x250->image) }}" alt="">
            </a>
        </div>
        @endif
        @foreach ($hotJobs as $job)
        <div class="basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4 w-full rounded-lg pb-5 md:p-5 leading-6">
            {{-- <a href="{{ $job->slug }}-job-{{ $job->id }}" class="" target="_blank"> --}}
            <a href="{{ getJobDetailsUrl($job) }}" class="" target="_blank">
                <div
                    class="bg-white dark:bg-opacity-5 max-w-md border-b-rose-400 border-opacity-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl hover:border-rose-200 hover:border-b-rose-400 hover:-mt-2 border-2 border-rose-200 transition-all duration-500 mx-auto w-full bg-rose-501 h-full">
                    <div class="p-3 md:p-6 py-4">
                        <h3 class="font-medium text-xl text-rose-400 dark:text-rose-200 hover:text-rose-600 capitalize">
                            {{ $job->title }}
                        </h3>
                        <div class="pt-2 capitalize">
                            <span class="font-semibold">
                                {{ $job->company_name }}
                            </span>
                            <br>
                            Exp:
                            @if (isset($job->experience_min))
                            {{ $job->experience_min }} - {{ $job->experience_max }} Year
                            @else
                            <x-unspecified />
                            @endif
                            <br>
                            Industry:
                            {{ getIndustryByIndustryId($job->industry_id) }}
                        </div>
                    </div>
                    <div class="flex justify-start items-center px-6 pb-4">
                        <a href="{{ getLocationSlug($job->city) }}" wire:navigate>
                            <span
                                class="inline-block bg-rose-100 rounded-full px-3 py-1 text-sm text-gray-500 mr-2 mb-2">{{ $job->city }}</span>
                        </a>
                        <a href="{{ getLocationSlug($job->state) }}" wire:navigate>
                            <span
                                class="inline-block bg-rose-100 rounded-full px-3 py-1 text-sm text-gray-500 mr-2 mb-2">{{ $job->state }}</span>
                        </a>
                        @if($job->is_verified)
                        <span class="inline-flex items-center gap-1 bg-green-100 text-green-700 px-2 py-1 rounded-full text-xs font-semibold">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M10 18l-6-3.5V5.5L10 2l6 3.5v9L10 18z" />
                            </svg>
                            Verified
                        </span>
                        @endif

                    </div>
                </div>
            </a>
        </div>
        @endforeach
    </div>
</div>
@endunless