@extends('layouts.app')

@section('mobile-title', 'My Work')
@section('mobile-subtitle', 'Drafts and submissions')
@can('create', \App\Models\Report::class)
    @section('mobile-action-url', route('reports.create'))
    @section('mobile-action-icon', 'add')
    @section('mobile-action-label', 'New report')
@endcan

@section('content')
    <div class="mb-6">
        <h1 class="text-3xl font-bold">My Work</h1>
        <p class="mt-1 text-sm text-zinc-600">Drafts, rejected reports, and recent submissions.</p>
    </div>

    @foreach (['Drafts' => $drafts, 'Rejected' => $rejected, 'Recent submissions' => $recentSubmissions] as $heading => $reports)
        <section class="mb-6 rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <h2 class="text-lg font-bold">{{ $heading }}</h2>
            <div class="mt-3 divide-y divide-zinc-100">
                @forelse ($reports as $report)
                    <a href="{{ route('reports.show', $report) }}" class="grid gap-2 py-3 hover:bg-zinc-50 sm:grid-cols-[1fr_auto] sm:items-center">
                        <div>
                            <div class="font-semibold">{{ $report->title }}</div>
                            <div class="text-sm text-zinc-600">{{ $report->reference_number }} · {{ $report->project->name }}</div>
                        </div>
                        @include('partials.status-badge', ['status' => $report->status])
                    </a>
                @empty
                    <div class="py-4 text-sm text-zinc-600">Nothing here.</div>
                @endforelse
            </div>
        </section>
    @endforeach
@endsection