{{ define "login" }}
<div class="flex min-h-screen items-center justify-center bg-base-200">
    <div class="card w-full max-w-sm bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title justify-center mb-6">Login</h2>
            <form id="loginForm" class="space-y-4">
                <div class="form-control">
                    <label class="label" for="username">
                        <span class="label-text">Username</span>
                    </label>
                    <input type="text" class="input input-bordered w-full" id="username" name="username" required>
                </div>
                <div class="form-control">
                    <label class="label" for="password">
                        <span class="label-text">Password</span>
                    </label>
                    <input type="password" class="input input-bordered w-full" id="password" name="password" required>
                </div>
                <div class="form-control mt-6">
                    <button type="submit" class="btn btn-primary w-full">Login</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.getElementById('loginForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        let loginBtn = document.querySelector('#loginForm button[type="submit"]');

        const formData = {
            username: document.getElementById('username').value,
            password: document.getElementById('password').value
        };

        try {
            const response = await fetcher('/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            });

            if (response.ok) {
                window.decypharrUtils.createToast('Login successful! Redirecting...', 'success');

                // Redirect after a short delay
                setTimeout(() => {
                    window.location.href = window.urlBase || '/';
                }, 1000);
            } else {
                const errorText = await response.text();
                throw new Error(errorText || 'Invalid credentials');
            }
        } catch (error) {
            console.error('Login error:', error);
            window.decypharrUtils.createToast(error.message || 'Login failed. Please try again.', 'error');
        } finally {
            window.decypharrUtils.setButtonLoading(loginBtn, false);
        }
    });
</script>
{{ end }}