{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% include "ui/templates/components/firm_admin_navigation_v2.html" %}
{% set result = onboarding_result %}
<section class="mx-auto max-w-3xl space-y-6">
  <div class="rounded-3xl border border-emerald-200 bg-emerald-50 p-6 shadow-soft">
    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-700">User Created</p>
    <h1 class="mt-2 text-2xl font-bold text-emerald-950">{{ result.role_label }} invite is ready</h1>
    <p class="mt-1 text-sm text-emerald-800">The user account, role mapping and branch assignment have been completed. The appropriate employee or consultant profile has also been created.</p>
  </div>

  <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
    <div class="grid gap-4 text-sm md:grid-cols-2">
      <div><div class="text-xs font-semibold uppercase tracking-wide text-slate-400">User</div><div class="mt-1 font-semibold text-slate-900">{{ result.user.full_name or result.user.email }}</div><div class="text-slate-500">{{ result.user.email }}</div></div>
      <div><div class="text-xs font-semibold uppercase tracking-wide text-slate-400">Role</div><div class="mt-1 font-semibold text-slate-900">{{ result.role_name }}</div></div>
      <div><div class="text-xs font-semibold uppercase tracking-wide text-slate-400">Branch</div><div class="mt-1 font-semibold text-slate-900">{{ result.branch.name }}</div></div>
      {% if result.consultant_profile %}
      <div><div class="text-xs font-semibold uppercase tracking-wide text-slate-400">Consultant Profile</div><div class="mt-1 font-semibold text-slate-900">Created #{{ result.consultant_profile.id }}</div><div class="text-xs text-slate-500">{{ result.consultant_profile.specialisation or result.consultant_profile.consultant_type }}</div></div>
      {% else %}
      <div><div class="text-xs font-semibold uppercase tracking-wide text-slate-400">Employee Link</div><div class="mt-1 font-semibold text-slate-900">{% if result.employee_link_result.employee_id %}Linked #{{ result.employee_link_result.employee_id }}{% else %}Not linked{% endif %}</div></div>
      {% endif %}
      <div class="md:col-span-2"><div class="text-xs font-semibold uppercase tracking-wide text-slate-400">Invite Email</div><div class="mt-1 font-semibold text-slate-900">{{ result.email_status }}</div>{% if result.email_error %}<div class="mt-1 text-xs text-amber-700">{{ result.email_error }}</div>{% endif %}</div>
    </div>

    <div class="mt-6">
      <div class="text-sm font-semibold text-slate-700">Fallback Invite Link</div>
      <div class="mt-2 break-all rounded-2xl border border-brand-200 bg-brand-50 p-4 text-sm text-brand-900">{{ result.invite_url }}</div>
      <p class="mt-2 text-xs text-slate-500">Copy and share this link manually if the email is not delivered.</p>
    </div>

    <div class="mt-6 flex flex-wrap gap-3">
      <a href="/firm-admin/dashboard?tab=users" class="rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700">Back to Users & Roles</a>
      <a href="/firm-admin/users/new?role={{ result.role_label|lower }}" class="rounded-xl border border-slate-300 px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50">Add another {{ result.role_label }}</a>
    </div>
  </div>
</section>
{% endblock %}