{% extends "sauth/base.html" %}
{% block title %}Create Account{% endblock %}

{% block content %}
<div class="space-y-8">
    <div class="text-center">
        <h2 class="text-3xl font-semibold text-gray-900">Create your account</h2>
        <p class="mt-2 text-gray-600">Join us today — it only takes a minute.</p>
    </div>

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

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">First name</label>
                {{ form.first_name }}
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Last name</label>
                {{ form.last_name }}
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Email address</label>
            {{ form.email }}
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
            {{ form.password1 }}
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Confirm password</label>
            {{ form.password2 }}
        </div>

        <button type="submit"
                class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3.5 rounded-2xl transition-all duration-200">
            Create account
        </button>
    </form>

    <div class="text-center text-sm text-gray-600">
        Already have an account? 
        <a href="{% url 'sauth:login' %}" class="font-medium text-blue-600 hover:text-blue-500">Sign in</a>
    </div>
</div>
{% endblock %}