{% extends "dashboard/base.html" %}

{% block content %}
<div class="reveal mx-auto max-w-2xl">
  <a href="{% url 'dashboard:inbox' %}" class="mb-4 inline-block text-xs font-semibold text-neutral-500 transition hover:text-gold-400">← Kembali ke kotak masuk</a>

  <div class="card card-glow p-6 sm:p-8">
    <div class="flex items-start gap-4 border-b border-white/10 pb-5">
      <span class="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand-500/25 to-gold-400/15 font-display text-base font-bold text-brand-400">{{ item.initial }}</span>
      <div class="min-w-0 flex-1">
        <p class="font-display text-base font-bold text-neutral-50">{{ item.name }}</p>
        <p class="break-all text-xs text-neutral-500">{{ item.email }}</p>
        <p class="mt-0.5 text-xs text-neutral-600">{{ item.created_at|date:"l, d F Y — H:i" }}</p>
      </div>
      {% if item.is_starred %}<span class="text-xl text-gold-400">★</span>{% endif %}
    </div>

    <h2 class="mt-5 font-display text-lg font-bold text-neutral-100">{{ item.subject|default:"(tanpa subjek)" }}</h2>
    <p class="mt-3 whitespace-pre-line text-sm leading-relaxed text-neutral-400">{{ item.message }}</p>

    <div class="mt-7 flex flex-wrap gap-3 border-t border-white/10 pt-5">
      <a href="mailto:{{ item.email }}?subject=Re: {{ item.subject|urlencode }}" class="btn btn-primary btn-shine">Balas via Email</a>
      <button data-copy="{{ item.email }}" data-copy-label="Salin email" class="btn btn-ghost">Salin email</button>
      <form method="post" action="{% url 'dashboard:message_star' item.pk %}">
        {% csrf_token %}
        <button class="btn btn-ghost">{% if item.is_starred %}Hapus tanda penting{% else %}Tandai penting{% endif %}</button>
      </form>
      <form method="post" action="{% url 'dashboard:message_delete' item.pk %}" data-confirm="Hapus pesan ini?">
        {% csrf_token %}
        <button class="btn btn-ghost !text-red-400">Hapus</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}