{% extends "base.html" %}

{% block title %}Register{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-card reveal">
        <div class="auth-header">
            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 1rem;">📝</div>
            <h1>Create Account</h1>
            <p>Join NeuroGuard to start detecting fake news</p>
        </div>

        <form class="auth-form" method="POST" action="{{ url_for('auth.register') }}">
            <div class="form-group">
                <label>Full Name</label>
                <input type="text" name="full_name" placeholder="Your full name" autocomplete="name">
            </div>

            <div class="form-group">
                <label>Username</label>
                <input type="text" name="username" placeholder="Choose a username" required autocomplete="username">
            </div>

            <div class="form-group">
                <label>Email</label>
                <input type="email" name="email" placeholder="your@email.com" required autocomplete="email">
            </div>

            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" placeholder="Min 6 characters" required autocomplete="new-password">
            </div>

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

        <div class="auth-footer">
            <p>Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a></p>
        </div>
    </div>
</div>
{% endblock %}