{% 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">Default Task Templates</h2>
      <p class="text-sm text-slate-500">System-level default task templates by service catalogue.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/services/defaults/export" class="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-800 hover:bg-emerald-100">Export All Default Tasks</a>
      <a href="/services/catalogue" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back to Catalogue</a>
    </div>
  </div>
  <div class="overflow-hidden rounded-2xl bg-white shadow-soft">
    <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">Code</th><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">Default Tasks</th><th></th></tr></thead>
      <tbody class="divide-y divide-slate-100">{% for row in rows %}<tr><td class="px-4 py-3 text-sm font-medium text-slate-900">{{ row.service_code }}</td><td class="px-4 py-3 text-sm text-slate-700">{{ row.service_name }}</td><td class="px-4 py-3 text-sm text-slate-700">{{ row.default_task_templates|length }}</td><td class="px-4 py-3 text-right"><a href="/services/catalogue/{{ row.id }}/defaults" class="text-sm font-medium text-brand-700 hover:underline">Manage</a></td></tr>{% else %}<tr><td colspan="4" class="px-4 py-8 text-center text-sm text-slate-500">No catalogue services found.</td></tr>{% endfor %}</tbody>
    </table>
  </div>
</div>
{% endblock %}