{% extends "layouts/auth.html" %}
{% block title %}Create account — IILMP{% endblock %}
{% block auth_card_width %}max-w-xl{% endblock %}
{% block content %}

<div class="mb-7">
  <h1 class="font-display text-xl font-bold text-ruforum-text">Create your account</h1>
  <p class="mt-1 text-xs leading-relaxed text-ruforum-text-muted">
    Join the IILMP platform — apply for grants, track research, and access learning across RUFORUM.
  </p>
</div>

<form method="post" class="space-y-5" novalidate>
  {% csrf_token %}

  {% if form.non_field_errors %}
    <div class="flex items-start gap-2.5 rounded-lg border border-red-200 bg-red-50 px-3.5 py-3 text-xs text-red-700" role="alert">
      <svg class="mt-0.5 h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
      </svg>
      <span>{{ form.non_field_errors }}</span>
    </div>
  {% endif %}

  <div class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
    {% for field in form %}
      {% if field.name == "role" %}
        {# WS5.1 / FRREP-UR008 — render role as branded card-style radios. #}
        <fieldset class="space-y-1.5 sm:col-span-2">
          <legend class="block text-xs font-semibold uppercase tracking-wide text-ruforum-text-muted">
            I am joining as<span class="ml-0.5 text-ruforum-primary" aria-hidden="true">*</span>
          </legend>
          <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
            {% for choice in field %}
            <label for="{{ choice.id_for_label }}"
                   class="group relative flex cursor-pointer items-start gap-2.5 rounded-lg border border-ruforum-border bg-white px-3.5 py-3 transition-colors hover:border-ruforum-primary/60 hover:bg-ruforum-warm-hover/40 has-[:checked]:border-ruforum-primary has-[:checked]:bg-ruforum-warm-hover">
              {{ choice.tag }}
              <span class="text-sm leading-snug text-ruforum-text">{{ choice.choice_label }}</span>
            </label>
            {% endfor %}
          </div>
          {% if field.errors %}
            {% for e in field.errors %}<p class="text-xs text-red-600">{{ e }}</p>{% endfor %}
          {% endif %}
        </fieldset>
      {% elif field.name == "non_partner_institution" %}
        <div class="space-y-1.5">
          <label for="{{ field.id_for_label }}"
                 class="block text-xs font-semibold uppercase tracking-wide text-ruforum-text-muted">
            Or enter a non-partner institution
          </label>
          {{ field }}
          <p class="text-[11px] leading-relaxed text-ruforum-text-muted">
            Type your institution's name if it isn't in the list above. Your account will be marked for staff review before full access is granted.
          </p>
          {% if field.errors %}
            {% for e in field.errors %}<p class="text-xs text-red-600">{{ e }}</p>{% endfor %}
          {% endif %}
        </div>
      {% else %}
        {% include "components/forms/field.html" with field=field %}
      {% endif %}
    {% endfor %}
  </div>

  <div class="pt-1">
    <button type="submit" class="btn-primary w-full justify-center">
      Create account
      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
      </svg>
    </button>
  </div>
</form>

<p class="mt-6 border-t border-ruforum-border pt-5 text-center text-xs text-ruforum-text-muted">
  Already have an account?
  <a href="{% url 'accounts:login' %}" class="font-medium text-ruforum-primary transition-colors hover:text-ruforum-primary-hover focus:outline-none focus:ring-1 focus:ring-ruforum-primary rounded">
    Sign in
  </a>
</p>
{% endblock %}

{% block extra_js %}
{% include "components/select2_auto_init.html" %}
{% endblock %}