{% extends "base.html" %}
{% load widget_tweaks %}

{% block content %}
<div class="col-md-4 mx-auto">
  <h3 class="mb-3">Create account</h3>

  {# 🔹 Show form errors, if any #}
  {% if form.errors %}
    <div class="alert alert-danger">
      {{ form.non_field_errors }}
      <ul class="mb-0">
        {% for field in form %}
          {% for error in field.errors %}
            <li><strong>{{ field.label }}:</strong> {{ error }}</li>
          {% endfor %}
        {% endfor %}
      </ul>
    </div>
  {% endif %}

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

    <div class="mb-3">
      <label class="form-label">Username</label>
      {{ form.username|add_class:"form-control" }}
    </div>

    <div class="mb-3">
      <label class="form-label">Email</label>
      {{ form.email|add_class:"form-control" }}
    </div>

    <div class="mb-3">
      <label class="form-label">Password</label>
      {{ form.password1|add_class:"form-control" }}
    </div>

    <div class="mb-3">
      <label class="form-label">Confirm Password</label>
      {{ form.password2|add_class:"form-control" }}
    </div>

    <div class="mb-3">
      <label class="form-label">Registering as</label>
      {{ form.role|add_class:"form-select" }}
    </div>

    <button type="submit" class="btn btn-primary">Create Account</button>
  </form>

  <p class="mt-3 text-center">
    Already have an account? <a href="{% url 'login' %}">Log in</a>
  </p>
</div>
{% endblock%}