@extends('layouts.guest')
@section('title', __('Session expired'))

@section('content')
<div class="card-pad text-center" x-data="{secs: 5}" x-init="
    setInterval(() => { if (secs > 0) secs--; else window.location.href = document.referrer || '{{ url('/') }}'; }, 1000);
">
    <div class="mx-auto w-14 h-14 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mb-4">
        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
    </div>
    <h1 class="text-2xl font-bold tracking-tight mb-2">{{ __('Your session expired') }}</h1>
    <p class="text-sm text-slate-500 dark:text-slate-400 mb-6">
        {{ __('For security, the form expired. We will refresh in') }}
        <span class="font-mono text-brand-600" x-text="secs"></span> {{ __('seconds') }}.
    </p>
    <div class="flex gap-2 justify-center">
        <button onclick="history.back()" class="btn-secondary">{{ __('Go back') }}</button>
        <a href="{{ url()->previous() ?: url('/') }}" class="btn-primary">{{ __('Refresh now') }}</a>
    </div>
</div>
@endsection