@extends('layouts.auth')

@section('content')
<div class="container mx-auto mt-10 max-w-lg p-6 bg-white rounded-lg shadow-md">
    <div class="text-center">
        <h2 class="text-2xl font-bold text-gray-800">Facebook Connection Failed</h2>

        <p class="mt-2 text-gray-600">An error occurred while attempting to connect your Facebook account. Please try again.</p>

        <div class="mt-4 flex justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"/>
                <path d="M12 8v4"/>
                <path d="M12 16h0"/>
            </svg>
        </div>

        <div class="mt-6 flex flex-col sm:flex-row justify-center gap-4">
            <a href="{{ route('facebook.connect') }}"
               class="flex items-center justify-center gap-2 px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-md">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.293 7.293a1 1 0 0 1 0 1.414L11 15.586l-3.293-3.293a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0z"/>
                </svg>
                <span>Try Again</span>
            </a>
        </div>

        @isset($errorDetails)
            <div class="mt-4 p-4 bg-red-100 text-red-700 rounded-md border border-red-400">
                <p class="text-sm">{{ $errorDetails }}</p>
            </div>
        @endisset
    </div>
</div>
@endsection