{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-3xl rounded-2xl bg-white p-6 shadow-soft">
  <h2 class="text-xl font-semibold text-slate-900">{% if mode == 'edit' %}Edit Service Category{% else %}Create Service Category{% endif %}</h2>
  <form method="post" class="mt-6 grid gap-5 md:grid-cols-2">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Category Code</label>
      <input type="text" name="code" value="{{ category.code if category else '' }}" {% if mode == 'edit' %}readonly{% endif %} required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm {% if mode == 'edit' %}bg-slate-50{% endif %}">
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Category Name</label>
      <input type="text" name="name" value="{{ category.name if category else '' }}" required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Sort Order</label>
      <input type="number" name="sort_order" value="{{ category.sort_order if category else 100 }}" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
    </div>
    <div class="flex items-center gap-6 pt-7 text-sm text-slate-700">
      <label class="inline-flex items-center gap-2"><input type="checkbox" name="is_active" {% if not category or category.is_active %}checked{% endif %}> Active</label>
    </div>
    <div class="md:col-span-2 flex items-center justify-end gap-3">
      <a href="/services/categories" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
      <button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Save</button>
    </div>
  </form>
</div>
{% endblock %}