@php
    $churchName = $profile?->church_name ?? 'Anglican Church St Peter and Paul';
    $churchLocation = $profile?->location ?? 'Mwenge Kijitonyama';
@endphp

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Login · {{ $churchName }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="auth-body auth-body-refined auth-login-body" data-success-message="{{ session('success') }}" data-error-message="{{ session('error') }}">
    <main class="auth-shell auth-shell-refined">
        <section class="auth-visual auth-visual-refined auth-visual-reference" style="--auth-left-image: url('{{ asset('images/auth-left-reference.png') }}')">
            <div class="visually-hidden">
                Serve Faithfully, Manage Effectively. One Faith. One Family. One Mission.
            </div>
        </section>

        <section class="auth-panel auth-panel-refined">
            <div class="auth-card auth-card-refined">
                <div class="auth-card-brand">
                    <div class="auth-church-icon auth-church-emblem">
                        <span>+</span>
                        <i data-lucide="church"></i>
                    </div>
                    <h2>Church Attendance<br>Management System</h2>
                    <div class="auth-gold-rule auth-gold-rule-short mx-auto"></div>
                    <strong>{{ $churchName }}</strong>
                    <span>{{ $churchLocation }}</span>
                    <div class="auth-form-divider"><span></span></div>
                </div>

                @if ($errors->any())
                    <div class="alert alert-danger">
                        {{ $errors->first() }}
                    </div>
                @endif

                <form method="POST" action="{{ route('login.store') }}" class="auth-form">
                    @csrf
                    <div class="input-icon">
                        <i data-lucide="user-round"></i>
                        <input type="text" name="login" value="{{ old('login') }}" class="form-control" placeholder="Email or Username" required autofocus>
                    </div>
                    <div class="input-icon">
                        <i data-lucide="lock-keyhole"></i>
                        <input id="login-password" type="password" name="password" class="form-control" placeholder="Password" required>
                        <button class="password-toggle" type="button" data-password-toggle="#login-password" aria-label="Show password">
                            <i data-lucide="eye"></i>
                        </button>
                    </div>
                    <div class="d-flex justify-content-between align-items-center gap-3">
                        <label class="form-check auth-check">
                            <input class="form-check-input" type="checkbox" name="remember" value="1" checked>
                            <span class="form-check-label">Remember Me</span>
                        </label>
                        <span class="auth-muted-link">Forgot Password?</span>
                    </div>
                    <button class="btn btn-primary w-100 auth-submit" type="submit">
                        <span>Sign In</span>
                        <i data-lucide="arrow-right"></i>
                    </button>
                </form>

                @if ($registrationOpen)
                    <div class="auth-register-cta">
                        <span>Registration window is open</span>
                        <a href="{{ route('register') }}" class="btn btn-outline-primary w-100">
                            <i data-lucide="user-plus"></i>
                            <span>Create Account</span>
                        </a>
                    </div>
                @endif

                <div class="auth-secure-note">
                    <i data-lucide="lock"></i>
                    <span>Secure access for authorized church staff</span>
                </div>
            </div>
        </section>
    </main>
</body>
</html>
