<div class="space-y-6">
  <div class="grid gap-4 md:grid-cols-3 xl:grid-cols-6">
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Categories</div><div class="mt-2 text-2xl font-bold">{{ catalogue.category_count }}</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Services</div><div class="mt-2 text-2xl font-bold">{{ catalogue.service_count }}</div><div class="text-xs text-slate-500">{{ catalogue.active_service_count }} active</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Inactive</div><div class="mt-2 text-2xl font-bold">{{ catalogue.inactive_service_count }}</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Default Tasks</div><div class="mt-2 text-2xl font-bold">{{ catalogue.default_task_count }}</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Due Rules</div><div class="mt-2 text-2xl font-bold">{{ catalogue.due_rule_count }}</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">No Tasks</div><div class="mt-2 text-2xl font-bold {% if catalogue.services_without_tasks_count %}text-amber-700{% else %}text-emerald-700{% endif %}">{{ catalogue.services_without_tasks_count }}</div></div>
  </div>

  {% if catalogue.services_without_tasks_preview %}
  <div class="rounded-3xl border border-amber-100 bg-amber-50 p-5 shadow-soft"><h3 class="font-bold text-amber-900">Services without default tasks</h3><div class="mt-3 flex flex-wrap gap-2">{% for service in catalogue.services_without_tasks_preview %}<span class="rounded-full bg-white px-3 py-1 text-xs font-semibold text-amber-800">{{ service.code }} - {{ service.name }}</span>{% endfor %}</div></div>
  {% endif %}

  <div class="rounded-3xl border border-slate-200 bg-white shadow-soft">
    <div class="flex flex-col gap-3 border-b border-slate-100 p-5 md:flex-row md:items-center md:justify-between">
      <div><h2 class="text-lg font-bold text-slate-900">Service Catalogue Readiness</h2><p class="text-sm text-slate-500">First 150 catalogue services with default task/rule counts.</p></div>
      <div class="flex flex-wrap gap-2"><a href="/services/catalogue" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Open Catalogue</a><a href="/services/default-templates" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Default Templates</a></div>
    </div>
    <div class="overflow-x-auto">
      <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">Code</th><th class="px-5 py-3">Service</th><th class="px-5 py-3">Category</th><th class="px-5 py-3">Recurrence</th><th class="px-5 py-3 text-right">Tasks</th><th class="px-5 py-3 text-right">Rules</th><th class="px-5 py-3">Readiness</th><th class="px-5 py-3">Status</th></tr></thead>
        <tbody class="divide-y divide-slate-100">
          {% for service in catalogue.services %}
          <tr class="hover:bg-slate-50"><td class="px-5 py-3 font-semibold">{{ service.code }}</td><td class="px-5 py-3">{{ service.name }}</td><td class="px-5 py-3">{{ service.category }}</td><td class="px-5 py-3">{{ service.recurrence_type }}</td><td class="px-5 py-3 text-right font-semibold">{{ service.task_count }}</td><td class="px-5 py-3 text-right font-semibold">{{ service.rule_count }}</td><td class="px-5 py-3"><span class="rounded-full px-2.5 py-1 text-xs font-semibold {% if service.task_count %}bg-emerald-50 text-emerald-700{% else %}bg-amber-50 text-amber-700{% endif %}">{{ service.readiness }}</span></td><td class="px-5 py-3">{% if service.is_active %}<span class="text-emerald-700 font-semibold">Active</span>{% else %}<span class="text-slate-500">Inactive</span>{% endif %}</td></tr>
          {% else %}
          <tr><td colspan="8" class="px-5 py-8 text-center text-slate-500">No services found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>