{% extends "base.html" %}
{% from "components/ui.html" import action, breadcrumb, csrf_field, folder_options with context %}
{% block title %}{{ message.subject | or_missing }} · {{ APP_NAME }}{% endblock %}
{% block heading %}{{ message.subject | or_missing }}{% endblock %}
{% block subheading %}{{ breadcrumb(trail) }}{% endblock %}
{% block actions %}
{% if can.write %}
{% for verb, label in [("reply", "Reply"), ("reply_all", "Reply to all"), ("forward", "Forward")] %}
<a class="btn" href="/ui/accounts/{{ account.id }}/compose?{{ [('original', message.id), ('action', verb)] | urlencode }}">{{ label }}</a>
{% endfor %}
{% endif %}
{% if can_raw %}<a class="btn" href="/ui/accounts/{{ account.id }}/mail/{{ message.id }}/raw">Download original</a>{% endif %}
{% endblock %}
{% block content %}
<p class="back"><a href="{{ back_to }}">← Back to the list</a></p>
<section class="card">
  <div class="body">
    <dl class="facts">
      <dt>From</dt><dd>{{ message.sender | address }}</dd>
      <dt>To</dt><dd>{{ message.to | addresses }}</dd>
      {% if message.cc %}<dt>Cc</dt><dd>{{ message.cc | addresses }}</dd>{% endif %}
      {% if message.bcc %}<dt>Bcc</dt><dd>{{ message.bcc | addresses }}</dd>{% endif %}
      {% if message.reply_to %}<dt>Reply to</dt><dd>{{ message.reply_to | addresses }}</dd>{% endif %}
      <dt>Date</dt><dd>{{ message.date | when }}</dd>
      <dt>Flags</dt>
      <dd>
        {{ "unread" if message.unread else "read" }}{% if message.starred %}, starred{% endif %}
        {% for keyword in message.keywords %}<span class="tag">{{ keyword }}</span> {% endfor %}
      </dd>
      <dt>Id</dt><dd class="mono">{{ message.id }}</dd>
    </dl>
  </div>
</section>

{% set url = "/ui/accounts/" ~ account.id ~ "/mail/" ~ message.id %}
{% if can.change or can.trash or can.purge %}
<section class="card">
  <div class="body toolbar">
    {% if can.change %}
    {{ action(url ~ "/flags", "Mark unread" if not message.unread else "Mark read", fields={"unread": "0" if message.unread else "1"}, cls="") }}
    {{ action(url ~ "/flags", "Unstar" if message.starred else "Star", fields={"starred": "0" if message.starred else "1"}, cls="") }}
    {% if tree %}
    <form class="inline toolbar" method="post" action="{{ url }}/move">
      {{ csrf_field() }}
      <select name="folder" aria-label="Move to folder">
        {{ folder_options(tree, message.folder_ids) }}
      </select>
      <button type="submit">Move</button>
    </form>
    {% endif %}
    {% endif %}
    <span class="grow"></span>
    {% if can.trash and not in_trash %}{{ action(url ~ "/delete", "Move to the trash", fields={"back": "/ui/accounts/" ~ account.id ~ "/mail"}, cls="") }}{% endif %}
    {% if can.purge %}{{ action(url ~ "/delete", "Delete for good", confirm="Delete this message for good? This cannot be undone.", cls="danger", fields={"permanent": "1", "back": "/ui/accounts/" ~ account.id ~ "/mail"}) }}{% endif %}
  </div>
</section>
{% endif %}

{% if message.attachments %}
<section class="card">
  <header><h2>Attachments</h2><span class="meta">{{ message.attachments | length }}</span></header>
  <div class="body tight">
    <table>
      <tbody>
        {% for a in message.attachments %}
        <tr>
          <td class="name">{{ a.filename | or_missing }}<span class="sub">{{ a.content_type }}{% if a.inline %}, inline{% endif %}</span></td>
          <td class="num">{{ a.size | size }}</td>
          <td class="actions">{% if can_attachment %}<a class="btn small" href="/ui/accounts/{{ account.id }}/mail/{{ message.id }}/attachments/{{ a.id | segment }}">Download</a>{% endif %}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endif %}

<section class="card">
  <header>
    <h2>Message</h2>
    {% if from_html %}<span class="meta">Written as HTML, shown here as text.</span>{% elif message.html_body %}<span class="meta">Also has an HTML part, not shown.</span>{% endif %}
  </header>
  <div class="body">
    {% if body %}<pre class="mail-body">{{ body }}</pre>{% else %}<div class="empty">No text.</div>{% endif %}
  </div>
</section>
{% endblock %}