{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-4xl">
  <div class="rounded-3xl border border-emerald-200 bg-white p-6 shadow-soft">
    <div class="rounded-2xl bg-emerald-50 p-4 text-emerald-800">
      <h1 class="text-2xl font-semibold">Firm created successfully</h1>
      <p class="mt-1 text-sm">The tenant, primary branch, Firm Admin and invite token have been created.</p>
    </div>

    <div class="mt-6 grid gap-4 md:grid-cols-2">
      <div class="rounded-2xl border p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Firm</div>
        <div class="mt-2 text-lg font-semibold">{{ tenant.name }}</div>
        <div class="text-sm text-slate-500">{{ tenant.code }} · {{ tenant.firm_type }}</div>
      </div>
      <div class="rounded-2xl border p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Primary Branch</div>
        <div class="mt-2 text-lg font-semibold">{{ branch.name }}</div>
        <div class="text-sm text-slate-500">{{ branch.code }} · Head Office</div>
      </div>
      <div class="rounded-2xl border p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Firm Admin</div>
        <div class="mt-2 text-lg font-semibold">{{ firm_admin.full_name }}</div>
        <div class="text-sm text-slate-500">{{ firm_admin.email }}</div>
      </div>
      <div class="rounded-2xl border p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Financial Year</div>
        {% if financial_year %}
        <div class="mt-2 text-lg font-semibold">{{ financial_year.year_code }}</div>
        <div class="text-sm text-slate-500">AY {{ financial_year.assessment_year }}{% if financial_year.is_current %} · Current{% endif %}</div>
        {% else %}
        <div class="mt-2 text-sm text-slate-500">Not created from wizard.</div>
        {% endif %}
      </div>
    </div>

    <div class="mt-6 rounded-2xl border border-brand-200 bg-brand-50 p-4">
      <div class="text-sm font-semibold text-brand-900">Firm Admin invite link</div>
      <p class="mt-1 text-xs text-brand-800">Copy and share this link with the Firm Admin. The user will set their password through the invite acceptance page.</p>
      <div class="mt-3 break-all rounded-xl border border-brand-200 bg-white p-3 text-sm text-brand-900">{{ invite_url }}</div>
    </div>

    <div class="mt-6 flex flex-wrap gap-3">
      <a href="/wizards/system/firm/new" class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800">Create another firm</a>
      <a href="/system-settings/tenants" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">View firms</a>
      <a href="/system-settings/users" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">View users</a>
    </div>
  </div>
</div>
{% endblock %}