{% extends "_layout.html" %}
{% block content %}
<div class="max-w-md mx-auto mt-12 mb-20">
    <div class="bg-white p-10 rounded-3xl shadow-2xl border border-gray-100 relative overflow-hidden">
        <!-- Decorative background element -->
        <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-primary-400 to-primary-600"></div>

        <h1 class="text-3xl font-extrabold text-center mb-2 text-gray-900">Create Account</h1>
        <p class="text-center text-gray-500 mb-8">Join us to start tracking your health.</p>

        <form method="POST" action="{{ url_for('auth.signup') }}" novalidate>
            {{ form.hidden_tag() }}

            <!-- Username Field -->
            <div class="mb-5">
                {{ form.username.label(class="block text-sm font-semibold text-gray-700 mb-2") }}
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20"
                            fill="currentColor">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                    {{ form.username(class="w-full pl-11 p-3 border border-gray-300 rounded-xl focus:outline-none
                    focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all shadow-sm bg-gray-50
                    focus:bg-white") }}
                </div>
                {% for error in form.username.errors %}
                <p class="text-sm text-red-500 mt-2 font-medium flex items-center">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                            clip-rule="evenodd"></path>
                    </svg>
                    {{ error }}
                </p>
                {% endfor %}
            </div>

            <!-- Password Field -->
            <div class="mb-5">
                {{ form.password.label(class="block text-sm font-semibold text-gray-700 mb-2") }}
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20"
                            fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                    {{ form.password(class="w-full pl-11 p-3 border border-gray-300 rounded-xl focus:outline-none
                    focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all shadow-sm bg-gray-50
                    focus:bg-white") }}
                </div>
                {% for error in form.password.errors %}
                <p class="text-sm text-red-500 mt-2 font-medium flex items-center">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                            clip-rule="evenodd"></path>
                    </svg>
                    {{ error }}
                </p>
                {% endfor %}
            </div>

            <!-- Confirm Password Field -->
            <div class="mb-6">
                {{ form.confirm_password.label(class="block text-sm font-semibold text-gray-700 mb-2") }}
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20"
                            fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                    {{ form.confirm_password(class="w-full pl-11 p-3 border border-gray-300 rounded-xl
                    focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all
                    shadow-sm bg-gray-50 focus:bg-white") }}
                </div>
                {% for error in form.confirm_password.errors %}
                <p class="text-sm text-red-500 mt-2 font-medium flex items-center">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                            clip-rule="evenodd"></path>
                    </svg>
                    {{ error }}
                </p>
                {% endfor %}
            </div>

            <!-- Submit Button -->
            <div class="mt-8">
                {{ form.submit(class="w-full bg-primary-600 hover:bg-primary-700 text-white font-bold py-3 rounded-xl
                shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5 cursor-pointer")
                }}
            </div>

            <p class="text-center mt-6 text-gray-600">
                Already have an account? <a href="{{ url_for('auth.login') }}"
                    class="text-primary-600 hover:text-primary-800 font-bold hover:underline">Log in</a>
            </p>
        </form>
    </div>
</div>
{% endblock %}