{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6"><div class="rounded-3xl bg-white p-6 shadow-soft"><h2 class="text-xl font-semibold text-slate-900">Import Preview</h2><p class="mt-2 text-sm text-slate-500">Audit Firm ID {{ tenant_id }} • Branch {{ branch_id }}</p>{% if preview.errors %}<div class="mt-4 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900"><div class="font-medium">Please fix these issues before importing:</div><ul class="mt-2 list-disc pl-5">{% for err in preview.errors %}<li>{{ err }}</li>{% endfor %}</ul></div><div class="mt-4"><a href="/services/catalogue/import" class="rounded-xl border border-slate-300 px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50">Back</a></div>{% else %}<div class="grid gap-4 md:grid-cols-2"><div class="rounded-2xl bg-slate-50 p-4"><div class="text-xs uppercase text-slate-500">Catalogue Rows</div><div class="mt-1 text-xl font-semibold text-slate-900">{{ preview.catalogue_rows|length }}</div></div><div class="rounded-2xl bg-slate-50 p-4"><div class="text-xs uppercase text-slate-500">Task Template Rows</div><div class="mt-1 text-xl font-semibold text-slate-900">{{ preview.task_rows|length }}</div></div></div><div class="mt-6 rounded-2xl border border-slate-200"><div class="border-b border-slate-200 bg-slate-50 px-4 py-3 text-sm font-medium text-slate-700">Catalogue Preview</div><div class="overflow-x-auto"><table class="min-w-full divide-y divide-slate-200"><thead class="bg-white"><tr><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Code</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Name</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Category</th></tr></thead><tbody class="divide-y divide-slate-100">{% for row in preview.catalogue_rows[:15] %}<tr><td class="px-4 py-3 text-sm">{{ row.service_code }}</td><td class="px-4 py-3 text-sm">{{ row.service_name }}</td><td class="px-4 py-3 text-sm">{{ row.category or '-' }}</td></tr>{% endfor %}</tbody></table></div></div>{% if preview.task_rows %}<div class="rounded-2xl border border-slate-200"><div class="border-b border-slate-200 bg-slate-50 px-4 py-3 text-sm font-medium text-slate-700">Firm Task Template Preview</div><div class="overflow-x-auto"><table class="min-w-full divide-y divide-slate-200"><thead class="bg-white"><tr><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Service</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Seq</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Task</th></tr></thead><tbody class="divide-y divide-slate-100">{% for row in preview.task_rows[:20] %}<tr><td class="px-4 py-3 text-sm">{{ row.service_code }}</td><td class="px-4 py-3 text-sm">{{ row.sequence_no }}</td><td class="px-4 py-3 text-sm">{{ row.task_name }}</td></tr>{% endfor %}</tbody></table></div></div>{% endif %}<form method="post" action="/services/catalogue/import/confirm" class="flex gap-3"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><input type="hidden" name="payload_json" value="{{ payload_json|e }}"><button class="rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700">Confirm Import</button><a href="/services/catalogue/import" class="rounded-xl border border-slate-300 px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50">Back</a></form>{% endif %}</div></div>
{% endblock %}