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

{% block title %}{{ msg.subject }} — ign8mail{% endblock %}

{% block extra_css %}
<style>
  .msg-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .msg-subject-line {
    font-size: 1rem;
    font-weight: 600;
  }
  .msg-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .meta-item {
    font-size: 0.78rem;
    color: var(--muted);
  }
  .meta-item strong {
    color: var(--muted2);
    font-weight: 500;
  }
  .msg-actions {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
  }
  .msg-body {
    flex: 1;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
  }
  .body-text {
    font-family: var(--mono);
    font-size: 0.82rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
    line-height: 1.6;
  }
  .body-html-frame {
    width: 100%;
    border: none;
    min-height: 500px;
    background: #fff;
    border-radius: 6px;
  }
  .back-link {
    font-size: 0.78rem;
    color: var(--muted);
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    display: inline-block;
    border-bottom: 1px solid var(--border);
    width: 100%;
  }
  .back-link:hover { color: var(--text); }
  .attachments {
    padding: 0.75rem 1.5rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .attachments-head {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.15rem;
  }
  .att-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.75rem;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.82rem;
    max-width: max-content;
    transition: background 0.1s;
  }
  .att-item:hover { background: var(--border2); }
  .att-name { font-family: var(--mono); }
  .att-meta { font-size: 0.7rem; color: var(--muted); font-family: var(--mono); }
</style>
{% endblock %}

{% block content %}
<a class="back-link" href="{% url 'mailbox' name %}">← {{ name }}@{{ domain }}</a>
<div class="msg-header">
  <div class="msg-subject-line">{{ msg.subject }}</div>
  <div class="msg-meta">
    <span class="meta-item"><strong>From</strong> {{ msg.sender }}</span>
    <span class="meta-item"><strong>To</strong> {{ email }}</span>
    <span class="meta-item"><strong>Date</strong> {{ msg.date }}</span>
  </div>
</div>
<div class="msg-actions">
  <a class="btn" href="{% url 'compose' %}?to={{ msg.sender|urlencode }}&subject=Re: {{ msg.subject|urlencode }}&reply_from={{ email }}">Reply</a>
</div>
<div class="msg-body">
  {% if msg.body_html %}
  <iframe class="body-html-frame"
          sandbox="allow-same-origin"
          srcdoc="{{ msg.body_html|escape }}"
          onload="this.style.height=this.contentDocument.body.scrollHeight+'px'"></iframe>
  {% elif msg.body_text %}
  <div class="body-text">{{ msg.body_text }}</div>
  {% else %}
  <p style="color:var(--muted);font-size:0.85rem">No message body.</p>
  {% endif %}
</div>
{% if msg.attachments %}
<div class="attachments">
  <div class="attachments-head">Attachments ({{ msg.attachments|length }})</div>
  {% for att in msg.attachments %}
  <a class="att-item" href="{% url 'attachment' name=name uid=msg.uid index=att.index %}" target="_blank" rel="noopener">
    <span class="att-name">📎 {{ att.filename }}</span>
    <span class="att-meta">{{ att.content_type }} · {{ att.size|filesizeformat }}</span>
  </a>
  {% endfor %}
</div>
{% endif %}
{% endblock %}