{% extends "base.html" %}

{% block title %}Voice Audit-Log{% endblock %}

{% block content %}
<div style="max-width: 1180px; margin: 0 auto; padding: 24px;">
  <h1 style="margin: 0 0 8px; color: #003d7a;">🎤 Voice Audit-Log</h1>
  <p style="color: #64748b; margin-bottom: 24px;">
    Alle per Sprachsteuerung ausgeführten Aktionen — letzte 200 Einträge.
  </p>

  {% if not entries %}
  <div style="background: #f1f5f9; padding: 32px; border-radius: 12px; text-align: center; color: #64748b;">
    Noch keine Voice-Aktionen protokolliert.
  </div>
  {% else %}

  <div style="overflow-x: auto;">
    <table style="width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
      <thead>
        <tr style="background: #f8fafc; border-bottom: 2px solid #e2e8f0;">
          <th style="text-align: left; padding: 12px; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">Zeit</th>
          <th style="text-align: left; padding: 12px; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">User</th>
          <th style="text-align: left; padding: 12px; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">Gesprochen</th>
          <th style="text-align: left; padding: 12px; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">Intent</th>
          <th style="text-align: left; padding: 12px; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">Ergebnis</th>
          <th style="text-align: center; padding: 12px; font-size: 13px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; width: 80px;">Status</th>
        </tr>
      </thead>
      <tbody>
      {% for e in entries %}
        <tr style="border-bottom: 1px solid #f1f5f9;">
          <td style="padding: 10px 12px; font-size: 13px; color: #475569; white-space: nowrap;">
            {{ e.ts[:19].replace('T', ' ') }}
          </td>
          <td style="padding: 10px 12px; font-size: 13px; color: #475569;">
            {% if e.user_id %}#{{ e.user_id }}{% else %}—{% endif %}
          </td>
          <td style="padding: 10px 12px; font-size: 14px; color: #0f172a; font-style: italic;">
            „{{ e.raw_text or '—' }}"
          </td>
          <td style="padding: 10px 12px; font-family: 'SF Mono', Menlo, monospace; font-size: 12px; color: #475569;">
            {{ e.intent }}
          </td>
          <td style="padding: 10px 12px; font-size: 13px; color: #475569;">
            {{ e.response or '—' }}
          </td>
          <td style="padding: 10px 12px; text-align: center;">
            {% if e.success %}
              <span style="background: #dcfce7; color: #14532d; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;">OK</span>
            {% else %}
              <span style="background: #fee2e2; color: #7f1d1d; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;">FEHL</span>
            {% endif %}
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>

  {% endif %}

  <div style="margin-top: 20px;">
    <a href="/voice/help" style="color: #0066cc; text-decoration: none;">← Zurück zur Voice-Hilfe</a>
  </div>
</div>
{% endblock %}