{% extends "layouts/dashboard.html" %}
{% load i18n %}

{% block extra_head %}
{{ block.super }}
{% include "components/select2_multiselect_head.html" %}
{% endblock %}

{% block breadcrumbs %}
<nav class="flex 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">{% translate "Dashboard" %}</a>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <a href="{% url 'accounts:manage_users' %}" class="hover:text-ruforum-primary transition-colors">{% translate "Users" %}</a>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="text-ruforum-text">{{ target.email|truncatechars:32 }}</span>
</nav>
{% endblock %}

{% block content %}
<div class="w-full">

  {% trans "Edit user" as edit_user_eyebrow %}
  <header class="mb-8">
    {% include "components/page_header_text.html" with eyebrow=edit_user_eyebrow title=target.get_full_name|default:target.email subtitle=target.email size="lg" with_glyph=False %}
  </header>

  {# Read-only context — fields edited elsewhere or never edited from here. #}
  <section class="mb-6 rounded-xl border border-ruforum-border bg-white">
    <dl class="grid grid-cols-1 divide-y divide-ruforum-border sm:grid-cols-3 sm:divide-x sm:divide-y-0">
      <div class="px-5 py-4">
        <dt class="font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-ruforum-text-muted">{% translate "Joined" %}</dt>
        <dd class="mt-1 text-sm text-ruforum-text tabular-nums">{{ target.date_joined|date:"j M Y" }}</dd>
      </div>
      <div class="px-5 py-4">
        <dt class="font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-ruforum-text-muted">{% translate "Status" %}</dt>
        <dd class="mt-1">
          {% if not target.is_active %}<span class="score-fail">{% translate "Inactive" %}</span>
          {% elif target.pending_admin_review %}<span class="score-warn">{% translate "Pending review" %}</span>
          {% elif not target.email_verified %}<span class="score-warn">{% translate "Unverified" %}</span>
          {% else %}<span class="score-pass">{% translate "Active" %}</span>{% endif %}
        </dd>
      </div>
      <div class="px-5 py-4">
        <dt class="font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-ruforum-text-muted">{% translate "Email" %}</dt>
        <dd class="mt-1 text-sm text-ruforum-text break-all">{{ target.email }}</dd>
      </div>
    </dl>
  </section>

  <form method="post" class="card divide-y divide-ruforum-border">
    {% csrf_token %}
    {% if form.non_field_errors %}
    <div class="px-6 py-3 border-b border-red-200 bg-red-50 text-sm text-red-700">{{ form.non_field_errors }}</div>
    {% endif %}

    <div class="grid gap-6 px-6 py-6 md:grid-cols-3">
      <div class="md:col-span-1">
        <p class="form-section-label">{% translate "Identity" %}</p>
        <p class="mt-1 text-xs text-ruforum-text-muted">{% translate "The user's name and contact details." %}</p>
      </div>
      <div class="space-y-5 md:col-span-2">
        <div class="grid gap-5 sm:grid-cols-2">
          <div>
            <label for="{{ form.first_name.id_for_label }}" class="field-label">{% translate "First name" %}</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">{% translate "Last name" %}</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">{% translate "Phone" %}</label>
          {{ form.phone }}
          {% if form.phone.errors %}<p class="field-error">{{ form.phone.errors.0 }}</p>{% endif %}
        </div>
      </div>
    </div>

    <div class="grid gap-6 px-6 py-6 md:grid-cols-3">
      <div class="md:col-span-1">
        <p class="form-section-label">{% translate "Access" %}</p>
        <p class="mt-1 text-xs text-ruforum-text-muted">{% translate "Role, institution, and the permission groups layered on top." %}</p>
      </div>
      <div class="space-y-5 md:col-span-2">
        <div>
          <label for="{{ form.role.id_for_label }}" class="field-label">{% translate "Role" %}</label>
          {{ form.role }}
          <p class="field-hint">{% translate "Determines which parts of the platform this user can access." %}</p>
          {% if form.role.errors %}<p class="field-error">{{ form.role.errors.0 }}</p>{% endif %}
        </div>
        <div>
          <label for="{{ form.institution.id_for_label }}" class="field-label">{% translate "Institution" %}</label>
          {{ form.institution }}
          {% if target.non_partner_institution_name %}
          <p class="mt-1 font-meta text-[11px] uppercase tracking-[0.10em] text-amber-700">
            {% translate "Self-reported during registration" %}: {{ target.non_partner_institution_name }}
          </p>
          {% endif %}
          {% if form.institution.errors %}<p class="field-error">{{ form.institution.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>
        <label class="flex items-start gap-3 rounded-lg border border-ruforum-border bg-ruforum-warm-hover/40 px-4 py-3">
          {{ form.email_verified }}
          <span>
            <span class="block font-medium text-ruforum-text">{% translate "Email verified" %}</span>
            <span class="mt-0.5 block text-xs text-ruforum-text-muted">
              {% blocktranslate %}Tick this if the user is unable to use the verification email — for example, when you've created the account on their behalf and confirmed their identity through another channel.{% endblocktranslate %}
            </span>
          </span>
        </label>
      </div>
    </div>

    <div class="grid gap-6 px-6 py-6 md:grid-cols-3">
      <div class="md:col-span-1">
        <p class="form-section-label">{% translate "Direct permissions" %}</p>
        <p class="mt-1 text-xs text-ruforum-text-muted">{% translate "In addition to permissions inherited from the role group above." %}</p>
      </div>
      <div class="space-y-5 md:col-span-2">
        <div>
          <label for="{{ form.user_permissions.id_for_label }}" class="field-label">{{ form.user_permissions.label }}</label>
          {{ form.user_permissions }}
          {% if form.user_permissions.errors %}<p class="field-error">{{ form.user_permissions.errors.0 }}</p>{% endif %}
        </div>
      </div>
    </div>

    <div class="flex items-center justify-between gap-3 px-6 py-4">
      <a href="{% url 'accounts:manage_users' %}" class="btn-secondary">{% translate "Cancel" %}</a>
      <button type="submit" class="btn-primary">{% translate "Save changes" %}</button>
    </div>
  </form>

  <p class="mt-4 text-center font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">
    {% translate "Password and email are managed by the user themselves." %}
  </p>

</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" %}
{% include "components/select2_multiselect_init_js.html" with select_id=form.user_permissions.id_for_label placeholder="Search permissions to add" %}
{% include "components/select2_auto_init.html" %}
{% endblock %}