{% set admin_page = "emails" %}
{% extends "admin/base_admin.html" %}

{% block title %}Email Log - {{ config.APP_NAME }} Admin{% endblock %}
{% block topbar_title %}Email Log{% endblock %}

{% block admin_content %}
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
    <div>
      <h2 class="text-xl" style="margin:0;">Email Log</h2>
      <p class="text-sm text-slate" style="margin:4px 0 0;">
        Audit trail of all outgoing transactional emails. Latest {{ log | length }} entries.
      </p>
    </div>
    <div style="display:flex;gap:8px;font-size:12px;color:#64748B;">
      {% set sent_count = log | selectattr('status', 'equalto', 'sent') | list | length %}
      {% set error_count = log | selectattr('status', 'equalto', 'error') | list | length %}
      {% if sent_count > 0 %}
      <span style="background:#ECFDF5;color:#059669;padding:3px 10px;border-radius:20px;font-weight:600;">{{ sent_count }} sent</span>
      {% endif %}
      {% if error_count > 0 %}
      <span style="background:#FEF2F2;color:#EF4444;padding:3px 10px;border-radius:20px;font-weight:600;">{{ error_count }} failed</span>
      {% endif %}
    </div>
  </div>

  <div class="card" style="padding:0;overflow:hidden;">
    {% if log %}
    <table class="table">
      <thead>
        <tr>
          <th>Recipient</th>
          <th>Subject</th>
          <th>Template</th>
          <th>Status</th>
          <th>Provider ID</th>
          <th>Sent</th>
        </tr>
      </thead>
      <tbody>
        {% for entry in log %}
        <tr{% if entry.status == 'error' %} style="background:#FEF2F2;"{% endif %}>
          <td class="mono text-sm">{{ entry.recipient }}</td>
          <td>
            <span class="text-sm" style="color:#1E293B;">{{ entry.subject }}</span>
            {% if entry.error %}
            <p style="margin:2px 0 0;font-size:11px;color:#EF4444;">{{ entry.error }}</p>
            {% endif %}
          </td>
          <td>
            {% if entry.template %}
            <code style="font-size:11px;color:#64748B;background:#F8FAFC;padding:1px 5px;border-radius:3px;">{{ entry.template }}</code>
            {% else %}
            <span class="text-slate text-sm">—</span>
            {% endif %}
          </td>
          <td>
            {% if entry.status == 'sent' %}
            <span class="badge-success">sent</span>
            {% elif entry.status == 'dev_skip' %}
            <span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;background:#FEF9C3;color:#854D0E;">dev</span>
            {% elif entry.status == 'error' %}
            <span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;background:#FEE2E2;color:#EF4444;">error</span>
            {% else %}
            <span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;background:#F1F5F9;color:#64748B;">{{ entry.status }}</span>
            {% endif %}
          </td>
          <td>
            {% if entry.provider_id %}
            <code class="mono" style="font-size:11px;color:#64748B;">{{ entry.provider_id[:16] }}…</code>
            {% else %}
            <span class="text-slate text-sm">—</span>
            {% endif %}
          </td>
          <td class="mono text-sm">{{ entry.created_at[:16] }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div style="padding:40px;text-align:center;">
      <p class="text-slate text-sm">No emails logged yet.</p>
    </div>
    {% endif %}
  </div>
{% endblock %}
