{% extends "base.html" %}
{% block title %}Email-Log{% endblock %}

{% block content %}
<div class="page-header d-flex align-items-center justify-content-between">
  <div>
    <h1>Email-Verarbeitungs-Log</h1>
    <p>Automatisch verarbeitete Emails und Antworten</p>
  </div>
  <div class="d-flex gap-2 align-items-center">
    <span class="badge bg-secondary" style="font-size:.85rem;">{{ log_entries|length }} Einträge</span>
    <button class="btn btn-secondary btn-sm" onclick="location.reload()">Aktualisieren</button>
  </div>
</div>

<div class="mb-3" style="font-size:.8rem;color:var(--text-muted);">
  <span class="status-replied me-3">✓ replied</span> — Auto-Reply versendet &nbsp;|&nbsp;
  <span class="status-skipped me-3">— skipped</span> — Nicht auf Whitelist &nbsp;|&nbsp;
  <span class="status-error">✗ error</span> — Fehler beim Versenden
</div>

{% if not log_entries %}
<div class="card">
  <div class="card-body text-center py-5" style="color:var(--text-muted);">
    <p style="font-size:2rem;">📭</p>
    <p>Noch keine Emails verarbeitet.<br><small>Der Poller prüft alle 2 Minuten den Posteingang.</small></p>
  </div>
</div>
{% else %}
<div class="card">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover log-table mb-0">
        <thead>
          <tr>
            <th>Zeitstempel</th>
            <th>Von</th>
            <th>Betreff</th>
            <th>Agent</th>
            <th>Status</th>
            <th>Antwort-Vorschau</th>
          </tr>
        </thead>
        <tbody>
          {% for entry in log_entries %}
          <tr>
            <td style="white-space:nowrap;"><small style="color:var(--text-muted);">{{ entry.timestamp }}</small></td>
            <td><small>{{ entry.from }}</small></td>
            <td>{{ entry.subject }}</td>
            <td>
              {% if entry.agent %}
                <span class="badge bg-primary badge-agent">{{ entry.agent }}</span>
              {% else %}
                <span style="color:var(--text-muted);">—</span>
              {% endif %}
            </td>
            <td>
              {% if entry.status == 'replied' or entry.status == 'completed' %}
                <span class="status-replied">✓ replied</span>
              {% elif entry.status == 'skipped' %}
                <span class="status-skipped">— skipped</span>
              {% elif entry.status == 'error' %}
                <span class="status-error">✗ error</span>
              {% elif entry.status == 'queued' %}
                <span style="color:var(--warning);">⏳ queued</span>
              {% else %}
                <span style="color:var(--text-muted);">{{ entry.status }}</span>
              {% endif %}
            </td>
            <td>
              {% if entry.response_preview %}
                <div class="response-preview">{{ entry.response_preview }}</div>
              {% else %}
                <small style="color:var(--text-muted);">—</small>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endif %}

<div class="mt-3" style="font-size:.78rem;color:var(--text-muted);">
  Whitelist: <strong>eric.fischer@signtime.media</strong>, <strong>p.dyderski@live.at</strong>,
  <strong>georg.tschare@gmail.com</strong>, <strong>*@diversityball.at</strong> · Max. 50 Einträge
</div>
{% endblock %}