{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Generate Service Tasks</h2>
      <p class="text-sm text-slate-500">Generate execution tasks from firm task templates for active engagement subscriptions.</p>
    </div>
    <a href="/services/work-tracker" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Dashboard</a>
  </div>

  <form method="get" class="rounded-2xl bg-white p-4 shadow-soft">
    <input type="text" name="q" value="{{ q }}" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" placeholder="Search client or service">
  </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">Client</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">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 text-slate-900">{{ row.subscription.client.client_name if row.subscription.client else '-' }}</td>
          <td class="px-4 py-3 text-sm text-slate-700">{{ row.subscription.catalogue.service_name if row.subscription.catalogue else '-' }}</td>
          <td class="px-4 py-3 text-sm text-slate-700">{{ row.completed_tasks }}/{{ row.total_tasks }} completed · {{ row.open_tasks }} open</td>
          <td class="px-4 py-3 text-right">
            {% if can_generate %}
            <form method="post" action="/services/work-tracker/subscriptions/{{ row.subscription.id }}/generate" class="inline">
              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
              <button class="rounded-xl bg-brand-600 px-3 py-2 text-xs font-medium text-white hover:bg-brand-700">Generate / Sync Tasks</button>
            </form>
            {% endif %}
          </td>
        </tr>
      {% else %}
        <tr><td colspan="4" class="px-4 py-8 text-center text-sm text-slate-500">No active subscriptions found.</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}