{% extends 'layout.twig' %}

{% block header %}
    <div class="action-links">
        <a href="/" aria-label="Return to home">← Home</a>
        <a href="/login" aria-label="Login">Login</a>
        <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark/light mode">
            <svg class="theme-icon theme-icon-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
            <svg class="theme-icon theme-icon-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
        </button>
    </div>
{% endblock %}

{% block body %}
<div id="register" class="auth-container">
    <div class="auth-card">
        <h1>Create Account</h1>
        <p class="auth-subtitle">Sign up to unlock email forwarding and inbox locking</p>

        {% if errorMessage %}
            <div class="unlock-error">
                {{ errorMessage }}
            </div>
        {% endif %}

        {% if successMessage %}
            <div class="success-message">
                {{ successMessage }}
            </div>
        {% endif %}

        <form method="POST" action="/register">
            <fieldset>
                <label for="username">Username</label>
                <input 
                    type="text" 
                    id="username" 
                    name="username" 
                    placeholder="3-20 characters, alphanumeric and underscore"
                    required
                    minlength="3"
                    maxlength="20"
                    pattern="[a-zA-Z0-9_]+"
                    autocomplete="username"
                >
                <small>Only letters, numbers, and underscores allowed</small>

                <label for="password">Password</label>
                <input 
                    type="password" 
                    id="password" 
                    name="password" 
                    placeholder="Min 8 characters"
                    required
                    minlength="8"
                    autocomplete="new-password"
                >
                <small>Must contain uppercase, lowercase, and number</small>

                <label for="confirmPassword">Confirm Password</label>
                <input 
                    type="password" 
                    id="confirmPassword" 
                    name="confirmPassword" 
                    placeholder="Re-enter your password"
                    required
                    minlength="8"
                    autocomplete="new-password"
                >

                <div class="auth-actions">
                    <button class="button button-primary" type="submit">Create Account</button>
                </div>
            </fieldset>
        </form>

        <div class="auth-footer">
            <p>Already have an account? <a href="/login">Login here</a></p>
        </div>
    </div>

    <div class="auth-features">
        <h3>Why Register?</h3>
        <ul>
            <li>✓ Forward emails to your real address</li>
            <li>✓ Lock up to 5 inboxes with passwords</li>
            <li>✓ Manage multiple verified forwarding emails</li>
            <li>✓ Access your locked inboxes from anywhere</li>
        </ul>
    </div>
</div>
{% endblock %}