{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-3xl rounded-2xl bg-white p-6 shadow-soft">
  <div class="flex items-center justify-between">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Edit Firm Task Template</h2>
      <p class="text-sm text-slate-500">{{ service.service_code }} · {{ service.service_name }}</p>
    </div>
    <a href="/services/templates/{{ service.id }}" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back</a>
  </div>

  <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">Task Name</label>
      <input type="text" name="task_name" value="{{ task.task_name }}" 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">Default Role</label>
      <input type="text" name="default_role_name" value="{{ task.default_role_name or '' }}" 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">Sequence No</label>
      <input type="number" min="1" name="sequence_no" value="{{ task.sequence_no }}" required 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_mandatory" {% if task.is_mandatory %}checked{% endif %}>
        Mandatory
      </label>
      <label class="inline-flex items-center gap-2">
        <input type="checkbox" name="requires_review" {% if task.requires_review %}checked{% endif %}>
        Review
      </label>
      <label class="inline-flex items-center gap-2">
        <input type="checkbox" name="is_active" {% if task.is_active %}checked{% endif %}>
        Active
      </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">{{ task.description or '' }}</textarea>
    </div>

    <div class="md:col-span-2 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
      To deactivate this task, untick <strong>Active</strong> and save. No hard delete is used.
    </div>

    <div class="md:col-span-2 flex justify-end gap-3">
      <a href="/services/templates/{{ service.id }}" 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 Changes</button>
    </div>
  </form>
</div>
{% endblock %}