@props(['job'])

<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow duration-200">
    <div class="flex justify-between items-start mb-3">
        <div class="flex-1">
            <h3 class="text-lg font-semibold text-gray-900 mb-1">
                <a href="{{ route('jobs.show', $job) }}" class="hover:text-emerald-600">
                    {{ $job->title }}
                </a>
            </h3>
            <p class="text-gray-700 font-medium">{{ $job->company }}</p>
        </div>
        @if($job->remote_allowed)
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">
            Remote
        </span>
        @endif
    </div>

    <div class="flex flex-wrap gap-3 text-sm text-gray-600 mb-4">
        @if($job->location)
        <div class="flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
            {{ $job->location }}
        </div>
        @endif

        @if($job->job_type)
        <div class="flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
            </svg>
            {{ ucfirst(str_replace('_', ' ', $job->job_type)) }}
        </div>
        @endif

        @if($job->experience_level)
        <div class="flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
            </svg>
            {{ ucfirst(str_replace('_', ' ', $job->experience_level)) }}
        </div>
        @endif
    </div>

    @if($job->salary_min || $job->salary_max)
    <div class="mb-4">
        <span class="text-sm font-semibold text-emerald-600">
            @if($job->salary_min && $job->salary_max)
                {{ $job->salary_currency ?? '$' }}{{ number_format($job->salary_min) }} - {{ $job->salary_currency ?? '$' }}{{ number_format($job->salary_max) }}
            @elseif($job->salary_min)
                {{ $job->salary_currency ?? '$' }}{{ number_format($job->salary_min) }}+
            @elseif($job->salary_max)
                Up to {{ $job->salary_currency ?? '$' }}{{ number_format($job->salary_max) }}
            @endif
        </span>
    </div>
    @endif

    @if($job->description)
    <p class="text-gray-600 text-sm mb-4 line-clamp-2">
        {{ Str::limit(strip_tags($job->description), 150) }}
    </p>
    @endif

    <div class="flex justify-between items-center pt-4 border-t border-gray-100">
        <span class="text-xs text-gray-500">
            Posted {{ $job->posted_at ? $job->posted_at->diffForHumans() : $job->created_at->diffForHumans() }}
        </span>
        <a href="{{ route('jobs.show', $job) }}"
           class="inline-flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-medium rounded-md transition-colors duration-200">
            View Details
            <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
        </a>
    </div>
</div>