{% extends "base.html" %}

{% block title %}Register - OpenRouter Monitor{% endblock %}

{% block content %}
<article class="grid">
    <div>
        <h1>Create Account</h1>
        <p>Register to start monitoring your OpenRouter API keys.</p>
    </div>
    <div>
        <form action="/register" method="POST" hx-post="/register" hx-swap="outerHTML" hx-target="this">
            {% if error %}
            <div class="alert alert-danger" role="alert">
                {{ error }}
            </div>
            {% endif %}
            
            <label for="email">
                Email
                <input type="email" id="email" name="email" placeholder="your@email.com" required>
            </label>
            
            <label for="password">
                Password
                <input 
                    type="password" 
                    id="password" 
                    name="password" 
                    placeholder="Password" 
                    required 
                    minlength="8"
                    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$"
                    title="Password must contain at least one lowercase letter, one uppercase letter, and one number"
                >
                <small>Minimum 8 characters with uppercase, lowercase, and number</small>
            </label>
            
            <label for="password_confirm">
                Confirm Password
                <input type="password" id="password_confirm" name="password_confirm" placeholder="Confirm password" required>
            </label>
            
            <button type="submit">Register</button>
        </form>
        
        <p>Already have an account? <a href="/login">Login here</a>.</p>
    </div>
</article>

<script>
// Client-side password match validation
document.getElementById('password_confirm').addEventListener('input', function() {
    const password = document.getElementById('password').value;
    const confirm = this.value;
    
    if (password !== confirm) {
        this.setCustomValidity('Passwords do not match');
    } else {
        this.setCustomValidity('');
    }
});
</script>
{% endblock %}