{% extends "base.html" %}
{% block content %}
<div class="container mt-4" style="max-width: 1100px;">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="m-0">Email Logs</h4>
    <form class="d-flex gap-2" method="get">
      <input name="q" class="form-control form-control-sm" placeholder="Search…" value="{{ search or '' }}" style="width: 260px;">
      <select name="s" class="form-select form-select-sm" style="width: 140px;">
        <option value="">All status</option>
        <option value="sent"   {{ 'selected' if status=='sent' else '' }}>Sent</option>
        <option value="failed" {{ 'selected' if status=='failed' else '' }}>Failed</option>
      </select>
      <button class="btn btn-sm btn-primary">Filter</button>
    </form>
  </div>

  <div class="table-responsive">
    <table class="table table-sm align-middle">
      <thead class="table-light">
        <tr class="text-muted">
          <th style="width:56px;">#</th>
          <th style="width:260px;">Email</th>
          <th style="width:140px;">Template</th>
          <th style="width:100px;">Status</th>
          <th style="width:170px;">Sent At</th>
          <th style="width:54px;">Error</th>
        </tr>
      </thead>
      <tbody>
        {% for r in items.items %}
        <tr>
          <td class="text-muted">{{ loop.index + (items.page-1)*items.per_page }}</td>
          <td><span class="font-monospace">{{ r.to_email }}</span></td>
          <td><span class="text-muted">{{ r.template }}</span></td>
          <td>
            {% if r.status == 'sent' %}
              <span class="badge bg-success">sent</span>
            {% else %}
              <span class="badge bg-secondary">failed</span>
            {% endif %}
          </td>
          <td>{{ r.created_at.strftime('%d %b %Y, %I:%M %p') }}</td>
          <td class="text-end">
            {% if r.error %}
              <button class="btn btn-link btn-sm p-0 view-error" data-error="{{ r.error|e }}">view</button>
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="7" class="text-center text-muted py-4">No logs found.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <nav class="d-flex justify-content-center">
    <ul class="pagination pagination-sm mb-0">
      <li class="page-item {{ '' if items.has_prev else 'disabled' }}">
        <a class="page-link" href="?page={{ items.prev_num if items.has_prev else items.page }}&q={{ search }}&s={{ status }}">Prev</a>
      </li>
      <li class="page-item disabled"><span class="page-link">Page {{ items.page }} / {{ items.pages or 1 }}</span></li>
      <li class="page-item {{ '' if items.has_next else 'disabled' }}">
        <a class="page-link" href="?page={{ items.next_num if items.has_next else items.page }}&q={{ search }}&s={{ status }}">Next</a>
      </li>
    </ul>
  </nav>
</div>

<!-- Minimal modal for full error text -->
<div class="modal fade" id="errorModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header"><h6 class="modal-title">Error</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body"><pre class="mb-0" id="errorText" style="white-space:pre-wrap;"></pre></div>
      <div class="modal-footer"><button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<script>
document.addEventListener('click', function(e) {
  const btn = e.target.closest('.view-error');
  if (!btn) return;
  const text = btn.getAttribute('data-error') || '';
  document.getElementById('errorText').textContent = text;
  new bootstrap.Modal(document.getElementById('errorModal')).show();
});
</script>
{% endblock %}