@extends('layouts.app')

@section('title', 'Tasks')

@section('content')
<div class="page-shell">
    <div class="section-heading">
        <div>
            <p class="eyebrow">Microjobs</p>
            <h1>Complete tasks, unlock income.</h1>
        </div>
        <a href="{{ route('user.dashboard') }}" class="btn-link">Back</a>
    </div>

    <div class="jobs-grid">
        @forelse($jobs as $job)
            <article class="job-card">
                <div class="job-top">
                    <span class="job-tag">{{ ucfirst($job->type ?? 'free') }}</span>
                    <span class="job-reward">৳ {{ number_format($job->reward, 2) }}</span>
                </div>
                <h2>{{ $job->title }}</h2>
                <p>{{ Str::limit($job->description, 110) }}</p>
                <div class="job-footer">
                    <small>{{ $job->remaining_vacancy }} spots left</small>
                    <a href="{{ route('user.jobs.show', $job) }}" class="btn-primary btn-small">Start</a>
                </div>
            </article>
        @empty
            <div class="empty-state">
                <p>No available jobs found. Try again later.</p>
            </div>
        @endforelse
    </div>
</div>
@endsection