{% extends 'base.html' %}
{% load bootstrap5 %}
{% load i18n %}

{% block content %}
<div class="container my-5" style="min-height: 70vh;">
  <h2>{% trans "Register" context "page_heading" %}</h2>

  <form method="post">
    {% csrf_token %}
    <div class="row">
      <div class="col-md-6">
        <div class="mb-3">{% bootstrap_field form.username %}</div>
        <div class="mb-3">{% bootstrap_field form.first_name %}</div>
        <div class="mb-3">{% bootstrap_field form.last_name %}</div>
      </div>
      <div class="col-md-6">
        <div class="mb-3">{% bootstrap_field form.email %}</div>
        <div class="mb-3">{% bootstrap_field form.password1 %}</div>
        <div class="mb-3">{% bootstrap_field form.password2 %}</div>
      </div>
    </div>

    <button type="submit" class="btn btn-primary">{% trans "Register" context "form_button" %}</button>
    <a href="{% url 'landing_page' %}" class="btn btn-outline-primary">{% trans "Back" %}</a>
  </form>
</div>
{% endblock %}