{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  {% set _uiux_partner_role_text = (current_user_roles or [])|join('|')|lower %}
  {% if 'partner' in _uiux_partner_role_text %}
    {% include "ui/templates/components/partner_navigation_v2.html" %}
  {% endif %}

  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Client Service Subscriptions</h2>
      <p class="text-sm text-slate-500">
        Persistent client-level services. Period-wise engagements are generated and tracked separately.
      </p>
    </div>
    <a href="/services/engagements/new"
       class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">
      Assign Service
    </a>
  </div>

  <form method="get" class="flex flex-wrap items-end gap-3 rounded-2xl bg-white p-4 shadow-soft">
    <div>
      <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Search</label>
      <input type="text"
             name="q"
             value="{{ q or '' }}"
             placeholder="Client or service"
             class="w-72 rounded-xl border border-slate-300 px-3 py-2 text-sm">
    </div>
    <label class="inline-flex items-center gap-2 pb-2 text-sm text-slate-700">
      <input type="checkbox"
             name="include_inactive"
             value="true"
             {% if include_inactive %}checked{% endif %}
             class="rounded border-slate-300">
      Include inactive
    </label>
    <button type="submit"
            class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
      Filter
    </button>
  </form>

  <div class="overflow-hidden rounded-2xl bg-white shadow-soft">
    <div class="overflow-x-auto">
      <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">Recurrence</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Default Team</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Engagements</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Status</th>
            <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Action</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          {% for plan, count, latest_due in rows %}
          <tr class="align-top">
            <td class="px-4 py-3 text-sm">
              <div class="font-medium text-slate-900">{{ plan.client.client_name }}</div>
              <div class="text-xs text-slate-500">{{ plan.client.client_code or '' }}</div>
            </td>
            <td class="px-4 py-3 text-sm">
              <div class="font-medium text-slate-900">{{ plan.catalogue.service_name }}</div>
              <div class="text-xs text-slate-500">{{ plan.catalogue.service_code }}</div>
            </td>
            <td class="px-4 py-3 text-sm text-slate-700">
              {{ plan.recurrence_type|replace('_', ' ')|title }}
            </td>
            <td class="px-4 py-3 text-xs leading-5 text-slate-600">
              <div><span class="font-medium text-slate-700">Partner:</span> {{ plan.default_partner.full_name if plan.default_partner else '-' }}</div>
              <div><span class="font-medium text-slate-700">Performing:</span> {{ plan.default_performing_partner.full_name if plan.default_performing_partner else '-' }}</div>
              <div><span class="font-medium text-slate-700">Manager:</span> {{ plan.default_manager.full_name if plan.default_manager else '-' }}</div>
              <div><span class="font-medium text-slate-700">Staff:</span> {{ plan.default_staff.full_name if plan.default_staff else '-' }}</div>
            </td>
            <td class="px-4 py-3 text-sm text-slate-700">
              <div class="font-medium text-slate-900">{{ count or 0 }}</div>
              {% if latest_due %}
              <div class="mt-1 text-xs text-slate-500">Latest due: {{ latest_due }}</div>
              {% endif %}
            </td>
            <td class="px-4 py-3 text-sm">
              <span class="rounded-full px-2 py-1 text-xs font-medium
                {% if plan.status == 'active' %}bg-emerald-100 text-emerald-700
                {% else %}bg-slate-200 text-slate-700{% endif %}">
                {{ plan.status|replace('_', ' ')|title }}
              </span>
            </td>
            <td class="px-4 py-3 text-right text-sm">
              <a href="/services/subscriptions/{{ plan.id }}"
                 class="font-medium text-brand-700 hover:underline">
                View
              </a>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="7" class="px-4 py-10 text-center text-sm text-slate-500">
              No client service subscriptions found.
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}