{% 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">
        {{ plan.client.client_name }} — {{ plan.catalogue.service_name }}
      </h2>
      <p class="text-sm text-slate-500">
        Client service subscription master and its period-wise engagements.
      </p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/services/subscriptions"
         class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
        Back
      </a>
      {% if can_edit_subscription %}
      <a href="/services/subscriptions/{{ plan.id }}/edit"
         class="rounded-xl border border-brand-300 px-4 py-2 text-sm font-medium text-brand-700 hover:bg-brand-50">
        Edit Subscription
      </a>
      {% endif %}
      <a href="/services/engagements/new?client_id={{ plan.client_id }}"
         class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">
        Create Engagement
      </a>
    </div>
  </div>

  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <h3 class="text-base font-semibold text-slate-900">Subscription Defaults</h3>
    <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <div class="rounded-xl border border-slate-200 p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Recurrence</div>
        <div class="mt-1 text-sm font-medium text-slate-900">{{ plan.recurrence_type|replace('_', ' ')|title }}</div>
      </div>
      <div class="rounded-xl border border-slate-200 p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Status</div>
        <div class="mt-1 text-sm font-medium text-slate-900">{{ plan.status|replace('_', ' ')|title }}</div>
      </div>
      <div class="rounded-xl border border-slate-200 p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Engagement Partner</div>
        <div class="mt-1 text-sm font-medium text-slate-900">{{ plan.default_partner.full_name if plan.default_partner else '-' }}</div>
      </div>
      <div class="rounded-xl border border-slate-200 p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Performing Partner</div>
        <div class="mt-1 text-sm font-medium text-slate-900">{{ plan.default_performing_partner.full_name if plan.default_performing_partner else '-' }}</div>
      </div>
      <div class="rounded-xl border border-slate-200 p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Manager</div>
        <div class="mt-1 text-sm font-medium text-slate-900">{{ plan.default_manager.full_name if plan.default_manager else '-' }}</div>
      </div>
      <div class="rounded-xl border border-slate-200 p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Staff</div>
        <div class="mt-1 text-sm font-medium text-slate-900">{{ plan.default_staff.full_name if plan.default_staff else '-' }}</div>
      </div>
      <div class="rounded-xl border border-slate-200 p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Review Partner</div>
        <div class="mt-1 text-sm font-medium text-slate-900">{{ plan.default_review_partner.full_name if plan.default_review_partner else '-' }}</div>
      </div>
      <div class="rounded-xl border border-slate-200 p-4">
        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Auto-generate Periods</div>
        <div class="mt-1 text-sm font-medium text-slate-900">{{ 'Yes' if plan.auto_generate_periods else 'No' }}</div>
      </div>
    </div>
  </section>

  <section class="overflow-hidden rounded-2xl bg-white shadow-soft">
    <div class="border-b border-slate-200 px-5 py-4">
      <h3 class="text-base font-semibold text-slate-900">Engagement Instances</h3>
    </div>
    <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">FY</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Period</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Due Date</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 row in engagements %}
          <tr>
            <td class="px-4 py-3 text-sm text-slate-700">{{ row.financial_year or '-' }}</td>
            <td class="px-4 py-3 text-sm text-slate-700">{{ row.period_label or '-' }}</td>
            <td class="px-4 py-3 text-sm text-slate-700">{{ row.current_due_date or '-' }}</td>
            <td class="px-4 py-3 text-sm">
              <span class="rounded-full px-2 py-1 text-xs font-medium
                {% if row.status == 'active' %}bg-emerald-100 text-emerald-700
                {% else %}bg-slate-200 text-slate-700{% endif %}">
                {{ row.status|replace('_', ' ')|title }}
              </span>
            </td>
            <td class="px-4 py-3 text-right text-sm">
              <a href="/services/engagements/{{ row.id }}"
                 class="font-medium text-brand-700 hover:underline">
                View
              </a>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="5" class="px-4 py-10 text-center text-sm text-slate-500">
              No engagement instances generated.
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
</div>
{% endblock %}