{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-5xl rounded-2xl bg-white p-6 shadow-soft">
  <h2 class="text-xl font-semibold text-slate-900">{% if mode == 'edit' %}Edit Service Catalogue{% else %}Create Service Catalogue{% 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">Service Code</label><input type="text" name="service_code" value="{{ catalogue.service_code if catalogue 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">Service Name</label><input type="text" name="service_name" value="{{ catalogue.service_name if catalogue 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">Category</label><select name="category_id" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm"><option value="">Select category</option>{% for cat in categories %}<option value="{{ cat.id }}" {% if catalogue and catalogue.category_id == cat.id %}selected{% endif %}>{{ cat.name }}</option>{% endfor %}</select></div>
    <div><label class="mb-2 block text-sm font-medium text-slate-700">Recurrence Type</label><select name="recurrence_type" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm"><option value="">Select recurrence</option>{% for value, label in recurrence_choices %}<option value="{{ value }}" {% if catalogue and catalogue.recurrence_type == value %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></div>
    <div><label class="mb-2 block text-sm font-medium text-slate-700">Engagement Type</label><select name="engagement_type" required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">{% for value, label in engagement_type_choices %}<option value="{{ value }}" {% if catalogue and catalogue.engagement_type == value %}selected{% elif not catalogue and value == "non_assurance" %}selected{% endif %}>{{ label }}</option>{% endfor %}</select><p class="mt-1 text-xs text-slate-500">This value will be copied to client engagements when the service is assigned.</p></div>
    <div><label class="mb-2 block text-sm font-medium text-slate-700">Sort Order</label><input type="number" name="sort_order" value="{{ catalogue.sort_order if catalogue 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 catalogue or catalogue.is_active %}checked{% endif %}> Active</label><label class="inline-flex items-center gap-2"><input type="checkbox" name="is_client_requestable" {% if catalogue and catalogue.is_client_requestable %}checked{% endif %}> Client Requestable</label><label class="inline-flex items-center gap-2"><input type="checkbox" name="is_consultant_requestable" {% if catalogue and catalogue.is_consultant_requestable %}checked{% endif %}> Consultant Requestable</label></div>
    <div class="md:col-span-2"><label class="mb-2 block text-sm font-medium text-slate-700">Description</label><textarea name="description" rows="4" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">{{ catalogue.description if catalogue else '' }}</textarea></div>
    <div class="md:col-span-2">
      <h3 class="mb-3 text-sm font-semibold text-slate-900">Applicability</h3>
      <div class="grid gap-3 md:grid-cols-4 text-sm text-slate-700">
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_individual" {% if catalogue and catalogue.applicable_individual %}checked{% endif %}> Individual</label>
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_proprietorship" {% if catalogue and catalogue.applicable_proprietorship %}checked{% endif %}> Proprietorship</label>
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_partnership" {% if catalogue and catalogue.applicable_partnership %}checked{% endif %}> Partnership</label>
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_llp" {% if catalogue and catalogue.applicable_llp %}checked{% endif %}> LLP</label>
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_company" {% if catalogue and catalogue.applicable_company %}checked{% endif %}> Company</label>
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_trust" {% if catalogue and catalogue.applicable_trust %}checked{% endif %}> Trust</label>
        <label class="inline-flex items-center gap-2"><input type="checkbox" name="applicable_society" {% if catalogue and catalogue.applicable_society %}checked{% endif %}> Society</label>
      </div>
    </div>
    <div class="md:col-span-2 flex items-center justify-end gap-3"><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">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 %}