{% extends "admin/base_admin.html" %}
{% set admin_page = "audiences" %}
{% block title %}{{ audience.name }} Contacts - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_content %}
  <header class="flex justify-between items-center mb-8">
    <div>
      <a href="{{ url_for('admin.audiences') }}" class="text-sm text-slate">&larr; Audiences</a>
      <h1 class="text-2xl mt-1">{{ audience.name }}</h1>
      <p class="text-sm text-slate">{{ contacts | length }} contacts</p>
    </div>
  </header>

  {% if contacts %}
  <div class="card">
    <table class="table">
      <thead>
        <tr>
          <th>Email</th>
          <th>Created</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for c in contacts %}
        <tr>
          <td class="text-sm">{{ c.email if c.email is defined else (c.get('email', '-') if c is mapping else '-') }}</td>
          <td class="mono text-sm">{{ (c.created_at if c.created_at is defined else (c.get('created_at', '-') if c is mapping else '-'))[:16] if c else '-' }}</td>
          <td style="text-align:right">
            <form method="post" action="{{ url_for('admin.audience_contact_remove', audience_id=audience.audience_id) }}" style="display:inline" hx-boost="true">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <input type="hidden" name="contact_id" value="{{ c.id if c.id is defined else (c.get('id', '') if c is mapping else '') }}">
              <button type="submit" class="btn-outline btn-sm" style="color:#DC2626"
                      hx-confirm="Remove this contact from the audience?">Remove</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="card text-center" style="padding:2rem">
    <p class="text-slate">No contacts in this audience.</p>
  </div>
  {% endif %}
{% endblock %}
