{% extends "base.html" %}
{% block title %}Register - MemoryBot{% endblock %}
{% block body %}
<div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg-primary);padding:16px;">
    <div style="max-width:440px;width:100%;">
        <div class="text-center" style="margin-bottom:32px;">
            <div class="avatar avatar-xl" style="background:var(--gradient-primary);margin:0 auto 20px;box-shadow:0 0 40px rgba(139,92,246,0.3);">
                <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/>
                </svg>
            </div>
            <h1 style="font-size:32px;font-weight:800;color:var(--text-primary);margin:0;">Create Account</h1>
            <p style="margin-top:8px;color:var(--text-secondary);font-size:15px;">Join MemoryBot to preserve memories</p>
        </div>

        <div class="card" style="padding:32px;">
            {% if error %}
            <div class="alert-error" style="margin-bottom:16px;text-align:center;">{{ error }}</div>
            {% endif %}

            <form method="POST" action="/auth/register" style="display:flex;flex-direction:column;gap:16px;">
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Full Name</label>
                    <input type="text" name="name" required class="input-field" placeholder="John Smith">
                </div>
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Email</label>
                    <input type="email" name="email" required class="input-field" placeholder="you@example.com">
                </div>
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;">Password</label>
                    <input type="password" name="password" required minlength="6" class="input-field" placeholder="At least 6 characters">
                </div>
                <button type="submit" class="btn-primary" style="width:100%;justify-content:center;padding:14px;font-size:15px;margin-top:8px;">
                    Create Account
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </button>
            </form>

            <div class="divider" style="margin:24px 0;"></div>

            <p style="text-align:center;font-size:14px;color:var(--text-secondary);">
                Already have an account?
                <a href="/auth/login" style="color:var(--accent-purple);text-decoration:none;font-weight:600;">Sign in</a>
            </p>
        </div>
    </div>
</div>
{% endblock %}