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

{% block title %}Login - Allure{% endblock %}

{% block extra_css %}{% endblock %}

{% block content %}
<div class="login-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="login-card">
                    <div class="login-header">
                        <h1 class="login-logo">ALLURE</h1>
                        <p class="login-subtitle">Entre na sua conta</p>
                    </div>
                    
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="form-group">
                            <label for="username" class="form-label">Usuário ou E-mail</label>
                            <div class="input-group">
                                <i class="fas fa-user input-icon"></i>
                                <input type="text" 
                                       class="form-control with-icon" 
                                       id="username" 
                                       name="username" 
                                       placeholder="Digite seu usuário ou e-mail"
                                       required>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="password" class="form-label">Senha</label>
                            <div class="input-group">
                                <i class="fas fa-lock input-icon"></i>
                                <input type="password" 
                                       class="form-control with-icon" 
                                       id="password" 
                                       name="password" 
                                       placeholder="Digite sua senha"
                                       required>
                            </div>
                        </div>
                        
                        <div class="remember-me">
                            <div class="checkbox-wrapper">
                                <input type="checkbox" id="remember" name="remember" class="form-check-input">
                                <label for="remember" class="form-check-label">Lembrar de mim</label>
                            </div>
                            
                            <a href="{% url 'accounts:esqueci_senha' %}" class="forgot-password">
                                Esqueci minha senha
                            </a>
                        </div>
                        
                        <button type="submit" class="btn-login">
                            <i class="fas fa-sign-in-alt me-2"></i>
                            Entrar
                        </button>
                    </form>
                    
                    <div class="login-links">
                        <p class="mb-0">
                            Não tem uma conta? 
                            <a href="{% url 'accounts:cadastro_modelo' %}" class="login-link">
                                Cadastre-se aqui
                            </a>
                        </p>
                    </div>
                </div>
                
                <!-- Register Card -->
                <div class="register-card">
                    <h3 class="register-title">Primeira vez aqui?</h3>
                    <p class="register-text">
                        Cadastre-se como modelo e comece a divulgar seus serviços 
                        na plataforma mais exclusiva do Brasil.
                    </p>
                    <a href="{% url 'accounts:cadastro_modelo' %}" class="btn-register">
                        <i class="fas fa-user-plus me-2"></i>
                        Cadastrar como Modelo
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Form validation
    document.querySelector('form').addEventListener('submit', function(e) {
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value.trim();
        
        if (!username || !password) {
            e.preventDefault();
            alert('Por favor, preencha todos os campos.');
            return false;
        }
        
        // Show loading state
        const submitBtn = document.querySelector('.btn-login');
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Entrando...';
        submitBtn.disabled = true;
    });
    
    // Auto-focus on first input
    document.getElementById('username').focus();
    
    // Enter key navigation
    document.getElementById('username').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            document.getElementById('password').focus();
        }
    });
</script>
{% endblock %}