{% extends 'layout.twig' %}

{% block header %}
    <div class="action-links">
        <a href="/" aria-label="Return to home">Home</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="auth-unified" class="auth-unified-container">
    <div class="auth-intro">
        <h1 class="page-title">Account Access</h1>
        <p class="auth-subtitle">Login to an existing account or create a new one</p>
        {% if errorMessage %}
            <div class="alert alert-error">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline;vertical-align:middle;margin-right:0.5rem">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="15" y1="9" x2="9" y2="15"></line>
                    <line x1="9" y1="9" x2="15" y2="15"></line>
                </svg>
                {{ errorMessage }}
            </div>
        {% endif %}
        {% if successMessage %}
            <div class="alert alert-success">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline;vertical-align:middle;margin-right:0.5rem">
                    <path d="M20 6L9 17l-5-5"></path>
                </svg>
                {{ successMessage }}
            </div>
        {% endif %}
    </div>

    <div class="auth-forms-grid">
        <!-- Register Form -->
        <div class="auth-card frosted-glass">
            <h2>Register</h2>
            
            <form method="POST" action="/register">
                <fieldset>
                    <label for="register-username">Username</label>
                    <input 
                        type="text" 
                        id="register-username" 
                        name="username" 
                        placeholder="3-20 characters"
                        required
                        minlength="3"
                        maxlength="20"
                        pattern="[a-zA-Z0-9_]+"
                        autocomplete="username"
                    >
                    <small>Letters, numbers, underscore only</small>

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

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

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

        <!-- Login Form -->
        <div class="auth-card frosted-glass">
            <h2>Login</h2>
            
            <form method="POST" action="/login">
                <fieldset>
                    <label for="login-username">Username</label>
                    <input 
                        type="text" 
                        id="login-username" 
                        name="username" 
                        placeholder="Your username"
                        required
                        autocomplete="username"
                    >

                    <label for="login-password">Password</label>
                    <input 
                        type="password" 
                        id="login-password" 
                        name="password" 
                        placeholder="Your password"
                        required
                        autocomplete="current-password"
                    >

                    <button class="button button-primary" type="submit">Login</button>
                </fieldset>
            </form>
        </div>
    </div>

    <div class="auth-features-unified">
        <h3>Account Benefits</h3>
        <div class="features-grid">
            <div class="feature-item">Forward emails to verified addresses</div>
            <div class="feature-item">Lock up to 5 inboxes to your account</div>
            <div class="feature-item">Manage multiple forwarding destinations</div>
            <div class="feature-item">Access your locked inboxes anywhere</div>
        </div>
        <p class="guest-note">No account needed for basic temporary inboxes • <a href="/">Browse as guest</a></p>
    </div>
</div>
{% endblock %}