{% extends "base.html" %}
{% block content %}
<div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold text-center mb-4">Sign Up</h1>
    <form method="POST" action="{{ url_for('auth.signup') }}" novalidate>
        {{ form.hidden_tag() }}

        <!-- Name Field -->
        <div class="mb-4">
            {{ form.name.label(class="block text-sm font-medium text-gray-700") }}
            {{ form.name(class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500") }}
            {% for error in form.name.errors %}
            <p class="text-sm text-red-600 mt-1">{{ error }}</p>
            {% endfor %}
        </div>

        <!-- Email Field -->
        <div class="mb-4">
            {{ form.email.label(class="block text-sm font-medium text-gray-700") }}
            {{ form.email(class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500") }}
            {% for error in form.email.errors %}
            <p class="text-sm text-red-600 mt-1">{{ error }}</p>
            {% endfor %}
        </div>

        <!-- Password Field -->
        <div class="mb-4">
            {{ form.password.label(class="block text-sm font-medium text-gray-700") }}
            {{ form.password(class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500") }}
            {% for error in form.password.errors %}
            <p class="text-sm text-red-600 mt-1">{{ error }}</p>
            {% endfor %}
        </div>

        <!-- Confirm Password Field -->
        <div class="mb-4">
            {{ form.confirm_password.label(class="block text-sm font-medium text-gray-700") }}
            {{ form.confirm_password(class="w-full p-2 border rounded focus:outline-none focus:ring-2
            focus:ring-blue-500") }}
            {% for error in form.confirm_password.errors %}
            <p class="text-sm text-red-600 mt-1">{{ error }}</p>
            {% endfor %}
        </div>

        <!-- Submit Button -->
        <div>
            {{ form.submit(class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700") }}
        </div>
    </form>
</div>
{% endblock %}