{% 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">Service Categories</h2>
      <p class="text-sm text-slate-500">System-level grouping for service catalogue entries.</p>
    </div>
    {% if can_create %}<a href="/services/categories/new" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Add Category</a>{% endif %}
  </div>
  <form method="get" class="rounded-2xl bg-white p-4 shadow-soft">
    <div class="flex gap-3">
      <input type="text" name="q" value="{{ q }}" placeholder="Search code or name" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
      <button class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium hover:bg-slate-50">Search</button>
    </div>
  </form>
  <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">Name</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Order</th><th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Status</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.code }}</td>
          <td class="px-4 py-3 text-sm text-slate-700">{{ row.name }}</td>
          <td class="px-4 py-3 text-sm text-slate-700">{{ row.sort_order }}</td>
          <td class="px-4 py-3 text-sm">{% if row.is_active %}<span class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700">Active</span>{% else %}<span class="rounded-full bg-slate-200 px-2 py-1 text-xs font-medium text-slate-700">Inactive</span>{% endif %}</td>
          <td class="px-4 py-3 text-right"><a href="/services/categories/{{ row.id }}/edit" class="text-sm font-medium text-brand-700 hover:underline">Edit</a></td>
        </tr>
        {% else %}<tr><td colspan="5" class="px-4 py-8 text-center text-sm text-slate-500">No categories found.</td></tr>{% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}