@extends('layouts.jobs')

@push('styles')
    <style>
        .form-container {
            padding: 2.5rem;
            max-width: 900px;
            margin: 4rem auto;
            text-align: center;
        }

        .status-icon-error {
            width: 64px;
            height: 64px;
            background-color: #fef2f2;
            color: #dc2626;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
        }

        .message-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 1rem;
        }

        .message-body {
            color: #4b5563;
            line-height: 1.6;
            font-size: 1rem;
        }
    </style>
@endpush

@section('breadcrumb')
    <a href="{{ route('jobs.index') }}" class="text-blue-600 hover:underline text-sm">{{ __('messages.job_openings') }}</a>
    <span class="breadcrumb-separator">›</span>
    <span class="text-gray-500 text-sm">{{ __('Link Expired') }}</span>
@endsection

@section('header')
    <h1 class="text-3xl font-bold text-white mb-3">Link Status</h1>
@endsection

@section('content')
    <div class="form-container">
        <div class="status-icon-error">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-8 h-8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
            </svg>
        </div>

        <h2 class="message-title">Invalid or Expired Link</h2>
        
        <p class="message-body">
            The link you are trying to access is either invalid or has expired. This often happens if the link has already been used or the time limit for the request has passed.
        </p>
    </div>
@endsection