{% extends 'base_public.html' %}

{% block content %}
    <form class="space-y-6" method="post">
        {% csrf_token %}

        <h2 class="text-xl font-bold text-gray-900 text-center mb-6">Account aanmaken</h2>

        {% if form.non_field_errors %}
            <div class="bg-red-50 border-l-4 border-red-400 p-4">
                <p class="text-sm text-red-700">{{ form.non_field_errors|striptags }}</p>
            </div>
        {% endif %}

        {% for field in form %}
        <div>
            <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">
                {{ field.label }}
            </label>
            {{ field }}
            {% if field.help_text %}
                <p class="mt-1 text-xs text-gray-500">{{ field.help_text|safe }}</p>
            {% endif %}
            {% if field.errors %}
                <p class="mt-1 text-sm text-red-600">{{ field.errors.0 }}</p>
            {% endif %}
        </div>
        {% endfor %}

        <div>
            <button type="submit" class="w-full flex justify-center rounded-md border border-transparent bg-blue-600 py-3 px-4 text-sm font-bold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                Start direct (14 dagen gratis)
            </button>
        </div>
    </form>

    <div class="mt-6">
        <div class="relative">
            <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-300"></div>
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="bg-white px-2 text-gray-500">Of</span>
            </div>
        </div>

        <div class="mt-6">
            <a href="{% url 'login' %}" class="flex w-full justify-center rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50">
                Inloggen
            </a>
        </div>
    </div>
{% endblock %}