{% extends "layouts/dashboard.html" %}
{% block extra_head %}
{{ block.super }}
{% include "components/select2_multiselect_head.html" %}
{% endblock %}
{% block title %}New user — IILMP{% endblock %}
{% block breadcrumbs %}
<nav class="flex flex-wrap items-center gap-1.5 font-meta text-xs text-ruforum-text-muted" aria-label="Breadcrumb">
  <a href="{% url 'core:dashboard' %}" class="hover:text-ruforum-primary transition-colors">Dashboard</a>
  <svg class="crumb-sep shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="opacity-60">Access control</span>
  <svg class="crumb-sep shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <a href="{% url 'core:user_manage_list' %}" class="hover:text-ruforum-primary transition-colors">User management</a>
  <svg class="crumb-sep shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="text-ruforum-text">New user</span>
</nav>
{% endblock %}
{% block content %}

<div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
  <div>
    <h1 class="font-display text-2xl font-bold text-ruforum-text">New user</h1>
    <p class="mt-1 text-sm text-ruforum-text-muted">Add an account, set a role, and optionally link an institution.</p>
  </div>
  <a href="{% url 'core:user_manage_list' %}" class="btn-secondary shrink-0">
    <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="M15 19l-7-7 7-7"/></svg>
    Back to directory
  </a>
</div>

{% include "components/rims_page_intro.html" with eyebrow="New user" heading="Create an account and assign a role." description="The matching Django auth group is applied from the role when you save. If you tick 'Send invitation email', the user receives a link to set their own password — otherwise share the initial password securely yourself." %}

