{% extends "base.html" %}
{% block title %}Register - Agent Wasp{% endblock %}
{% block body %}
<div class="flex items-center justify-center min-h-[85vh]">
    <div class="card bg-base-100 w-full max-w-3xl auth-card wasp-accent rounded-2xl overflow-hidden">
        <div class="flex flex-col md:flex-row">
            <!-- Left: Logo (bee only) -->
            <div class="md:w-1/2 bg-base-200 flex flex-col items-center justify-center p-10 gap-4">
                <img src="/static/favicon.png" alt="Agent Wasp" class="w-32 h-32 drop-shadow-lg">
                <p class="text-base-content/40 text-sm text-center mt-2">Autonomous AI Agent Platform</p>
            </div>
            <!-- Right: Register Form -->
            <div class="md:w-1/2 p-8 flex flex-col justify-center">
                <h2 class="text-2xl font-bold mb-1">Create Admin Account</h2>
                <p class="text-base-content/50 text-sm mb-6">Set up your Agent Wasp instance</p>
                {% if error %}
                <div class="alert alert-error shadow-lg mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-5 w-5" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    <span>{{ error }}</span>
                </div>
                {% endif %}
                <form method="post" action="/register" class="space-y-4">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <div class="form-control">
                        <label class="label"><span class="label-text font-medium">Username</span></label>
                        <input type="text" name="username" placeholder="admin" class="input input-bordered input-primary focus:input-primary w-full" required autofocus minlength="3">
                        <label class="label"><span class="label-text-alt text-base-content/40">Minimum 3 characters</span></label>
                    </div>
                    <div class="form-control">
                        <label class="label"><span class="label-text font-medium">Password</span></label>
                        <input type="password" name="password" placeholder="********" class="input input-bordered input-primary focus:input-primary w-full" required minlength="8">
                        <label class="label"><span class="label-text-alt text-base-content/40">Minimum 8 characters</span></label>
                    </div>
                    <div class="form-control mt-2">
                        <button type="submit" class="btn btn-primary btn-glow w-full">Create Account</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<footer class="footer footer-center p-4 text-base-content/50">
    <div class="flex items-center gap-2 justify-center">
        <span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
        <p>Agent Wasp</p>
    </div>
</footer>
{% endblock %}