{% extends 'base.html' %}

{% block title %}Регистрация — Beauty Salon{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-5">
        <div class="card shadow-lg border-0 mt-5">
            <div class="card-body p-5">
                <h2 class="text-center mb-4 fw-bold text-pink">Создать аккаунт</h2>

                <form method="post">
                    {% csrf_token %}

                    {% for field in form %}
                    <div class="mb-4">
                        <label class="form-label fw-bold">{{ field.label }}</label>
                        {{ field }}
                        {% if field.help_text %}
                            <small class="form-text text-muted">{{ field.help_text }}</small>
                        {% endif %}
                        {% if field.errors %}
                            <div class="text-danger small mt-1">{{ field.errors }}</div>
                        {% endif %}
                    </div>
                    {% endfor %}

                    <button type="submit" class="btn btn-pink btn-lg w-100">Зарегистрироваться</button>
                </form>

                <p class="text-center mt-4">
                    Уже есть аккаунт? <a href="{% url 'login' %}" class="text-pink fw-bold">Войти</a>
                </p>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('id_phone').addEventListener('input', function(e) {
    let v = e.target.value.replace(/\D/g, '');
    if (v.length > 1) v = '8(' + v.substring(1,4) + ')' + v.substring(4,7) + '-' + v.substring(7,9) + '-' + v.substring(9,11);
    e.target.value = v;
});
</script>
{% endblock %}