{% from "components/ui.html" import icon, pager, tick_all %}
{# A page of messages. ``emails``: the account column, for lists across
   accounts, None for one account's list. ``selectable``: a tick box per
   message for the form ``batch``. ``open_as``: "mail", or "drafts" for
   links that open the draft editor. #}
{% if messages %}
<div class="table-scroll">
  <table>
    <thead>
      <tr>
        {% if selectable %}<th class="tick">{{ tick_all("batch", "ids", "Tick every message") }}</th>{% endif %}
        {% if emails is not none %}<th>Account</th>{% endif %}
        <th>From</th><th>Subject</th><th>Date</th><th></th>
      </tr>
    </thead>
    <tbody>
      {% for m in messages %}
      <tr class="{{ 'unread' if m.unread }}">
        {% if selectable %}<td class="tick"><input type="checkbox" name="ids" value="{{ m.id }}" form="batch" aria-label="Select {{ m.subject | or_missing }}" /></td>{% endif %}
        {% if emails is not none %}<td class="muted">{{ emails.get(m.account_id, m.account_id) }}</td>{% endif %}
        <td>{{ m.sender | address }}</td>
        <td class="name">
          <a href="/ui/accounts/{{ m.account_id }}/{{ open_as }}/{{ m.id }}">{{ m.subject | or_missing }}</a>
          {% if m.snippet %}<span class="sub">{{ m.snippet }}</span>{% endif %}
        </td>
        <td>{{ m.date | when }}</td>
        <td>
          {% if m.starred %}<span class="tag warn">{{ icon("star-fill", "starred") }}</span>{% endif %}
          {% if m.has_attachments %}<span class="tag">{{ icon("paperclip", "has attachments") }}</span>{% endif %}
          {% if "$answered" in m.keywords %}<span class="tag">{{ icon("reply", "answered") }}</span>{% endif %}
          {% for keyword in m.keywords | own_keywords %}<span class="tag">{{ keyword }}</span>{% endfor %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="empty">No messages{{ " match the search" if fields else "" }}.</div>
{% endif %}
{{ pager(pages) }}