{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% include "modules/partners/templates/partners/_partner_tabs.html" %}

<div class="space-y-6">
  <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
    <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
      <div><h2 class="text-xl font-semibold">My Client Portfolio</h2><p class="text-sm text-slate-500">Client engagements assigned to you as engagement partner or review partner.</p></div>
      <form method="get" class="flex gap-2"><input name="q" value="{{ q or '' }}" placeholder="Search" class="w-72 rounded-xl border border-slate-300 px-3 py-2 text-sm"><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Search</button></form>
    </div>
  </div>

  <div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
    {% for engagement in payload.engagements %}
    <a href="/partner/engagements/{{ engagement.id }}" class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft transition hover:border-brand-300 hover:bg-brand-50/30">
      <div class="flex items-start justify-between gap-3">
        <div><h3 class="font-semibold text-slate-900">{{ engagement.client_display }}</h3><p class="mt-1 text-sm text-slate-500">{{ engagement.display_label }}</p></div>
        <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700">{{ engagement.status|replace('_',' ')|title }}</span>
      </div>
      <div class="mt-4 grid grid-cols-3 gap-2 text-center text-xs">
        <div class="rounded-2xl bg-slate-50 p-3"><div class="text-lg font-semibold">{{ engagement.task_counts.total }}</div><div class="text-slate-500">Tasks</div></div>
        <div class="rounded-2xl bg-slate-50 p-3"><div class="text-lg font-semibold">{{ engagement.task_counts.open }}</div><div class="text-slate-500">Open</div></div>
        <div class="rounded-2xl bg-slate-50 p-3"><div class="text-lg font-semibold">{{ engagement.task_counts.completed }}</div><div class="text-slate-500">Done</div></div>
      </div>
      <div class="mt-4 text-xs text-slate-500">{% if engagement.current_due_date %}Due: {{ engagement.current_due_date }}{% else %}No due date configured{% endif %}{% if engagement.is_overdue %}<span class="ml-2 rounded-full bg-red-100 px-2 py-1 font-semibold text-red-700">Overdue</span>{% endif %}</div>
    </a>
    {% else %}
    <div class="rounded-3xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500 xl:col-span-3">No assigned client engagements found.</div>
    {% endfor %}
  </div>
</div>
{% endblock %}