{% extends 'base.html' %}
{% block title %}Logs{% endblock %}
{% block page_title %}Publish Logs{% endblock %}

{% block content %}
<!-- Filters -->
<div class="filters-bar">
  <form method="GET" style="display:flex;gap:10px;flex-wrap:wrap">
    <select name="page_id" class="filter-select">
      <option value="all" {% if page_filter == 'all' %}selected{% endif %}>All Pages</option>
      {% for page in pages %}
        <option value="{{ page.id }}" {% if page_filter == page.id|string %}selected{% endif %}>{{ page.page_name }}</option>
      {% endfor %}
    </select>
    <select name="status" class="filter-select">
      <option value="all"    {% if status_filter == 'all' %}selected{% endif %}>All Statuses</option>
      <option value="success"{% if status_filter == 'success' %}selected{% endif %}>Success</option>
      <option value="failed" {% if status_filter == 'failed' %}selected{% endif %}>Failed</option>
    </select>
    <button type="submit" class="btn btn-secondary btn-sm">Filter</button>
  </form>
  <div style="margin-left:auto;display:flex;align-items:center;gap:15px">
    <span style="font-size:0.8rem;color:var(--text-muted)">{{ logs|length }} log(s)</span>
    <form method="POST" action="{{ url_for('logs.purge') }}" style="margin:0" onsubmit="return confirm('Are you sure you want to permanently delete all logs? This cannot be undone.');">
      <button type="submit" class="btn btn-danger btn-sm" title="Purge all logs">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
        Purge All
      </button>
    </form>
  </div>
</div>

{% if logs %}
<div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th>Status</th>
        <th>Page</th>
        <th>FB Post ID</th>
        <th>Message</th>
        <th>Time</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for log in logs %}
      <tr class="log-row-{{ log.status }}">
        <td>
          <span class="badge badge-{% if log.status == 'success' %}success{% else %}danger{% endif %}">
            {{ log.status }}
          </span>
        </td>
        <td>{{ log.page.page_name if log.page else '—' }}</td>
        <td style="font-family:monospace;font-size:0.78rem;color:var(--text-muted)">
          {{ log.fb_post_id or '—' }}
        </td>
        <td style="max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
          {{ log.response_message[:120] if log.response_message else '—' }}
        </td>
        <td style="white-space:nowrap">{{ log.executed_at.strftime('%b %d, %H:%M:%S') }}</td>
        <td>
          {% if log.status == 'failed' and log.post_id %}
          <form method="POST" action="{{ url_for('logs.retry', log_id=log.id) }}" style="display:inline">
            <button type="submit" class="btn btn-warning btn-sm" title="Retry this post">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-5.88L1 10"/></svg>
              Retry
            </button>
          </form>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="empty-state">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
  <h3>No logs found</h3>
  <p>Publish logs will appear here after posts are processed.</p>
</div>
{% endif %}
{% endblock %}