@php
    $brand = app(\App\Domain\Shared\Services\BrandingService::class)->forCurrentAcademy();
@endphp
<!DOCTYPE html>
<html dir="rtl" lang="ar" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title ?? 'تسجيل الدخول' }} - {{ $brand->academyName }}</title>
    <meta name="theme-color" content="{{ $brand->themeColor }}">
    @if($brand->faviconUrl)
        <link rel="icon" href="{{ $brand->faviconUrl }}">
    @endif
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family={{ urlencode($brand->fontAr) }}:wght@300;400;500;600;700;800&family={{ urlencode($brand->fontEn) }}:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    <style>
        :root {
{!! $brand->cssVariableBlock() !!}
        }
        body {
            font-family: var(--brand-font-ar), var(--brand-font-en), sans-serif;
        }
        {{-- login_background was collected by the branding screen and read by
             nothing. This is the surface it was always meant for. --}}
        @if($brand->loginBackgroundUrl)
        .login-ground {
            background-image: linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)),
                              url('{{ $brand->loginBackgroundUrl }}');
            background-size: cover;
            background-position: center;
        }
        @endif
    </style>
</head>
<body class="h-full bg-gray-100 login-ground">
    <div class="min-h-full flex items-center justify-center py-6 sm:py-12 px-4 sm:px-6 lg:px-8 safe-top safe-bottom">
        <div class="w-full max-w-md">
            {{ $slot }}
        </div>
    </div>
    @livewireScripts
</body>
</html>
