{% extends "portal_base.html" %}
{% block title %}Mailing list · Portal{% endblock %}
{% block topbar_title %}Mailing list{% endblock %}
{% block portal_content %}
<div class="toolbar">
  <form class="toolbar-filters" method="get">
    <input type="search" name="q" value="{{ q }}" placeholder="Search contacts">
    <button class="btn btn-sm btn-ghost" type="submit">Search</button>
  </form>
  <div style="display:flex;gap:8px;flex-wrap:wrap">
    <a class="btn btn-ghost btn-sm" href="{% url 'contacts:import' %}">Import CSV / Excel</a>
    <a class="btn btn-ghost btn-sm" href="{% url 'contacts:create' %}">New contact</a>
    {% if 'email_sms' in enabled_features %}
    <a class="btn btn-primary btn-sm" href="{% url 'email_sms:campaign_list' %}">New campaign</a>
    {% endif %}
  </div>
</div>

<div class="panel">
  <div class="panel-b" style="padding:0">
    <table class="table">
      <thead>
        <tr>
          <th></th>
          <th>Contact</th>
          <th>Address</th>
          <th>Consent</th>
          <th>Source</th>
        </tr>
      </thead>
      <tbody>
        {% for contact in contacts %}
        <tr>
          <td><input type="checkbox" disabled></td>
          <td>
            <a href="{% url 'contacts:detail' contact.pk %}">{{ contact }}</a><br>
            <span class="muted">
              {% if contact.email %}{{ contact.email }}{% endif %}
              {% if contact.email and contact.phone %} · {% endif %}
              {% if contact.phone %}{{ contact.phone }}{% endif %}
            </span>
          </td>
          <td>
            {% if contact.postal_address.line1 %}
              {{ contact.postal_address.line1 }}{% if contact.postal_address.city %}, {{ contact.postal_address.city }}{% endif %}
            {% else %}
              —
            {% endif %}
          </td>
          <td>
            {% with c=contact.consent_flags %}
            <span class="badge {% if c.email %}badge-optin{% else %}badge-optout{% endif %}">E</span>
            <span class="badge {% if c.sms %}badge-optin{% else %}badge-optout{% endif %}">S</span>
            <span class="badge {% if c.postcard %}badge-optin{% else %}badge-optout{% endif %}">P</span>
            {% endwith %}
          </td>
          <td>{{ contact.get_source_display }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="empty-state">No contacts yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
<p class="muted" style="font-size:13px">
  E = email · S = SMS · P = postcard.
  <a href="{% url 'contacts:import' %}">Import contacts</a> for bulk CSV/Excel.
</p>
{% endblock %}