{% extends "backoffice/base.html" %}
{% block page_title %}{{ msg.sujet }}{% endblock %}
{% block breadcrumb %}<a href="{% url 'contact:message-list' %}" class="hover:text-brand-800">Messages</a> <span class="mx-1 text-slate-300">/</span> <span class="font-semibold text-brand-900">{{ msg.sujet|truncatechars:40 }}</span>{% endblock %}
{% block content %}
<div class="mx-auto max-w-3xl">
  <c-page-header title="{{ msg.sujet }}" back="{% url 'contact:message-list' %}">
    <c-slot name="toolbar">
      <c-button href="mailto:{{ msg.email }}?subject=Re: {{ msg.sujet|urlencode }}" icon="mail">Répondre</c-button>
      <c-post-button action="{% url 'contact:message-detail' msg.pk %}" variant="secondary" size="">Marquer non lu</c-post-button>
      <c-post-button action="{% url 'contact:message-delete' msg.pk %}" variant="danger-ghost" size="" icon="trash" confirm="Supprimer ce message ?" confirm_label="Supprimer">Supprimer</c-post-button>
    </c-slot>
  </c-page-header>
  <div class="card">
    <div class="flex items-center gap-4 border-b border-slate-100 p-5">
      <span class="flex size-11 items-center justify-center rounded-full bg-brand-800 font-bold text-white">{{ msg.nom|slice:":1"|upper }}</span>
      <div><p class="font-bold text-brand-900">{{ msg.nom }}</p><p class="text-sm text-slate-500">{{ msg.email }} · {{ msg.created_at|date:"l d F Y à H:i" }}</p></div>
    </div>
    <div class="p-5 text-[15px] leading-relaxed whitespace-pre-line text-slate-700">{{ msg.message }}</div>
  </div>
</div>
{% endblock %}