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

{% block pane %}
  <section class="start">
    {% if sent %}
      <div class="inbox-head">
        <h1>Inbox <span class="count">{{ sent|length }}</span></h1>
        {# The search box needs the script and shows once it has run; the query stays in the URL, so a reload keeps it. #}
        <form class="search" role="search">
          <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.3-4.3"></path></svg>
          <input type="search" name="q" id="q" value="{{ query }}" placeholder="Search · from: to: subject: has:attachment tag:" aria-label="Search the inbox" title="A word matches the subject and the addresses. from:, to: and subject: narrow it to one field, has:attachment keeps messages with attachments, tag: keeps messages with that tag, and a leading - excludes." autocomplete="off" spellcheck="false">
          <button type="button" class="clear" aria-label="Clear the search" title="Clear" hidden><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6L6 18M6 6l12 12"></path></svg></button>
        </form>
      </div>
      {% if tags %}
        {# Every tag of the listed mail with its count. A click puts tag:<name> into the box, so the row needs the script too. #}
        <div class="tagbar" role="group" aria-label="Filter by tag">
          {% for tag, count in tags %}
            <button type="button" class="tag" data-tag="{{ tag }}" aria-pressed="false">{{ tag }} <span class="count">{{ count }}</span></button>
          {% endfor %}
        </div>
      {% endif %}
      <table class="inbox">
        <thead>
          <tr>
            {# The other columns have set widths; the subject gets the rest. #}
            <th scope="col">Subject</th>
            <th scope="col" class="from wide">From</th>
            <th scope="col" class="to">To</th>
            <th scope="col" class="paperclip"><span class="visually-hidden">Attachments</span></th>
            <th scope="col" class="wide num">Size</th>
            <th scope="col" class="time">Time</th>
          </tr>
        </thead>
        <tbody>
          {% for item in sent %}
            {# The row carries every tag for the script; the cell shows three and counts the rest, with the names in the tooltip. #}
            <tr{% if item.meta.tags %} data-tags="{{ item.meta.tags|join:" " }}"{% endif %}>
              <td><a href="{% url 'mail_preview:sent' id=item.meta.id %}">{{ item.meta.subject|default:"(no subject)" }}</a>{% if item.meta.tags %}<span class="tags">{% for tag in item.meta.tags|slice:":3" %}<button type="button" class="tag" data-tag="{{ tag }}" aria-pressed="false">{{ tag }}</button>{% endfor %}{% if item.meta.tags|length > 3 %}<span class="tag more" data-tags="{{ item.meta.tags|slice:"3:"|join:" " }}" title="{{ item.meta.tags|slice:"3:"|join:", " }}" aria-pressed="false">+{{ item.meta.tags|length|add:"-3" }}</span>{% endif %}</span>{% endif %}</td>
              {# The sender's name when the header has one, the address in the tooltip; the script searches the tooltip. #}
              <td class="from wide" title="{{ item.meta.from_email }}"><span class="name">{{ item.meta.from_email|sender }}</span></td>
              <td class="to">{{ item.meta.to|join:", " }}</td>
              <td class="paperclip">
                {% if item.meta.attachments %}
                  <span class="clip" title="{{ item.meta.attachments }} attachment{{ item.meta.attachments|pluralize }}">{% include "django_mail_preview/_clip.html" %}{{ item.meta.attachments }}</span>
                {% endif %}
              </td>
              <td class="wide num">{{ item.meta.size|filesizeformat }}</td>
              <td><time class="ago" datetime="{{ item.meta.date|date:'c' }}" title="{{ item.meta.date|date:'DATETIME_FORMAT' }}">{{ item.meta.date|ago }}</time></td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
      <p class="nomatch" hidden>No messages match.</p>
    {% else %}
      {# The empty inbox: one glyph, one sentence, the one command that changes it. #}
      <div class="welcome">
        <svg class="glyph" viewBox="0 0 24 24" width="48" height="48" aria-hidden="true"><path d="M22 12h-6l-2 3h-4l-2-3H2"></path><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
        <h1>Your inbox is empty</h1>
        {% if backend_active %}
          <p>Send a message from your project and it appears here.</p>
          <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><code>python manage.py shell -c "from django.core.mail import send_mail; send_mail('Hello', 'It works.', 'me@example.com', ['you@example.com'])"</code></pre>
          </div>
        {% else %}
          <p>Point your project at the capture backend and every message it sends appears here.</p>
          <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><code># settings.py
{% if mailers %}MAILERS = {
    "default": {"BACKEND": "django_mail_preview.backends.EmailBackend"},
}{% else %}EMAIL_BACKEND = "django_mail_preview.backends.EmailBackend"{% endif %}</code></pre>
          </div>
        {% endif %}
        {% if not previews %}
          <p class="also">No previews yet? <a href="https://django-mail-preview.readthedocs.io/en/stable/previews.html">Add a <code>previews.py</code></a> to render your templates with sample data.</p>
        {% endif %}
      </div>
    {% endif %}
  </section>
{% endblock pane %}