@php
    $locale = app()->getLocale();
    $dir = $locale === 'ar' ? 'rtl' : 'ltr';
    $fontFamily = $locale === 'ar' ? "'Tajawal', sans-serif" : "'Segoe UI', sans-serif";
@endphp

<!DOCTYPE html>
<html lang="{{ $locale }}" dir="{{ $dir }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ __('login_title') }} | Creative Projects Platform</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;700&display=swap" rel="stylesheet">

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Custom CSS -->
    <link href="{{ asset('css/auth.css') }}" rel="stylesheet">
    
    <style>
        body {
            font-family: {!! $fontFamily !!};
        }
    </style>
</head>
<body>

    <!-- Background Graphics -->
    <div class="bg-graphic graphic-1"></div>
    <div class="bg-graphic graphic-2"></div>
    <div class="mesh-overlay"></div>

    <!-- Login Card -->
    <div class="login-card">
        
        <!-- Small Language Switcher -->
        <div class="lang-switcher-sm">
            <a href="{{ route('lang.switch', 'en') }}" class="btn btn-link lang-link {{ $locale === 'en' ? 'active' : '' }}" style="text-decoration: none; border: none; background: none;">
                EN
            </a>
            <span style="color: #ccc; align-self: center;">|</span>
            <a href="{{ route('lang.switch', 'ar') }}" class="btn btn-link lang-link {{ $locale === 'ar' ? 'active' : '' }}" style="text-decoration: none; border: none; background: none;">
                AR
            </a>
        </div>

        <h1 class="login-title">{{ __('login_title') }}</h1>

        <form method="POST" action="{{ route('login') }}">
            @csrf

            <!-- Username Field -->
            <div class="form-group">
                <input id="username" type="text" class="form-control @error('username') is-invalid @enderror" name="username" value="{{ old('username') }}" required autocomplete="username" autofocus placeholder=" ">
                <label for="username" class="form-label">{{ __('username_label') }}</label>

                @error('username')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <!-- Password Field -->
            <div class="form-group">
                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" placeholder=" ">
                <label for="password" class="form-label">{{ __('password_label') }}</label>

                @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <button type="submit" class="btn-login">
                {{ __('login_button') }}
            </button>
        </form>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
