{% 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-start lg:justify-between">
      <div>
        <p class="text-sm uppercase tracking-[0.18em] text-slate-400">Engagement Review</p>
        <h2 class="mt-1 text-2xl font-semibold">{{ engagement.client.client_name if engagement.client else 'Client' }}</h2>
        <p class="mt-1 text-sm text-slate-500">{{ engagement.display_label }}{% if engagement.current_due_date %} · Due {{ engagement.current_due_date }}{% endif %}</p>
      </div>
      <div class="flex flex-wrap gap-2"><a href="/documents?engagement_id={{ engagement.id }}" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Open Documents</a><a href="/services/engagements" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">All Engagements</a></div>
    </div>
  </div>

  <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
    <section class="space-y-4">
      {% for task in tasks %}
      <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-start lg:justify-between">
          <div><h3 class="font-semibold text-slate-900">{{ loop.index }}. {{ task.task_name }}</h3><p class="mt-1 text-sm text-slate-500">{{ task.description or 'No description.' }}</p><div class="mt-3 flex flex-wrap gap-2 text-xs"><span class="rounded-full bg-slate-100 px-2.5 py-1">{{ task.status_label }}</span><span class="rounded-full bg-slate-100 px-2.5 py-1">{{ task.priority_label }}</span><span class="rounded-full bg-slate-100 px-2.5 py-1">Assigned: {{ task.assignee_display }}</span>{% if task.is_overdue %}<span class="rounded-full bg-red-100 px-2.5 py-1 font-semibold text-red-700">Overdue</span>{% endif %}</div></div>
          <a href="/employees/work/tasks/{{ task.id }}/communication" class="rounded-xl border border-slate-300 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">Communication</a>
        </div>
        <form method="post" action="/partner/tasks/{{ task.id }}/review" class="mt-4 grid gap-3 rounded-2xl bg-slate-50 p-4 lg:grid-cols-[180px_minmax(0,1fr)_auto]">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <select name="action" class="rounded-xl border border-slate-300 px-3 py-2 text-sm"><option value="approve">Approve</option><option value="send_rework">Send for Rework</option><option value="clarification">Request Clarification</option></select>
          <input name="message" placeholder="Optional partner note" class="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 hover:bg-brand-700">Submit</button>
        </form>
        {% if task.comments %}
        <div class="mt-4 space-y-2">
          {% for comment in task.comments[:3] %}
          <div class="rounded-2xl border border-slate-200 p-3 text-sm"><div class="text-xs text-slate-500">{{ comment.comment_type|replace('_',' ')|title }} · {{ comment.created_at_utc }}</div><div class="mt-1 text-slate-700">{{ comment.message }}</div></div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      {% else %}
      <div class="rounded-3xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500">No tasks found for this engagement.</div>
      {% endfor %}
    </section>

    <aside class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="flex items-center justify-between gap-3"><div><h3 class="font-semibold">Documents</h3><p class="text-sm text-slate-500">Related engagement documents.</p></div><span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold">{{ documents|length }}</span></div>
      <div class="mt-4 space-y-3">
        {% for doc in documents %}
        <div class="rounded-2xl border border-slate-200 p-4"><div class="font-medium text-slate-900">{{ doc.title }}</div><div class="mt-1 text-xs text-slate-500">{{ doc.document_type }} · v{{ doc.current_version_no }} · {{ doc.status|title }}</div></div>
        {% else %}
        <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500">No documents uploaded yet.</div>
        {% endfor %}
      </div>
    </aside>
  </div>
</div>
{% endblock %}