{% extends "quillet/base.html" %}

{% block title %}Subscribers — {{ newsletter.name }}{% endblock %}

{% block head %}
<style>
  table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
  th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid #eee; }
  th { background: #f5f5f5; font-weight: 600; }
</style>
{% endblock %}

{% block content %}
<p class="muted">
  <a href="{{ url_for('quillet.dashboard', newsletter_slug=newsletter.slug) }}">← Dashboard</a>
</p>

<h1>Subscribers</h1>

<p class="muted">{{ confirmed_count }} confirmed</p>

{% if subscribers %}
<table>
  <thead>
    <tr>
      <th>Email</th>
      <th>Status</th>
      <th>Since</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="subscriber-rows">
    {% include "quillet/admin/_subscriber_rows.html" %}
  </tbody>
</table>
{% if next_cursor %}
<p id="load-more-wrap">
  <a id="load-more" rel="next"
     href="{{ url_for('quillet.subscriber_list', newsletter_slug=newsletter.slug, cursor=next_cursor) }}">Load more</a>
</p>
<script>
(function () {
  var body = document.getElementById('subscriber-rows');
  var wrap = document.getElementById('load-more-wrap');
  var link = document.getElementById('load-more');
  if (!body || !link) return;
  var loading = false;
  function load() {
    if (loading || !link) return;
    loading = true;
    var url = new URL(link.href, window.location.origin);
    url.searchParams.set('partial', '1');
    fetch(url).then(function (r) { return r.text(); }).then(function (html) {
      body.querySelectorAll('[data-next-cursor]').forEach(function (m) { m.remove(); });
      body.insertAdjacentHTML('beforeend', html);
      var marker = body.querySelector('[data-next-cursor]');
      if (marker) {
        var u = new URL(link.href, window.location.origin);
        u.searchParams.set('cursor', marker.getAttribute('data-next-cursor'));
        link.href = u.pathname + u.search;
        marker.remove();
        loading = false;
      } else if (wrap) {
        wrap.remove();
        link = null;
      }
    });
  }
  link.addEventListener('click', function (e) { e.preventDefault(); load(); });
})();
</script>
{% endif %}
{% else %}
  <p class="muted">No subscribers yet.</p>
{% endif %}
{% endblock %}