{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">{{ title }}</h2>
      <p class="text-sm text-slate-500">Import summary and row-level validation errors.</p>
    </div>
    <a href="{{ back_url }}" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back</a>
  </div>

  <div class="grid gap-4 md:grid-cols-4">
    <div class="rounded-2xl bg-white p-5 shadow-soft"><div class="text-xs text-slate-500">Created</div><div class="mt-1 text-2xl font-semibold text-slate-900">{{ result.created }}</div></div>
    <div class="rounded-2xl bg-white p-5 shadow-soft"><div class="text-xs text-slate-500">Updated</div><div class="mt-1 text-2xl font-semibold text-slate-900">{{ result.updated }}</div></div>
    <div class="rounded-2xl bg-white p-5 shadow-soft"><div class="text-xs text-slate-500">Skipped</div><div class="mt-1 text-2xl font-semibold text-slate-900">{{ result.skipped }}</div></div>
    <div class="rounded-2xl bg-white p-5 shadow-soft"><div class="text-xs text-slate-500">Errors</div><div class="mt-1 text-2xl font-semibold {% if result.errors %}text-rose-700{% else %}text-emerald-700{% endif %}">{{ result.errors|length }}</div></div>
  </div>

  {% if result.errors %}
  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <h3 class="text-sm font-semibold text-rose-700">Errors found. No rows were committed.</h3>
    <div class="mt-4 overflow-hidden rounded-xl border border-slate-200">
      <table class="min-w-full divide-y divide-slate-200">
        <thead class="bg-slate-50"><tr><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Row</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Message</th></tr></thead>
        <tbody class="divide-y divide-slate-100">
          {% for err in result.errors %}
          <tr><td class="px-4 py-3 text-sm text-slate-700">{{ err.row }}</td><td class="px-4 py-3 text-sm text-slate-700">{{ err.message }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
  {% else %}
  <div class="rounded-2xl border border-emerald-200 bg-emerald-50 p-5 text-sm text-emerald-800">Import completed successfully.</div>
  {% endif %}
</div>
{% endblock %}