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

{% block title %}{{ parsed.subject|default:"(no subject)" }} · Mail preview{% endblock %}

{% block page %}message{% endblock %}

{% block pane %}
  <article class="message">
    <header class="meta">
      <h1>{{ parsed.subject|default:"(no subject)" }}</h1>
      <div class="sender">
        <span class="avatar" aria-hidden="true">{{ initial }}</span>
        <div class="who">
          <strong class="from">{{ parsed.from_|default:"(no sender)" }}</strong>
          <p class="route">
            {% if parsed.to %}<span>to {{ parsed.to }}</span>{% endif %}
            {% if parsed.cc %}<span>cc {{ parsed.cc }}</span>{% endif %}
            {% if bcc %}<span>bcc {{ bcc|join:", " }}</span>{% endif %}
            {% if parsed.reply_to %}<span>reply-to {{ parsed.reply_to }}</span>{% endif %}
          </p>
        </div>
        <div class="aside">
          {% if preview %}
            <code>{{ preview.id }}</code>
          {% else %}
            <time class="date" datetime="{{ meta.date|date:'c' }}">{{ meta.date|date:"DATETIME_FORMAT" }}</time>
            {% if meta.alias %}<span class="mailer">via {{ meta.alias }}</span>{% endif %}
          {% endif %}
          <div class="actions">
            {% if meta %}
              {# The neighbours in the list, by id; j and k follow them. An end of the list is a dimmed icon without a link. #}
              <span class="nav">
                {% if newer_url %}
                  <a href="{{ newer_url }}" rel="prev" class="icon" title="Newer message" aria-label="Newer message"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6"></path></svg></a>
                {% else %}
                  <span class="icon" aria-disabled="true" title="No newer message"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6"></path></svg></span>
                {% endif %}
                {% if older_url %}
                  <a href="{{ older_url }}" rel="next" class="icon" title="Older message" aria-label="Older message"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18l6-6-6-6"></path></svg></a>
                {% else %}
                  <span class="icon" aria-disabled="true" title="No older message"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18l6-6-6-6"></path></svg></span>
                {% endif %}
              </span>
            {% endif %}
            <a href="{{ eml_url }}" class="icon" title="Download .eml" aria-label="Download .eml"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"></path></svg></a>
            {% if delete_url %}
              <form method="post" action="{{ delete_url }}" data-confirm="Delete this message?">
                {% csrf_token %}
                <button type="submit" class="icon danger" title="Delete" aria-label="Delete"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"></path></svg></button>
              </form>
            {% endif %}
          </div>
        </div>
      </div>
      {% if preview.description %}
        <p class="description">{{ preview.description }}</p>
      {% endif %}
    </header>
    <nav class="tabs" aria-label="Message views">
      {% for name, label, href in tabs %}
        <a href="{{ href }}" data-tab="{{ name }}"{% if name == tab %} aria-current="page"{% endif %}>{{ label }}</a>
      {% endfor %}
    </nav>
    <section class="tab" data-tab="html"{% if tab != "html" %} hidden{% endif %}>
      {% if parsed.html is not None %}
        {# The width controls need the script and only show once it has run; the link works without it. #}
        <div class="toolbar">
          <div class="width" role="group" aria-label="Frame width">
            <span class="presets">
              <button type="button" data-width="320" title="320 px" aria-label="320 px wide"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="2" width="8" height="20" rx="2"></rect><path d="M11 18h2"></path></svg></button>
              <button type="button" data-width="375" title="375 px" aria-label="375 px wide"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="2" width="12" height="20" rx="2"></rect><path d="M11 18h2"></path></svg></button>
              <button type="button" data-width="600" title="600 px" aria-label="600 px wide"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="2" width="16" height="20" rx="2"></rect><path d="M11 18h2"></path></svg></button>
              <button type="button" data-width="768" title="768 px" aria-label="768 px wide"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="M18 11v2"></path></svg></button>
              <button type="button" data-width="full" title="Full width" aria-label="Full width"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="4" width="20" height="13" rx="2"></rect><path d="M8 21h8M12 17v4"></path></svg></button>
            </span>
            <span class="custom"><input type="number" inputmode="numeric" min="240" max="4000" aria-label="Width in pixels"><span aria-hidden="true">px</span></span>
          </div>
          <a href="{{ html_url }}" target="_blank" rel="noopener" class="newtab"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><path d="M15 3h6v6M10 14L21 3"></path></svg>Open in new tab</a>
        </div>
        <iframe src="{{ html_url }}" sandbox="allow-popups allow-popups-to-escape-sandbox" title="HTML part"></iframe>
      {% else %}
        <p class="empty">The message has no HTML part.</p>
      {% endif %}
    </section>
    {# Copy needs the script and shows once it has run. #}
    <section class="tab" data-tab="text"{% if tab != "text" %} hidden{% endif %}>
      {% if parsed.text is not None %}
        <div class="copyable">
          <button type="button" class="copy"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg><span>Copy</span></button>
          <pre>{{ parsed.text }}</pre>
        </div>
      {% else %}
        <p class="empty">The message has no plain-text part.</p>
      {% endif %}
    </section>
    {# The source carries every attachment base64-encoded, so it is only on the page when asked for; the Source tab then navigates rather than switching in place. #}
    {% if tab == "source" %}
      <section class="tab" data-tab="source">
        <div class="copyable">
          <button type="button" class="copy"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg><span>Copy</span></button>
          <pre>{{ parsed.source }}</pre>
        </div>
      </section>
    {% endif %}
    <section class="tab" data-tab="headers"{% if tab != "headers" %} hidden{% endif %}>
      <table>
        {% for name, value in parsed.headers %}
          <tr>
            <th scope="row">{{ name }}</th>
            <td>{{ value }}</td>
          </tr>
        {% endfor %}
      </table>
    </section>
    <section class="tab" data-tab="mime"{% if tab != "mime" %} hidden{% endif %}>
      <ul class="mime">
        {% include "django_mail_preview/_mime.html" with node=parsed.tree %}
      </ul>
    </section>
    {% if parts %}
      <section class="parts">
        <h2>Parts <span class="count">{{ parts|length }}</span></h2>
        <ul>
          {% for part, href in parts %}
            <li>
              {% if part.content_type|slice:":6" == "image/" %}
                <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="M21 15l-5-5L5 21"></path></svg>
              {% else %}
                <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg>
              {% endif %}
              <a href="{{ href }}">{% if part.filename %}{{ part.filename }}{% else %}part-{{ part.index }}{% endif %}</a>
              <span class="type">{{ part.content_type }}</span>
              {% if part.is_inline %}<span class="label">inline</span>{% endif %}
              <span class="size">{{ part.size|filesizeformat }}</span>
            </li>
          {% endfor %}
        </ul>
      </section>
    {% endif %}
  </article>
{% endblock pane %}