@extends('layouts.app')

@section('title', 'Login - ' . config('app.name'))

@section('content')
    <div class="min-h-[calc(100vh-200px)] flex items-center justify-center py-8 sm:py-12 px-4 sm:px-6" style="">
        <div class="w-full max-w-md">
            <div class="rounded-2xl sm:rounded-3xl p-6 sm:p-8 md:p-10 border transition-colors" style="background-color: #FFFFFF; border-color: var(--sn-divider); box-shadow: var(--sn-card-shadow);">
                @include('pages.auth.partials.login-form')
            </div>
        </div>
    </div>

    <style>
        .sn-link:hover { color: var(--sn-gold) !important; }
        .sn-input::placeholder { color: var(--sn-text-muted); opacity: 0.8; }
        html.dark .sn-input { background-color: #111827 !important; border-color: rgba(107,63,160,0.25) !important; color: #f3f4f6; }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.auth-login-toggle-password').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    var pid = this.getAttribute('data-password-id') || 'password';
                    var eid = this.getAttribute('data-eye-id') || 'eye-icon';
                    var input = document.getElementById(pid);
                    var icon = document.getElementById(eid);
                    if (!input || !icon) return;
                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.classList.replace('ri-eye-off-line', 'ri-eye-line');
                    } else {
                        input.type = 'password';
                        icon.classList.replace('ri-eye-line', 'ri-eye-off-line');
                    }
                });
            });
        });
    </script>
@endsection