{% extends 'public_frontend/base.html' %}
{% load i18n %}
{% block title %}{% trans "Register" %}{% endblock %}
{% block content %}
<div class="max-w-xl mx-auto">
  <h1 class="text-2xl font-semibold mb-4">{% trans "Create an Account" %}</h1>
  <div class="bg-white rounded shadow p-4">
    <form method="post" action="" class="grid gap-4">
      {% csrf_token %}
      <div>
        <label class="block text-sm font-medium mb-1" for="id_username">{% trans "Username" %}</label>
        <input type="text" name="username" id="id_username" value="{{ form.username.value|default:'' }}" required class="w-full border rounded px-3 py-2">
        {% if form.username.errors %}<div class="text-sm text-rose-700 mt-1">{{ form.username.errors|join:", " }}</div>{% endif %}
      </div>
      <div>
        <label class="block text-sm font-medium mb-1" for="id_email">{% trans "Email" %}</label>
        <input type="email" name="email" id="id_email" value="{{ form.email.value|default:'' }}" required class="w-full border rounded px-3 py-2">
        {% if form.email.errors %}<div class="text-sm text-rose-700 mt-1">{{ form.email.errors|join:", " }}</div>{% endif %}
      </div>
      <div class="grid md:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium mb-1" for="id_password1">{% trans "Password" %}</label>
          <input type="password" name="password1" id="id_password1" required class="w-full border rounded px-3 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium mb-1" for="id_password2">{% trans "Confirm Password" %}</label>
          <input type="password" name="password2" id="id_password2" required class="w-full border rounded px-3 py-2">
          {% if form.password2.errors %}<div class="text-sm text-rose-700 mt-1">{{ form.password2.errors|join:", " }}</div>{% endif %}
        </div>
      </div>
      <div>
        <label class="block text-sm font-medium mb-1" for="id_role">{% trans "Role" %}</label>
        <select name="role" id="id_role" class="w-full border rounded px-3 py-2">
          {% for val,label in form.fields.role.choices %}
            <option value="{{ val }}" {% if form.role.value == val %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <button class="btn-primary" type="submit">{% trans "Register" %}</button>
      </div>
    </form>
    <p class="text-sm text-gray-600 mt-3">{% trans "Already have an account?" %} <a href="/accounts/login/" class="text-blue-700 hover:underline">{% trans "Login" %}</a></p>
  </div>
</div>
<style>
  .btn-primary{background:#1d4ed8;color:#fff;padding:.5rem .75rem;border-radius:.375rem}
</style>
{% endblock %}

