{% extends "cms/base.html" %}
{% block title %}Email #{{ log.pk }}{% endblock %}
{% block page_title %}Email Log{% endblock %}

{% block extra_head %}
<style>
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
  .btn-cms-outline {
    background:#fff;color:#033152;font-weight:600;
    border:1px solid #033152;padding:.3rem .8rem;border-radius:7px;
    cursor:pointer;font-size:.75rem;line-height:1.2;transition:all .15s;
    display:inline-flex;align-items:center;gap:.35rem;
    text-decoration:none;box-sizing:border-box;text-transform:none;letter-spacing:0;
  }
  a.btn-cms-outline:hover,
  button.btn-cms-outline:hover,
  .btn-cms-outline:hover { background:#033152;color:#fff;text-decoration:none;opacity:1; }
  .btn-cms-outline:hover i { color:#fff; }
  .field-label {
    width:120px;color:var(--cms-muted);font-size:.8rem;font-weight:600;
    white-space:nowrap;vertical-align:middle;padding:.6rem 1rem;
  }
  .field-td { padding:.5rem 1rem .5rem 0;font-size:.875rem;color:var(--cms-text); }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <div>
    <h2>Email #{{ log.pk }}</h2>
    <div style="font-size:.82rem;color:var(--cms-muted);margin-top:.15rem">{{ log.subject|truncatechars:60 }}</div>
  </div>
  <a href="{% url 'cms_email_log' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

<div class="row g-3">

  <div class="col-lg-8">

    <div class="cms-card" style="padding:0;overflow:hidden">
      <div class="section-head" style="display:flex;align-items:center;justify-content:space-between">
        <span><i class="fa-solid fa-eye me-1"></i>{% if log.html_body or rebuilt_html %}Email Preview{% else %}Email Record{% endif %}</span>
        {% if related_url %}<a href="{{ related_url }}" class="btn-cms-outline"><i class="fa-solid fa-arrow-up-right-from-square" style="font-size:.7rem"></i>{{ related_label }}</a>{% endif %}
      </div>
      {% if not log.html_body and rebuilt_html %}
        <iframe srcdoc="{{ rebuilt_html }}" style="width:100%;border:none;min-height:500px" onload="try{this.style.height=(this.contentWindow.document.body.scrollHeight+32)+'px';}catch(e){}"></iframe>
      {% elif not log.html_body %}
        <div style="padding:2rem 1.25rem;text-align:center;color:var(--cms-muted);font-size:.85rem;line-height:1.7">
          <i class="fa-regular fa-file-lines" style="font-size:1.6rem;opacity:.35;display:block;margin-bottom:.6rem"></i>
          No copy of this message was kept, so there is nothing to preview.<br>
          The record of who it went to and when is on the right.
        </div>
      {% else %}
        <iframe srcdoc="{{ log.html_body }}" style="width:100%;border:none;min-height:500px" onload="try{this.style.height=(this.contentWindow.document.body.scrollHeight+32)+'px';}catch(e){}"></iframe>
      {% endif %}
    </div>

  </div>

  <div class="col-lg-4">

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Details</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">To</td>
            <td class="field-td">{{ log.to_email }}</td>
          </tr>
          <tr>
            <td class="field-label">From</td>
            <td class="field-td">{{ log.from_email|default:"(default)" }}</td>
          </tr>
          <tr>
            <td class="field-label">Subject</td>
            <td class="field-td" style="font-weight:600">{{ log.subject }}</td>
          </tr>
          <tr>
            <td class="field-label">Sent</td>
            <td class="field-td">{{ log.sent_at|date:"d M Y H:i:s" }}</td>
          </tr>
          <tr>
            <td class="field-label">Status</td>
            <td class="field-td">
              {% if log.ok %}
                <span style="color:#16a34a"><i class="fa-solid fa-circle-check me-1"></i>Sent</span>
              {% else %}
                <span style="color:#dc2626"><i class="fa-solid fa-circle-xmark me-1"></i>Failed</span>
                {% if log.error %}<div style="font-size:.8rem;color:#dc2626;margin-top:.3rem">{{ log.error }}</div>{% endif %}
              {% endif %}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="d-flex gap-2 mb-3">
      <a href="{% url 'cms_email_resend' log.pk %}" class="btn-cms w-100" style="display:block;text-align:center"
         onclick="return confirm('Resend this email to {{ log.to_email }}?')">
        <i class="fa-solid fa-paper-plane me-1"></i>Resend Email
      </a>
    </div>

    <a href="{% url 'cms_email_log_delete' log.pk %}" class="btn-cms-danger w-100" style="text-align:center;display:block">
      <i class="fa-solid fa-trash me-1"></i>Delete Record
    </a>

  </div>

</div>
{% endblock %}