<div class="grid gap-x-8 gap-y-14 lg:grid-cols-12 lg:items-start lg:gap-y-10">
  <div class="min-w-0 lg:col-span-7 xl:col-span-8">
    <form method="post" class="space-y-6">
      {% csrf_token %}
      {% if form.non_field_errors %}
      <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" role="alert">
        {{ form.non_field_errors }}
      </div>
      {% endif %}

      {# ── Sign-in ── #}
      <div class="card overflow-hidden">
        <div class="border-b border-ruforum-border bg-ruforum-surface px-5 py-4">
          <p class="form-section-label">Sign-in</p>
          <p class="mt-1 max-w-prose text-xs leading-relaxed text-ruforum-text-muted">
            Email is the username. Set an initial password (not emailed). The invitee sets their own password via the invitation link or Forgot password.
          </p>
        </div>
        <div class="space-y-5 p-5">
          <div>
            <label for="{{ form.email.id_for_label }}" class="field-label">{{ form.email.label }}</label>
            {{ form.email }}
            {% if form.email.errors %}<p class="field-error">{{ form.email.errors.0 }}</p>{% endif %}
          </div>
          <div class="grid gap-5 sm:grid-cols-2">
            <div>
              <label for="{{ form.password1.id_for_label }}" class="field-label">{{ form.password1.label }}</label>
              {{ form.password1 }}
              {% if form.password1.help_text %}<p class="field-hint">{{ form.password1.help_text }}</p>{% endif %}
              {% if form.password1.errors %}<p class="field-error">{{ form.password1.errors.0 }}</p>{% endif %}
            </div>
            <div>
              <label for="{{ form.password2.id_for_label }}" class="field-label">{{ form.password2.label }}</label>
              {{ form.password2 }}
              {% if form.password2.errors %}<p class="field-error">{{ form.password2.errors.0 }}</p>{% endif %}
            </div>
          </div>
        </div>
      </div>

      {# ── Profile ── #}
      <div class="card overflow-hidden">
        <div class="border-b border-ruforum-border bg-ruforum-surface px-5 py-4">
          <p class="form-section-label">Profile</p>
          <p class="mt-1 max-w-prose text-xs leading-relaxed text-ruforum-text-muted">
            Name and phone appear in correspondence and dashboards. Institution is optional.
          </p>
        </div>
        <div class="space-y-5 p-5">
          <div class="grid gap-5 sm:grid-cols-2">
            <div>
              <label for="{{ form.first_name.id_for_label }}" class="field-label">{{ form.first_name.label }}</label>
              {{ form.first_name }}
              {% if form.first_name.errors %}<p class="field-error">{{ form.first_name.errors.0 }}</p>{% endif %}
            </div>
            <div>
              <label for="{{ form.last_name.id_for_label }}" class="field-label">{{ form.last_name.label }}</label>
              {{ form.last_name }}
              {% if form.last_name.errors %}<p class="field-error">{{ form.last_name.errors.0 }}</p>{% endif %}
            </div>
          </div>
          <div>
            <label for="{{ form.phone.id_for_label }}" class="field-label">{{ form.phone.label }}</label>
            {{ form.phone }}
            {% if form.phone.help_text %}<p class="field-hint">{{ form.phone.help_text }}</p>{% endif %}
            {% if form.phone.errors %}<p class="field-error">{{ form.phone.errors.0 }}</p>{% endif %}
          </div>
          <div>
            <label for="{{ form.institution.id_for_label }}" class="field-label">{{ form.institution.label }}</label>
            {{ form.institution }}
            {% if form.institution.help_text %}<p class="field-hint">{{ form.institution.help_text }}</p>{% endif %}
            {% if form.institution.errors %}<p class="field-error">{{ form.institution.errors.0 }}</p>{% endif %}
          </div>
        </div>
      </div>

      {# ── Access ── #}
      <div class="card overflow-hidden">
        <div class="border-b border-ruforum-border bg-ruforum-surface px-5 py-4">
          <p class="form-section-label">Access</p>
          <p class="mt-1 max-w-prose text-xs leading-relaxed text-ruforum-text-muted">
            Role drives permissions via its Django group. Inactive users cannot sign in.
          </p>
        </div>
        <div class="space-y-5 p-5">
          <div>
            <label for="{{ form.role.id_for_label }}" class="field-label">{{ form.role.label }}</label>
            {{ form.role }}
            <p class="field-hint">Drives most permission logic via its matching Django group.</p>
            {% if form.role.errors %}<p class="field-error">{{ form.role.errors.0 }}</p>{% endif %}
          </div>
          <div>
            <label for="{{ form.additional_roles.id_for_label }}" class="field-label">{{ form.additional_roles.label }}</label>
            {{ form.additional_roles }}
            {% if form.additional_roles.help_text %}<p class="field-hint">{{ form.additional_roles.help_text }}</p>{% endif %}
            {% if form.additional_roles.errors %}<p class="field-error">{{ form.additional_roles.errors.0 }}</p>{% endif %}
          </div>
          <div>
            <label for="{{ form.send_invitation_email.id_for_label }}" class="flex cursor-pointer items-start gap-2.5">
              {{ form.send_invitation_email }}
              <span>
                <span class="text-sm font-medium text-ruforum-text">{{ form.send_invitation_email.label }}</span>
                {% if form.send_invitation_email.help_text %}
                <span class="mt-0.5 block text-xs text-ruforum-text-muted">{{ form.send_invitation_email.help_text }}</span>
                {% endif %}
              </span>
            </label>
            {% if form.send_invitation_email.errors %}<p class="field-error">{{ form.send_invitation_email.errors.0 }}</p>{% endif %}
          </div>
          <div class="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:gap-x-10 sm:gap-y-4">
            <label for="{{ form.is_active.id_for_label }}" class="flex cursor-pointer items-center gap-2.5">
              {{ form.is_active }}
              <span class="text-sm font-medium text-ruforum-text">{{ form.is_active.label }}</span>
            </label>
            {% if "is_staff" in form.fields %}
            <label for="{{ form.is_staff.id_for_label }}" class="flex cursor-pointer items-center gap-2.5">
              {{ form.is_staff }}
              <span class="text-sm font-medium text-ruforum-text">{{ form.is_staff.label }}</span>
            </label>
            {% endif %}
          </div>
          {% if form.is_active.errors or form.is_staff.errors %}
          <div class="text-xs text-red-600">
            {% if form.is_active.errors %}{{ form.is_active.errors.0 }}{% endif %}
            {% if form.is_staff.errors %}{{ form.is_staff.errors.0 }}{% endif %}
          </div>
          {% endif %}
        </div>
      </div>

      <div class="mt-10 mb-4 flex flex-wrap items-center gap-3 lg:mt-12" style="margin-bottom: 10px;">
        <button type="submit" class="btn-primary">Create user</button>
        <a href="{% url 'core:user_manage_list' %}" class="btn-secondary">Cancel</a>
      </div>
    </form>
  </div>

  <aside class="min-w-0 space-y-5 lg:col-span-5 xl:col-span-4">
    <div class="card p-6 sm:p-7">
      <p class="form-section-label mb-2">After you create</p>
      <p class="text-sm leading-relaxed text-ruforum-text-muted">
        You’ll land on the user’s detail page where you can add direct permissions, review effective access, and re-sync groups if needed.
      </p>
      <a href="{% url 'core:user_manage_list' %}" class="mt-4 inline-flex text-sm font-medium text-ruforum-primary transition-colors hover:text-ruforum-primary-hover hover:underline">
        ← Back to directory
      </a>
    </div>
    {% if show_role_permissions_link %}
    <div class="rounded-xl border border-dashed border-ruforum-border bg-ruforum-surface p-6 sm:p-7">
      <p class="text-sm font-medium text-ruforum-text">Roles and permissions</p>
      <p class="mt-1 text-xs leading-relaxed text-ruforum-text-muted">
        Each role maps to a named Django group. Adjust what a role can do before inviting users into it.
      </p>
      <a href="{% url 'core:role_permissions_list' %}" class="mt-3 inline-flex text-sm font-medium text-ruforum-primary transition-colors hover:text-ruforum-primary-hover hover:underline">
        Open role permissions →
      </a>
    </div>
    {% endif %}
  </aside>
</div>

{% endblock %}

{% block extra_js %}
{{ block.super }}
{% include "components/select2_multiselect_init_js.html" with select_id=form.additional_roles.id_for_label placeholder="Search custom roles to add" %}
{% endblock %}