{% extends 'base.html' %}
{% load static %}
{% block title %}Регистрация — Sharp Cut{% endblock %}
{% block content %}
<section class="container auth-page py-5">
    <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-5">
            <div class="card border-0 shadow-sm rounded-5 fade-up">
                <div class="card-body p-4 p-md-5">
                    <h1 class="h2 fw-bold mt-2 mb-3">Регистрация</h1>
                    <form method="post" class="vstack gap-3" novalidate>
                        {% csrf_token %}
                        {% for field in form %}
                            <div>
                                <label class="form-label fw-semibold" for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                                {% for error in field.errors %}
                                    <div class="invalid-feedback d-block error-pop">{{ error }}</div>
                                {% endfor %}
                            </div>
                        {% endfor %}
                        {% for error in form.non_field_errors %}
                            <div class="alert alert-danger error-pop">{{ error }}</div>
                        {% endfor %}
                        <button class="btn btn-dark rounded-pill py-2" type="submit">Зарегистрироваться</button>
                    </form>
                    <p class="text-center text-muted mt-4 mb-0">
                        Уже зарегистрированы?
                        <a class="fw-bold text-dark" href="{% url 'login' %}">Авторизация</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
{% block extra_scripts %}
    <script src="{% static 'js/register.js' %}"></script>
{% endblock %}