{% extends "admin/base_admin.html" %}
{% set admin_page = "emails" %}
{% block title %}Sent Log - Email Hub - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_content %}
  <header class="flex justify-between items-center mb-8">
    <div>
      <h1 class="text-2xl">Sent Log</h1>
      <p class="text-sm text-slate mt-1">
        {{ email_stats.total }} total
        &middot; {{ email_stats.sent_today }} today
        &middot; {{ email_stats.delivered }} delivered
        {% if email_stats.bounced %}&middot; <span style="color:#DC2626">{{ email_stats.bounced }} bounced</span>{% endif %}
      </p>
    </div>
    <div class="flex gap-2">
      <a href="{{ url_for('admin.email_compose') }}" class="btn btn-sm">+ Compose</a>
      <a href="{{ url_for('admin.index') }}" class="btn-outline btn-sm">Back to Dashboard</a>
    </div>
  </header>

  <!-- Filters -->
  <div class="card mb-6" style="padding:1rem 1.25rem;">
    <form class="flex flex-wrap gap-3 items-end"
          hx-get="{{ url_for('admin.email_results') }}"
          hx-target="#email-results"
          hx-trigger="change, input delay:300ms"
          hx-indicator="#emails-loading">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Type</label>
        <select name="email_type" class="form-input" style="min-width:140px">
          <option value="">All</option>
          {% for t in email_types %}
          <option value="{{ t }}" {% if t == current_type %}selected{% endif %}>{{ t }}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Event</label>
        <select name="last_event" class="form-input" style="min-width:120px">
          <option value="">All</option>
          {% for e in event_types %}
          <option value="{{ e }}" {% if e == current_event %}selected{% endif %}>{{ e }}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Search</label>
        <input type="text" name="search" value="{{ current_search }}" class="form-input" placeholder="Email or subject..." style="min-width:180px">
      </div>

      <svg id="emails-loading" class="htmx-indicator search-spinner" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="10" stroke="#CBD5E1" stroke-width="3"/>
        <path d="M12 2a10 10 0 0 1 10 10" stroke="#0EA5E9" stroke-width="3" stroke-linecap="round"/>
      </svg>
    </form>
  </div>

  <!-- Results -->
  <div id="email-results">
    {% include "admin/partials/email_results.html" %}
  </div>
{% endblock %}
