<!DOCTYPE html>
@php($pageLanguageDirection = ($activeLanguage ?? null)?->direction ?? 'ltr')
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ $pageLanguageDirection }}" class="density-comfortable container-fluid {{ $pageLanguageDirection === 'rtl' ? 'dir-rtl' : 'dir-ltr' }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="theme-color" content="#ffffff">

    <title>@yield('title', __('ui.sign_in')) — {{ config('app.name', 'Microfinance') }}</title>

    <link rel="icon" href="{{ asset('favicon.ico') }}">
    <link rel="preload" href="{{ asset('assets/zenith/media/569ce4b8f30dc480-s.p.woff2') }}" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="{{ asset('assets/zenith/media/93f479601ee12b01-s.p.woff2') }}" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="{{ asset('assets/zenith/css/fonts.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/zenith/css/theme.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/microfinance/app.css') }}">
</head>
<body class="__variable_489c90 __variable_508d3e antialiased">
    <div class="mf-auth-shell">
        <aside class="mf-auth-brand-panel">
            <div class="mf-auth-brand-inner">
                <a href="{{ route('home') }}" class="inline-flex items-center gap-3">
                    <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4"><path d="M3 21h18"/><path d="M6 21V7l6-4 6 4v14"/><path d="M9 10h6M9 14h6M9 18h6"/></svg>
                    </span>
                    <span>
                        <span class="block text-sm font-semibold tracking-tight text-foreground">{{ __('ui.microfinance') }}</span>
                        <span class="block text-[10px] font-medium uppercase tracking-widest text-muted-foreground">{{ __('ui.management_system') }}</span>
                    </span>
                </a>

                <div class="mf-auth-brand-copy">
                    <span class="mf-badge mf-badge-muted">{{ __('ui.secure_workspace') }}</span>
                    <h1>{{ __('ui.auth_headline') }}</h1>
                    <p>{{ __('ui.auth_description') }}</p>
                </div>

                <div class="mf-auth-brand-footer">
                    <span>{{ __('ui.protected_session_access') }}</span>
                    <span>•</span>
                    <span>{{ now()->format('Y') }}</span>
                </div>
            </div>
        </aside>

        <main class="mf-auth-main">
            @if(($availableLanguages ?? collect())->count() > 1)
                <form method="POST" action="{{ route('locale.switch') }}" style="position:absolute;top:20px;right:64px;z-index:20;">
                    @csrf
                    <label class="sr-only" for="guest-locale">{{ __('ui.language') }}</label>
                    <select id="guest-locale" name="locale" class="mf-input h-9 min-w-24 py-0 text-xs" onchange="this.form.submit()" aria-label="{{ __('ui.language') }}">
                        @foreach($availableLanguages as $language)
                            <option value="{{ $language->code }}" @selected(app()->getLocale() === $language->code)>{{ $language->native_name ?: $language->name }}</option>
                        @endforeach
                    </select>
                </form>
            @endif

            <button type="button" data-theme-toggle class="mf-btn mf-icon-btn mf-auth-theme" aria-label="{{ __('ui.toggle_theme') }}">
                <svg data-moon viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8Z"/></svg>
                <svg data-sun viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="hidden"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
            </button>

            <div class="mf-auth-form-wrap">
                @if (session('status'))
                    <div class="mb-5 rounded-md border border-success/20 bg-success/10 px-4 py-3 text-sm text-success">{{ session('status') }}</div>
                @endif

                @yield('content')
            </div>
        </main>
    </div>

    <script src="{{ asset('assets/microfinance/app.js') }}" defer></script>
</body>
</html>
