<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">Messages from Firm</h3><p class="mt-1 text-sm text-slate-500">Client-visible task comments, clarifications and updates.</p></div>
    <a href="/client/messages" class="af-btn af-btn-primary">Open Messages</a>
  </div>
  <div class="mt-5 space-y-3">
    {% for note in client_visible_comments or [] %}
    <div class="rounded-2xl border border-slate-200 p-4 text-sm">
      <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
        <div class="font-semibold text-slate-900">{{ note.task.task_name if note.task else (note.subscription.catalogue.service_name if note.subscription and note.subscription.catalogue else 'Message') }}</div>
        <div class="text-xs text-slate-500">{{ note.created_at_utc.strftime('%d-%m-%Y %I:%M %p') if note.created_at_utc else '' }}</div>
      </div>
      <p class="mt-2 text-slate-700">{{ note.message }}</p>
      {% if note.task %}<a href="/client/engagements/{{ note.task.subscription_id }}" class="mt-3 inline-flex text-xs font-semibold text-brand-700 hover:underline">Open related service</a>{% endif %}
    </div>
    {% else %}
    <div class="rounded-2xl border border-dashed border-slate-300 p-6 text-sm text-slate-500">No messages yet.</div>
    {% endfor %}
  </div>
</div>
