{% extends "ui/templates/base/layout.html" %}
{% block content %}
{% include "modules/consultants/templates/consultants/_consultant_tabs.html" %}
<div class="space-y-6">
  <div class="flex flex-wrap items-start justify-between gap-4"><div><h2 class="text-xl font-semibold text-slate-900">{{ client.client_name }} — {{ catalogue.service_name }}</h2><p class="text-sm text-slate-500">Engagement progress report • {{ subscription.financial_year }}{% if subscription.assessment_year %} • AY {{ subscription.assessment_year }}{% endif %}</p></div><a href="/consultant/work" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Back to Engagement Report</a></div>

  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs uppercase tracking-wide text-slate-500">Overall Progress</div><div class="mt-2 text-3xl font-bold text-slate-900">{{ progress_percentage }}%</div><div class="mt-3 h-3 overflow-hidden rounded-full bg-slate-100"><div class="h-full rounded-full bg-brand-600" style="width: {{ progress_percentage }}%"></div></div></div>
    <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs uppercase tracking-wide text-slate-500">Current Stage</div><div class="mt-2 text-lg font-semibold text-blue-700">{{ external_stage }}</div></div>
    <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs uppercase tracking-wide text-slate-500">Pending From</div><div class="mt-2 text-lg font-semibold text-slate-900">{{ pending_from }}</div></div>
    <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs uppercase tracking-wide text-slate-500">Statutory / Target Due Date</div><div class="mt-2 text-lg font-semibold {% if is_overdue %}text-red-700{% else %}text-slate-900{% endif %}">{{ due_date.strftime('%d-%m-%Y') if due_date else 'Not set' }}</div>{% if is_overdue %}<div class="mt-1 text-xs font-semibold text-red-700">Overdue</div>{% endif %}</div>
  </div>

  <div class="rounded-2xl border {% if blocker_code != 'none' %}border-amber-200 bg-amber-50{% else %}border-emerald-200 bg-emerald-50{% endif %} p-5 shadow-soft"><div class="text-xs uppercase tracking-wide {% if blocker_code != 'none' %}text-amber-700{% else %}text-emerald-700{% endif %}">Current Blocker</div><div class="mt-2 text-lg font-semibold {% if blocker_code != 'none' %}text-amber-900{% else %}text-emerald-900{% endif %}">{{ blocker_text }}</div><p class="mt-2 text-sm text-slate-600">Internal staff assignments, task statuses and private review remarks are intentionally not displayed.</p></div>

  <div class="grid gap-6 xl:grid-cols-[1fr_380px]">
    <section class="rounded-2xl border border-slate-200 bg-white shadow-soft"><div class="border-b border-slate-200 px-5 py-4"><h3 class="font-semibold text-slate-900">Meaningful Engagement Updates</h3><p class="text-xs text-slate-500">Only communications shared with the consultant are shown.</p></div><div class="divide-y divide-slate-100">{% for note in communications %}<div class="p-5"><div class="flex flex-wrap items-center justify-between gap-2"><div class="text-sm font-semibold text-slate-900">{{ note.comment_type.replace('_',' ').title() }}</div><div class="text-xs text-slate-500">{{ note.created_at_utc.strftime('%d-%m-%Y %H:%M') if note.created_at_utc else '' }}</div></div><div class="mt-2 whitespace-pre-line rounded-xl bg-slate-50 p-3 text-sm text-slate-700">{{ note.message }}</div></div>{% else %}<div class="p-6 text-sm text-slate-500">No consultant-visible update has been shared yet.</div>{% endfor %}</div></section>
    <aside class="space-y-6"><div class="rounded-2xl border border-slate-200 bg-white shadow-soft"><div class="border-b border-slate-200 px-4 py-3"><h3 class="font-semibold text-slate-900">Pending Requirements</h3></div><div class="divide-y divide-slate-100">{% for request_row in pending_requirements %}<div class="p-4"><div class="font-semibold text-slate-900">{{ request_row.title }}</div><div class="mt-1 text-xs text-slate-500">{{ request_row.request_type.replace('_',' ').title() }} • Pending from {{ request_row.requested_from.replace('_',' ').title() }}{% if request_row.due_date %} • Due {{ request_row.due_date.strftime('%d-%m-%Y') }}{% endif %}</div>{% if request_row.description %}<div class="mt-2 text-sm text-slate-600">{{ request_row.description }}</div>{% endif %}</div>{% else %}<div class="p-4 text-sm text-slate-500">No pending requirement is shared with you.</div>{% endfor %}</div></div>
    {% if assigned_tasks %}<div class="rounded-2xl border border-indigo-200 bg-indigo-50 shadow-soft"><div class="border-b border-indigo-200 px-4 py-3"><h3 class="font-semibold text-slate-900">My Assigned Execution Tasks</h3></div><div class="divide-y divide-indigo-100">{% for task in assigned_tasks %}<a href="/consultant/assignments/{{ task.id }}" class="block p-4 hover:bg-indigo-100"><div class="font-semibold text-indigo-900">{{ task.task_name }}</div><div class="mt-1 text-xs text-indigo-700">{{ task.consultant_assignment_status.replace('_',' ').title() }}{% if task.consultant_due_date %} • Due {{ task.consultant_due_date.strftime('%d-%m-%Y') }}{% endif %}</div></a>{% endfor %}</div></div>{% endif %}</aside>
  </div>
</div>
{% endblock %}