2026-01-24 02:57:51 +00:00

77 lines
4.1 KiB
HTML

{% extends "base.html" %}
{% load i18n %}
{% block content %}
<section class="py-5">
<div class="container">
<div class="mb-4">
<a href="/" class="btn btn-outline-secondary btn-sm">
<i class="fa-solid fa-arrow-left me-1"></i> {% trans "Back to Home" %}
</a>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card shadow">
<div class="card-body p-5">
<h2 class="text-center mb-4">{% trans "Create your account" %}</h2>
<form method="post" novalidate>
{% csrf_token %}
{% if form.non_field_errors %}
<div class="alert alert-danger">
{% for error in form.non_field_errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
{% for field in form %}
{% if field.name == 'country_code' %}
<div class="mb-3">
<label class="form-label">{% trans "Phone Number" %}</label>
<div class="input-group">
<span class="input-group-text">+</span>
<div class="flex-grow-0" style="min-width: 150px;">
{{ form.country_code }}
</div>
{{ form.phone_number }}
</div>
{% if form.phone_number.errors or form.country_code.errors %}
<div class="text-danger small">
{% for error in form.country_code.errors %}{{ error }} {% endfor %}
{% for error in form.phone_number.errors %}{{ error }} {% endfor %}
</div>
{% endif %}
<div class="form-text text-muted small">{% trans "Select country and enter phone number." %}</div>
</div>
{% elif field.name == 'phone_number' %}
{# Handled above #}
{% else %}
<div class="mb-3">
<label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
{% if field.help_text %}
<div class="form-text text-muted small">{{ field.help_text|safe }}</div>
{% endif %}
{% if field.errors %}
{% for error in field.errors %}
<div class="text-danger small">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
{% endif %}
{% endfor %}
<button type="submit" class="btn btn-primary w-100 py-2 mt-3">{% trans "Register" %}</button>
</form>
<div class="text-center mt-3">
<p>{% trans "Already have an account?" %} <a href="{% url 'login' %}">{% trans "Login" %}</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}