{% extends 'base.html' %}
{% block content %}
    <section id="auth" class="auth-section">
        <div class="auth-container">
            <div class="auth-card">
                <div class="auth-header">
                    <h2>Join Our<span>Wellness Community</span></h2>
                    <p>Create an account and get 10% off your first order</p>
                </div>

                <form method="POST" action="{{ url_for('auth.signup') }}" class="auth-form" novalidate>
                    {{ form.hidden_tag() }}
                    <div class="form-row">
                        <div class="form-group">
                            {{ form.full_name.label }}
                            {% if form.full_name.errors %}
                                {{ form.full_name(class="form-control is-invalid", placeholder="Enter your full name") }}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.full_name.errors %}
                                        <small>{{ error }}</small><br>
                                    {% endfor %}
                                </div>
                            {% else %}
                                {{ form.full_name(class="form-control", placeholder="Enter your full name") }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            {{ form.email.label }}
                            {% if form.email.errors %}
                                {{ form.email(class="form-control is-invalid", placeholder="you@example.com") }}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.email.errors %}
                                        <small>{{ error }}</small><br>
                                    {% endfor %}
                                </div>
                            {% else %}
                                {{ form.email(class="form-control", placeholder="you@example.com") }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            {{ form.password.label }}
                            {% if form.password.errors %}
                                {{ form.password(class="form-control is-invalid", placeholder="Create a password") }}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.password.errors %}
                                        <small>{{ error }}</small><br>
                                    {% endfor %}
                                </div>
                            {% else %}
                                {{ form.password(class="form-control", placeholder="Create a password") }}
                            {% endif %}
                            <small class="password-hint">Minimum 8 characters</small>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            {{ form.confirm_password.label }}
                            {% if form.confirm_password.errors %}
                                {{ form.confirm_password(class="form-control is-invalid", placeholder="Confirm your password") }}
                                <div class="invalid-feedback d-block">
                                    {% for error in form.confirm_password.errors %}
                                        <small>{{ error }}</small><br>
                                    {% endfor %}
                                </div>
                            {% else %}
                                {{ form.confirm_password(class="form-control", placeholder="Confirm your password") }}
                            {% endif %}
                        </div>
                    </div>
                    {{ form.submit(class="btn") }}
                    <p class="auth-link">Already have an account? <a href="{{ url_for('auth.signin') }}">Sign In</a></p>
                </form>
            </div>
        </div>
    </section>
{% endblock %}