{% extends "comms/admin/rendered-message-admin-field-base.html" %}

{% load comms i18n %}

{% block message_class %}email{% endblock %}

{% block headers %}
  <dt>{% trans "From" %}:</dt>
  <dd>{{ message.sender }}</dd>

  <dt>{% trans "To" %}:</dt>
  <dd>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-at" viewBox="0 0 16 16">
      <path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914"/>
    </svg>
    {% for recipient in message.recipients %}
      <span>{{ recipient }}</span>{% if not forloop.last %}, {% endif %}
    {% endfor %}
  </dd>
{% endblock %}

{% block tabs %}
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#message-body-html-{{ message.unique_id }}" type="button">
      {% trans "HTML" %}
    </button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#message-body-text-{{ message.unique_id }}" type="button">
      {% trans "Plain text" %}
    </button>
  </li>
  {% if message.persisted %}
    <li class="nav-item">
      <button class="nav-link" data-bs-toggle="tab" data-bs-target="#message-events-{{ message.unique_id }}" type="button">
        {% trans "Events" %}
      </button>
    </li>
  {% else %}
    <li class="nav-item">
      <button class="nav-link" data-bs-toggle="tab" data-bs-target="#message-debug-{{ message.unique_id }}" type="button">
        {% trans "Debug" %}
      </button>
    </li>
  {% endif %}
{% endblock %}

{% block tabs_content %}
  <div class="tab-pane fade show active message-html" id="message-body-html-{{ message.unique_id }}">
    <iframe srcdoc="{{ message.get_standalone_body_html }}" class="message-frame"></iframe>
  </div>
  <div class="tab-pane fade message-text" id="message-body-text-{{ message.unique_id }}">
    <pre class="message-plaintext">{{ message.get_body_text|linkify:"_blank" }}</pre>
  </div>
  {% if message.persisted %}
    <div class="tab-pane fade message-events" id="message-events-{{ message.unique_id }}">
      <table>
        <thead>
          <tr>
            <th>{% trans "Created" %}</th>
            <th>{% trans "Scheduled" %}</th>
            <th>{% trans "Dispatched" %}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ message.message.created_at }}</td>
            <td>{{ message.message.scheduled_at|default:message.message.created_at }}</td>
            <td>{{ message.message.dispatched_at }}</td>
          </tr>
        </tbody>
      </table>

      <h2>{% trans "Delivery status" %}</h2>
      <table>
        <thead>
          <tr>
            <th>{% trans "Recipient" %}</th>
            <th>{% trans "Sent at" %}</th>
            <th>{% trans "Delivered at" %}</th>
            <th>{% trans "Seen at" %}</th>
          </tr>
        </thead>
        <tbody>
          {% for recipient in message.message.messagerecipient_set.iterator %}
          <tr>
            <td>{{ recipient.address }}</td>
            <td>{{ recipient.sent_at }}</td>
            <td>{{ recipient.delivered_at }}</td>
            <td>{{ recipient.seen_at }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    <div class="tab-pane fade message-debug" id="message-debug-{{ message.unique_id }}">
      <dl>
        <dt>Thread key:</dt>
        <dd><kbd>{{ message.thread_key }}</kbd></dd>
        <dt>Rendered template:</dt>
        <dd><kbd>{{ message.templates }}</kbd></dd>
        <dt>Context:</dt>
        <dd><pre>{{ message.context|pprint }}</pre></dd>
      </dl>
    </div>
  {% endif %}
{% endblock %}