@if($careers->count() > 0)
    @foreach ($careers as $career)
    <div data-aos="zoom-in"
        data-aos-duration="1500" class="p-4 space-y-4 bg-gray-100 hover:shadow-xl">
        <div class="flex items-start justify-between">
            <div class="space-y-3 relative">
                <div>
                    <div class="bg-[#ae1a1f] rounded bg-opacity-20 text-xs w-fit px-2 py-1 text-[#ae1a1f]">
                        <span class="font-semibold whitespace-nowrap">{{ $career->type }}</span>
                    </div>
                </div>
                <div>
                    <h1 class="text-2xl font-bold">{{ $career->title }}</h1>
                </div>
                <div class="flex flex-wrap items-center gap-2 text-sm">
                    <!--<div>-->
                    <!--    <i class='text-[#ae1a1f] bx bx-map'></i>-->
                    <!--    <span>{{ $career->location }}</span>-->
                    <!--</div>-->
                    <div>
                        <i class='text-[#ae1a1f] bx bx-time'></i>
                        <span>{{ $career->created_at->diffForHumans() }}</span>
                    </div>
                </div>
            </div>
            <div>
                <a href="{{route('careers_details', $career->id)}}">
                    <button class="text-white bg-[#ae1a1f] px-6 text-sm py-2 rounded-l-full rounded-br-full whitespace-nowrap">
                        APPLY NOW
                    </button>
                </a>
            </div>
        </div>
        <div class="line-clamp-2">
            <p class="line-clamp-2">{!! $career->description !!}</p>
        </div>
        <div class="">
            <a href="{{ route('careers_details', $career->id) }}" class="text-sm font-semibold text-[#ae1a1f]">
               Read More
            </a>
        </div>
    </div>
    @endforeach
@else
    <div class="p-8 text-center w-full flex justify-center items-center">
        <h2 class="text-md font-semibold text-gray-600">No careers found</h2>
    </div>
@endif