{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% include "ui/templates/components/firm_admin_navigation_v2.html" %}
<section class="mx-auto max-w-4xl 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 Partner / Manager / Staff</h1>
        <p class="mt-1 text-sm text-slate-500">Upload the Excel template to create user accounts, map roles and branches, create/link employee masters and generate invite links in bulk.</p>
      </div>
      <a href="/firm-admin/dashboard?tab=users" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Back to Users</a>
    </div>
  </div>

  {% if flash %}
  <div class="rounded-3xl border border-red-200 bg-red-50 p-5 text-sm font-semibold text-red-800 shadow-soft">{{ flash }}</div>
  {% endif %}

  <div class="grid gap-5 md:grid-cols-2">
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
      <h2 class="text-lg font-bold text-slate-900">1. Download template</h2>
      <p class="mt-2 text-sm text-slate-500">The template includes role values, sample rows and your active firm's branch list.</p>
      <a href="/firm-admin/users/import/template" class="mt-5 inline-flex rounded-xl bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-emerald-700">Download Excel Template</a>
    </div>

    <form method="post" action="/firm-admin/users/import" enctype="multipart/form-data" class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
      <h2 class="text-lg font-bold text-slate-900">2. Upload completed file</h2>
      <p class="mt-2 text-sm text-slate-500">Allowed roles: <b>partner</b>, <b>manager</b>, <b>staff</b>. Manager will be assigned your existing Branch Manager role.</p>
      <label class="mt-5 block">
        <span class="text-sm font-semibold text-slate-700">Excel File <span class="text-red-600">*</span></span>
        <input type="file" name="import_file" accept=".xlsx,.xlsm" required class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100" />
      </label>
      <button class="mt-5 rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-soft hover:bg-brand-700">Import Users</button>
    </form>
  </div>

  <div class="rounded-3xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-900 shadow-soft">
    <div class="font-bold">Important</div>
    <p class="mt-1">Do not keep the sample rows unless you want them imported. Email and employee code must be unique. If email sending fails, the fallback invite links will still be shown after import.</p>
  </div>
</section>
{% endblock %}