@props(['job'])
<div class="relative shadow overflow-hidden rounded-lg mb-5 p-5 hover:bg-green-50 dark:hover:bg-opacity-20 transition-all duration-500 {{ ($job->is_posted_by_admin == 1) ? ' bg-slate-300 bg-opacity-15' : 'bg-white' }}">
        <a href="{{ getJobDetailsUrl($job) }}" class="" target="_blank"
        wire:click.prevent="getJob({{ ($job->id) }})"
        {{-- wire:click.prevent="$set('selectedJob', '{{ $job }}')" --}}
        {{-- wire:click.prevent="console.log('hi')" --}}
        {{-- x-data
        @click.prevent="$wire.set('selectedJob', {{ $job }})" --}}
        {{-- x-data
        @click="{{ $selectedJob = $job->id }}" --}}

        >
{{-- @if($job->is_posted_by_admin == 1) --}}
<!-- ribbon container -->
{{-- <x-badge rounded red md label="Hot Job" /> --}}
    {{-- <div class="absolute right-0 top-0 h-16 w-16">
        <!-- ribbon -->
        <div class="absolute right-[-44px] top-[22px] w-[170px] transform rotate-45 bg-red-700 text-center text-white font-semibold py-1">Hot Job</div>
        <!-- end ribbon -->
      </div> --}}
      <!-- end ribbon container -->
      {{-- @endif --}}
      {{-- <h3><a href="jobs/">{{ $job->title }}</a></h3> --}}
      <div class="flex justify-between space-x-2">
          <h3 class="text-lg text-color2-400 mb-3">{{ $job->title }}
        </h3>

@if($job->is_posted_by_admin == 1)
<div class="flex-shrink-0">
    <x-badge rounded red md outline icon="fire" label="Hot Job" />
</div>
@endif

    </div>
    <div>
                    @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 class="font-medium">{{ $job->company_name }} -
                <span class="">{{ $job->city }}, {{ $job->state }}</span>
            </div>
            <div class="border-y-[1px] border-slate-300 dark:border-opacity-15 my-2">
                {{ $job->salary_from ? 'Salary: Rs. '.$job->salary_from : 'Salary: Undisclosed' }}
                {{ $job->gender ? ' | Gender: '.$job->gender : ' | Gender: Any' }}
                @if (isset($job->experience_min))
                | Exp.: {{ $job->experience_min }} - {{ $job->experience_max ? $job->experience_max : '' }} Year
                @else
                {{-- <x-unspecified /> --}}
                @endif

            </div>
        </a>
        <div class="">
        {{ $job->industry?->name }}
        @empty ($job->job_type_id)
        {{-- <x-unspecified /> --}}
        @else
        | {{ getJobTypeByJobTypeId($job->job_type_id) }}
        @endempty
</div>
        <div class="flex justify-between gap-5">
        <div class="">
            <span class="font-medium">Posted On:</span> {{ Carbon::parse($job->updated_at)->format('d-M-Y'); }}
        </div>
        <div class="flex justify-end gap-5">
            <livewire:candidate.job-favorite-button :job="$job" :wire:key="favorite{{ $job->id }}" :key="'favorite'.$job->id" />
                <livewire:candidate.job-apply-button :job="$job" :wire:key="apply{{ $job->id }}" :key="'apply'.$job->id" />
                </div>
            </div>
</div>