{% extends 'base.html' %}
{% load static %}

{% block content %}
<section class="hero-bw text-center">
    <div class="container">
        <div class="hero-content text-start" style="max-width: 500px; width: 100%;">
            <h1 class="h2 mb-4">REGISTER</h1>
            
            <form method="post">
                {% csrf_token %}
                
                {% if form.errors %}
                    <div class="alert alert-danger font-mono small border-2 border-dark rounded-0 mb-4">
                        REGISTRATION_FAILED. CHECK_DATA.
                    </div>
                {% endif %}

                {% for field in form %}
                    <div class="mb-3">
                        <label for="{{ field.id_for_label }}" class="form-label font-mono small">{{ field.label|upper }}</label>
                        <input type="{{ field.field.widget.input_type|default:'text' }}" 
                               name="{{ field.name }}" 
                               id="{{ field.id_for_label }}" 
                               class="form-control font-mono rounded-0 border-2" 
                               placeholder="{{ field.label|upper }}"
                               required>
                        {% if field.help_text %}
                            <div class="form-text font-mono small opacity-50">{{ field.help_text|safe }}</div>
                        {% endif %}
                        {% for error in field.errors %}
                            <div class="text-danger font-mono small mt-1">{{ error }}</div>
                        {% endfor %}
                    </div>
                {% endfor %}
                
                <div class="d-grid gap-3 mt-4">
                    <button type="submit" class="btn btn-bw w-100">CREATE_ACCOUNT</button>
                    <div class="text-center">
                        <span class="font-mono small opacity-75 d-block mb-2">ALREADY_HAVE_AN_ACCOUNT?</span>
                        <a href="{% url 'login' %}" class="btn btn-bw-outline w-100">LOG_IN</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
{% endblock %}