{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% include "ui/templates/components/firm_admin_navigation_v2.html" %}
<section class="mx-auto max-w-6xl space-y-6">
  <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
    <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-brand-600">Firm Admin Bulk Onboarding</p>
        <h1 class="mt-2 text-2xl font-bold text-slate-900">Import Result</h1>
        <p class="mt-1 text-sm text-slate-500">Created {{ import_result.summary.created }} of {{ import_result.summary.total }} rows. Failed {{ import_result.summary.failed }} rows.</p>
      </div>
      <div class="flex flex-wrap gap-2">
        <a href="/firm-admin/users/import" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Import More</a>
        <a href="/firm-admin/dashboard?tab=users" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Back to Users</a>
      </div>
    </div>
  </div>

  {% if import_result.invite_links %}
  <div class="rounded-3xl border border-emerald-200 bg-emerald-50 p-5 shadow-soft">
    <h2 class="text-lg font-bold text-emerald-900">Invite link fallback</h2>
    <p class="mt-1 text-sm text-emerald-800">Copy these links if automatic email is not configured or failed for any user.</p>
    <div class="mt-4 space-y-3">
      {% for item in import_result.invite_links %}
      <div class="rounded-2xl border border-emerald-100 bg-white p-4">
        <div class="text-sm font-bold text-slate-900">Row {{ item.row_no }} — {{ item.name }} / {{ item.email }} / {{ item.role }}</div>
        <div class="mt-1 text-xs font-semibold text-slate-500">Email status: {{ item.email_status or 'not_attempted' }}</div>
        <input value="{{ item.invite_url }}" readonly onclick="this.select()" class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-700" />
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <div class="overflow-x-auto rounded-3xl border border-slate-200 bg-white shadow-soft">
    <table class="min-w-full divide-y divide-slate-100 text-sm">
      <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
        <tr><th class="px-5 py-3">Row</th><th class="px-5 py-3">Status</th><th class="px-5 py-3">Name</th><th class="px-5 py-3">Email</th><th class="px-5 py-3">Role</th><th class="px-5 py-3">Message</th></tr>
      </thead>
      <tbody class="divide-y divide-slate-100">
        {% for row in import_result.rows %}
        <tr class="hover:bg-slate-50">
          <td class="px-5 py-3">{{ row.row_no }}</td>
          <td class="px-5 py-3"><span class="rounded-full px-2 py-1 text-xs font-semibold {% if row.status == 'created' %}bg-emerald-50 text-emerald-700{% else %}bg-red-50 text-red-700{% endif %}">{{ row.status }}</span></td>
          <td class="px-5 py-3 text-slate-700">{{ row.name or '-' }}</td>
          <td class="px-5 py-3 text-slate-700">{{ row.email or '-' }}</td>
          <td class="px-5 py-3 text-slate-700">{{ row.role or '-' }}</td>
          <td class="px-5 py-3 text-slate-600">{{ row.message }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endblock %}