<div class="space-y-6">
  <div class="af-card">
    <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
      <div><h3 class="text-lg font-semibold text-slate-900">Clarifications</h3><p class="mt-1 text-sm text-slate-500">Firm messages visible to consultant and consultant replies.</p></div>
      <a href="/consultant/communications" class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800">Open Messages</a>
    </div>
  </div>

  <section class="grid gap-6 xl:grid-cols-2">
    <div class="af-card">
      <h4 class="font-semibold text-slate-900">Pending From Firm</h4>
      <div class="mt-4 space-y-3">
        {% for comment, task, subscription, client, catalogue in payload.recent_firm_messages %}
        <a href="/consultant/communications/{{ comment.id }}" class="block rounded-xl border border-slate-200 p-3 hover:bg-slate-50">
          <div class="font-semibold text-slate-900">{{ client.client_name }} — {{ catalogue.service_name }}</div>
          <div class="text-xs text-slate-500">{{ task.task_name }} • {{ comment.created_at_utc.strftime('%d-%m-%Y %H:%M') if comment.created_at_utc else '' }}</div>
          <div class="mt-2 line-clamp-2 text-xs text-slate-600">{{ comment.message }}</div>
        </a>
        {% else %}
        <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No pending firm messages.</div>
        {% endfor %}
      </div>
    </div>
    <div class="af-card">
      <h4 class="font-semibold text-slate-900">My Recent Replies</h4>
      <div class="mt-4 space-y-3">
        {% for comment, task, subscription, client, catalogue in payload.recent_consultant_replies %}
        <a href="/consultant/communications/{{ comment.id }}" class="block rounded-xl border border-slate-200 p-3 hover:bg-slate-50">
          <div class="font-semibold text-slate-900">{{ client.client_name }} — {{ catalogue.service_name }}</div>
          <div class="text-xs text-slate-500">{{ task.task_name }} • {{ comment.created_at_utc.strftime('%d-%m-%Y %H:%M') if comment.created_at_utc else '' }}</div>
          <div class="mt-2 line-clamp-2 text-xs text-slate-600">{{ comment.message }}</div>
        </a>
        {% else %}
        <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No consultant replies yet.</div>
        {% endfor %}
      </div>
    </div>
  </section>
</div>
