{% extends "base.html" %}

{% block title %}Sign Up - Kebuu{% endblock %}

{% block head %}
<script async defer src="https://cdn.altcha.org/js/latest/altcha.min.js" type="module"></script>
{% endblock %}

{% block content %}
<div class="auth-container">
    <h1>Create Account</h1>

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

        <div class="form-group">
            <label for="email">Email</label>
            {{ form.email(class="form-input", placeholder="you@example.com", id="email") }}
            {% if form.email.errors %}
                {% for error in form.email.errors %}
                    <span class="error">{{ error }}</span>
                {% endfor %}
            {% endif %}
        </div>

        <div class="form-group">
            <label for="password">Password</label>
            {{ form.password(class="form-input", id="password") }}
            {% if form.password.errors %}
                {% for error in form.password.errors %}
                    <span class="error">{{ error }}</span>
                {% endfor %}
            {% endif %}
            <small class="hint">Must contain: 8+ characters, uppercase, lowercase, number, special character</small>
        </div>

        <div class="form-group">
            <label for="confirm_password">Confirm Password</label>
            {{ form.confirm_password(class="form-input", id="confirm_password") }}
            {% if form.confirm_password.errors %}
                {% for error in form.confirm_password.errors %}
                    <span class="error">{{ error }}</span>
                {% endfor %}
            {% endif %}
        </div>

        <div class="form-group">
            <altcha-widget
                challengeurl="{{ url_for('main.altcha_challenge') }}"
                style="--altcha-max-width: 100%;"
            ></altcha-widget>
            {% if form.altcha.errors %}
                {% for error in form.altcha.errors %}
                    <span class="error">{{ error }}</span>
                {% endfor %}
            {% endif %}
        </div>

        <button type="submit" class="btn btn-primary">Sign Up</button>
    </form>
</div>
{% endblock %}