{% extends 'base.html' %}
{% load static %}

{% block title %}Login - NetCop AI Agent{% endblock %}

{% block content %}
<div class="card" style="max-width: 400px; margin: 2rem auto;">
    <div class="card-header">
        <h2 class="card-title">Sign In</h2>
    </div>
    
    <form id="loginForm" class="form">
        {% csrf_token %}
        <div class="form-group">
            <label for="email" class="form-label">Email</label>
            <input 
                type="email" 
                id="email" 
                name="email" 
                class="form-input" 
                required
                placeholder="your@email.com"
            >
        </div>
        
        <div class="form-group">
            <label for="password" class="form-label">Password</label>
            <input 
                type="password" 
                id="password" 
                name="password" 
                class="form-input" 
                required
                placeholder="Enter your password"
            >
        </div>
        
        <button type="submit" class="btn btn-primary btn-full">
            Sign In
        </button>
    </form>
    
    <div style="text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200);">
        <p style="color: var(--gray-600); margin-bottom: 0.5rem;">Don't have an account?</p>
        <a href="/register/" class="btn btn-secondary">Create Account</a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    handleFormSubmit('#loginForm', async (data) => {
        const result = await login(data.email, data.password);
        showMessage('Login successful! Redirecting...', 'success');
        setTimeout(() => {
            window.location.href = '/dashboard/';
        }, 1000);
    });
});
</script>
{% endblock %}