{{ define "content" }}
<div class="container py-5">
  {{ if .Message }}
    <h2>{{ .Message.Subject }}</h2>
    <p class="text-muted">Received: {{ .Message.CreatedAt.Format "02 Jan 2006 15:04" }}</p>
    <hr>
    <p>{{ .Message.Body }}</p>

    <div class="mt-4">
      <button id="mark-read-btn" data-id="{{ .Message.ID }}" class="btn btn-outline-success">Mark As Read</button>

      <form method="POST" action="/account/messages/archive" class="d-inline">
        <input type="hidden" name="csrf_token" value="{{ $.CSRFToken }}">
        <input type="hidden" name="id" value="{{ .Message.ID }}">
        <button type="submit" class="btn btn-outline-danger">Archive</button>
      </form>

      <a href="/account/messages" class="btn btn-secondary">Back to Inbox</a>
    </div>
  {{ else }}
    <div class="alert alert-danger text-center">
      Message not found or access denied.
    </div>
  {{ end }}
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const btn = document.getElementById("mark-read-btn");
  if (!btn) return;

  btn.addEventListener("click", async function () {
    const id = this.dataset.id;
    const res = await fetch("/account/messages/mark-read", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      body: new URLSearchParams({
        id: id,
        csrf_token: "{{ $.CSRFToken }}"
      })
    });

    if (res.ok) {
      this.classList.remove("btn-outline-success");
      this.classList.add("btn-success");
      this.textContent = "Marked As Read ✔";

      const badge = document.getElementById("message-count");
      if (badge) {
        let count = parseInt(badge.textContent);
        if (!isNaN(count)) {
          count = Math.max(count - 1, 0);
          if (count === 0) {
            badge.remove();
          } else {
            badge.textContent = count;
          }
        }
      }
    } else {
      alert("Failed to mark as read.");
    }
  });
});
</script>
{{ end }}