{% if emails %}
<div class="card">
  <div style="overflow-x:auto">
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>To</th>
        <th>Subject</th>
        <th>Type</th>
        <th>Status</th>
        <th>Sent</th>
      </tr>
    </thead>
    <tbody>
      {% for e in emails %}
      <tr>
        <td><a href="{{ url_for('admin.email_detail', email_id=e.id) }}">#{{ e.id }}</a></td>
        <td class="text-sm" style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ e.to_addr }}</td>
        <td class="text-sm" style="max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ e.subject }}</td>
        <td><span class="badge">{{ e.email_type }}</span></td>
        <td>
          {% if e.last_event == 'delivered' %}
          <span class="badge" style="background:#DCFCE7;color:#166534">delivered</span>
          {% elif e.last_event == 'bounced' %}
          <span class="badge-danger">bounced</span>
          {% elif e.last_event == 'opened' %}
          <span class="badge" style="background:#DBEAFE;color:#1E40AF">opened</span>
          {% elif e.last_event == 'clicked' %}
          <span class="badge" style="background:#E0E7FF;color:#3730A3">clicked</span>
          {% elif e.last_event == 'complained' %}
          <span class="badge-warning">complained</span>
          {% else %}
          <span class="badge">{{ e.last_event }}</span>
          {% endif %}
        </td>
        <td class="mono text-sm">{{ e.created_at[:16] if e.created_at else '-' }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>
{% else %}
<div class="card text-center" style="padding:2rem">
  <p class="text-slate">No emails match the current filters.</p>
</div>
{% endif %}
