{% extends "backoffice/base.html" %}
{% block page_title %}Messages{% endblock %}
{% block breadcrumb %}Audience <span class="mx-1 text-slate-300">/</span> <span class="font-semibold text-brand-900">Messages</span>{% endblock %}
{% block content %}
<c-page-header title="Messages reçus" subtitle="Demandes envoyées depuis le formulaire de contact." />
<form method="get" class="card mb-4 flex flex-col gap-3 p-4 sm:flex-row">
  <input type="search" name="q" value="{{ request.GET.q }}" placeholder="Rechercher…" class="form-input flex-1" aria-label="Rechercher">
  <div class="flex gap-2">
    <a href="?" class="btn {% if request.GET.filtre != 'non-lus' %}btn-primary{% else %}btn-secondary{% endif %}">Tous</a>
    <a href="?filtre=non-lus" class="btn {% if request.GET.filtre == 'non-lus' %}btn-primary{% else %}btn-secondary{% endif %}">Non lus</a>
  </div>
</form>
<div class="card overflow-hidden">
  {% if page_obj.object_list %}
  <ul class="divide-y divide-slate-100">
    {% for m in page_obj %}
    <li>
      <a href="{% url 'contact:message-detail' m.pk %}" class="flex items-start gap-4 px-5 py-4 hover:bg-brand-50/40 {% if not m.lu %}bg-gold-50/40{% endif %}">
        <span class="mt-1.5 size-2.5 shrink-0 rounded-full {% if m.lu %}bg-transparent{% else %}bg-signal-500{% endif %}" aria-label="{% if m.lu %}Lu{% else %}Non lu{% endif %}"></span>
        <div class="min-w-0 flex-1">
          <div class="flex items-center justify-between gap-3">
            <p class="truncate text-sm {% if m.lu %}font-medium text-slate-700{% else %}font-bold text-brand-900{% endif %}">{{ m.nom }} <span class="font-normal text-slate-400">· {{ m.email }}</span></p>
            <span class="shrink-0 text-xs text-slate-400">{{ m.created_at|date:"d/m/Y H:i" }}</span>
          </div>
          <p class="truncate text-sm font-semibold text-brand-800">{{ m.sujet }}</p>
          <p class="truncate text-sm text-slate-500">{{ m.message|truncatechars:140 }}</p>
        </div>
      </a>
    </li>
    {% endfor %}
  </ul>
  {% else %}<c-empty icon="inbox" title="Aucun message" />{% endif %}
</div>
<div class="mt-5"><c-pagination :page="page_obj" label="messages" /></div>
{% endblock %}