{% extends "admin/base_admin.html" %}
{% set admin_page = "inbox" %}
{% block title %}Message from {{ msg.from_addr }} - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_content %}
  <header class="mb-6">
    <a href="{{ url_for('admin.inbox') }}" class="text-sm text-slate">&larr; Inbox</a>
    <h1 class="text-2xl mt-1">{{ msg.subject or '(no subject)' }}</h1>
  </header>

  <div class="grid-2" style="gap:1.5rem">
    <!-- Metadata + body -->
    <div class="card" style="padding:1.5rem">
      <dl style="display:grid;grid-template-columns:80px 1fr;gap:6px 12px;font-size:0.8125rem;margin-bottom:1rem">
        <dt class="text-slate">From</dt>
        <dd>{{ msg.from_addr }}</dd>
        <dt class="text-slate">To</dt>
        <dd>{{ msg.to_addr }}</dd>
        <dt class="text-slate">Received</dt>
        <dd class="mono">{{ msg.received_at or '-' }}</dd>
        {% if msg.message_id %}
        <dt class="text-slate">Msg ID</dt>
        <dd class="mono text-xs" style="word-break:break-all">{{ msg.message_id }}</dd>
        {% endif %}
      </dl>

      {% if msg.html_body %}
      <h2 class="text-sm font-semibold text-slate mb-2">HTML Body</h2>
      <iframe srcdoc="{{ msg.html_body | e }}" sandbox style="width:100%;min-height:300px;border:1px solid #E2E8F0;border-radius:6px;background:#fff"></iframe>
      {% elif msg.text_body %}
      <h2 class="text-sm font-semibold text-slate mb-2">Text Body</h2>
      <pre style="white-space:pre-wrap;font-size:0.8125rem;padding:1rem;background:#F8FAFC;border-radius:6px;border:1px solid #E2E8F0">{{ msg.text_body }}</pre>
      {% else %}
      <p class="text-slate text-sm">No body content.</p>
      {% endif %}
    </div>

    <!-- Reply -->
    <div class="card" style="padding:1.5rem">
      <h2 class="text-lg mb-4">Reply</h2>
      <form method="post" action="{{ url_for('admin.inbox_reply', msg_id=msg.id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <div class="mb-4">
          <label class="text-xs font-semibold text-slate block mb-1">From</label>
          <select name="from_addr" class="form-input">
            <option value="Padelnomics &lt;hello@notifications.padelnomics.io&gt;">Transactional</option>
            <option value="Padelnomics Leads &lt;leads@notifications.padelnomics.io&gt;">Leads</option>
            <option value="Padelnomics &lt;coach@notifications.padelnomics.io&gt;">Nurture</option>
          </select>
        </div>

        <div class="mb-4">
          <label class="text-xs font-semibold text-slate block mb-1">To</label>
          <input type="text" value="{{ msg.from_addr }}" class="form-input" disabled>
        </div>

        <div class="mb-4">
          <label class="text-xs font-semibold text-slate block mb-1">Body</label>
          <textarea name="body" rows="8" class="form-input" placeholder="Type your reply..." required></textarea>
        </div>

        <button type="submit" class="btn">Send Reply</button>
      </form>
    </div>
  </div>
{% endblock %}
