{% extends 'base.html' %}

{% block content %}

<div class="w-full h-screen flex items-center justify-center" data-id="1">
    <div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md mx-4 bg-gray-100" data-id="2"
        data-v0-t="card">
        <div class="flex flex-col space-y-1.5 p-6" data-id="3">
            <h1 class="text-3xl font-bold text-center" data-id="4">
                Sign up
            </h1>
            {% if error %}
            <h2 class="text-2xl font-bold text-center text-red-500" data-id="4">
                {{ error }}
            </h2>
            {% endif %}
        </div>
        <form method="POST" class="p-4 space-y-4" data-id="5">
            <div class="space-y-2" data-id="6">
                <label
                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 {% if error %}text-red-500 {% endif %}"
                    for="username" data-id="7">
                    Username
                </label>
                <input
                    class="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-full {% if error %}border-red-500 {% endif %}"
                    name="username" placeholder="Enter your username" required="" data-id="8" type="text">
            </div>
            <div class="space-y-2" data-id="9">
                <label
                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 {% if error %}text-red-500 {% endif %}"
                    for="password" data-id="10">Password</label>
                <input
                    class="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-full {% if error %}border-red-500 {% endif %}"
                    name="password" placeholder="Enter your password" required="" data-id="11" type="password">
            </div>
            <div class="flex justify-between items-center" data-id="12">
                <button
                    class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-6 py-2 bg-blue-500 text-white rounded-md"
                    type="submit" data-id="14">
                    Sign up
                </button>
            </div>
            <hr class="my-4" data-id="15">
            <div class="text-center" data-id="16">
                <p class="text-gray-500" data-id="17">Already have an accont? <a class="underline text-blue-500"
                        data-id="18" href="{{ url_for('auth.login') }}" rel="ugc">Login</a>
                </p>
            </div>
        </form>
    </div>
</div>

{% endblock %}