@extends('layouts.applicant')

@section('title', 'My applications')

@section('content')

    <h1 class="mb-6 font-display text-3xl tracking-tight text-slate-900">My applications</h1>

    @if ($applications->isEmpty())
        <x-empty-state title="You have not started an application yet"
                       description="Begin your application to a KCU programme — you can save and return at any time.">
            <x-button :href="route('applicant.dashboard')">Go to dashboard</x-button>
        </x-empty-state>
    @else
        <ul class="space-y-4">
            @foreach ($applications as $application)
                <li>
                    <a href="{{ route('applicant.applications.show', $application) }}"
                       class="block rounded-xl border border-slate-200 bg-white p-6 transition hover:border-brand-300 hover:shadow-md">
                        <div class="flex flex-wrap items-start justify-between gap-4">
                            <div class="min-w-0">
                                <p class="font-mono text-sm font-semibold text-slate-900">
                                    {{ $application->application_number }}
                                </p>
                                <p class="mt-1.5 text-sm text-slate-700">
                                    {{ $application->programme()?->name ?? 'Programme not selected' }}
                                </p>
                                <p class="mt-0.5 text-xs text-slate-500">{{ $application->intake->name }}</p>
                            </div>

                            <x-status-badge :status="$application->status" applicant-view />
                        </div>

                        <p class="mt-4 border-t border-slate-100 pt-3 text-xs text-slate-500">
                            @if ($application->submitted_at)
                                Submitted {{ $application->submitted_at->format('j F Y') }}
                            @else
                                Started {{ $application->created_at->format('j F Y') }} &middot; not yet submitted
                            @endif
                        </p>
                    </a>
                </li>
            @endforeach
        </ul>
    @endif

@endsection
