{% 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">Peer Review Evidence Export</h2>
      <p class="text-sm text-slate-500">Export assurance engagement evidence from AQMM acceptance, AQMM-tagged tasks, task documents, review notes, UDIN and closure checklist.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/aqmm/dashboard" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">AQMM Dashboard</a>
      <a href="/services/engagements" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Open Engagements</a>
    </div>
  </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">Financial Year</label>
      <input type="text" name="financial_year" value="{{ financial_year or '' }}" placeholder="2025-26" class="w-36 rounded-xl border border-slate-300 px-3 py-2 text-sm">
    </div>
    <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>
    <button 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>

  <section class="overflow-hidden rounded-2xl bg-white shadow-soft">
    <div class="border-b border-slate-100 px-5 py-4">
      <h3 class="text-sm font-semibold text-slate-900">Assurance Engagements</h3>
      <p class="text-sm text-slate-500">Only Partner and Firm Admin can access this page and download evidence exports.</p>
    </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">Client / Service</th>
            <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">AQMM</th>
            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Closure</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, closure in engagements %}
          <tr>
            <td class="px-4 py-3 text-sm">
              <div class="font-medium text-slate-900">{{ row.client.client_name if row.client else '-' }}</div>
              <div class="text-xs text-slate-500">{{ row.catalogue.service_name if row.catalogue else '-' }}</div>
              <div class="mt-1 text-xs text-slate-500">Partner: {{ row.assigned_partner.full_name if row.assigned_partner and row.assigned_partner.full_name else (row.assigned_partner.email if row.assigned_partner else '-') }}</div>
            </td>
            <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">
              <div>{{ (row.quality_workflow_status or 'not_required')|replace('_',' ')|title }}</div>
              <div class="text-xs text-slate-500">KYC: {{ (row.quality_kyc_status or '-')|replace('_',' ')|title }}</div>
            </td>
            <td class="px-4 py-3 text-sm text-slate-700">{{ (closure.closure_status if closure else 'not_started')|replace('_',' ')|title }}</td>
            <td class="px-4 py-3 text-right text-sm">
              <div class="flex justify-end gap-2">
                <a href="/peer-review/evidence/{{ row.id }}" class="rounded-lg border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50">Preview</a>
                <a href="/peer-review/evidence/{{ row.id }}/export.zip" class="rounded-lg bg-brand-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-brand-700">Export ZIP</a>
              </div>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="5" class="px-4 py-8 text-center text-sm text-slate-500">No assurance engagements found for the selected filter.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
</div>
{% endblock %}