@extends('layouts.main-app')

@section('title', 'Job Opportunities')

@section('content')

    @include('layouts.navbar')

    <div class="relative h-[20rem]">
        <div class="relative z-50 py-20 text-center">
            <h1 class="text-4xl font-bold text-black">JOB OPPORTUNITIES </h1>
        </div>
    </div>

    <div data-aos="fade-up" data-aos-duration="1000" class="container max-w-screen-xl mx-auto text-center">
        <div class="flex justify-center">
            <h1 class="text-4xl font-bold">{{ $category->name }}</h1>
        </div>
        <div class="grid grid-cols-1 py-12 space-y-4 md:grid-cols-2 md:space-y-0">
            @foreach ($career->where('category_id', $category->id) as $careers)
                <ul class="space-y-4">
                    <li>
                        <a href="{{ url('job_description', $careers->id) }}" class="flex space-x-8">
                            <p class="font-semibold">{{ $careers->position }}</p>
                            @if ($careers->is_new)
                                <button class="relative px-4 font-bold text-blue-800 bg-opacity-50 rounded-full">
                                    <span class="relative z-10 font-bold">New</span>
                                    <div class="absolute inset-0 bg-blue-500 rounded-full opacity-20"></div>
                                </button>
                            @endif
                        </a>
                    </li>
                </ul>
            @endforeach
        </div>
    </div>


    @include('layouts.footer')


@endsection