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

{% block title %}Admin — {{ 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; }
  .actions form { display: inline; }
  .actions button { padding: 0.25rem 0.6rem; font-size: 0.85em; border: none; border-radius: 3px; cursor: pointer; }
</style>
{% endblock %}

{% block content %}
<div style="display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:0.5rem;">
  <h1>{{ newsletter.name }}</h1>
  <a class="btn" href="{{ url_for('quillet.new_post', newsletter_slug=newsletter.slug) }}">+ New post</a>
</div>

<p class="muted">
  {{ confirmed_count }} confirmed subscriber{{ 's' if confirmed_count != 1 }} ·
  <a href="{{ url_for('quillet.subscriber_list', newsletter_slug=newsletter.slug) }}">manage subscribers</a> ·
  <a href="{{ url_for('quillet.settings', newsletter_slug=newsletter.slug) }}">settings</a>
</p>

{% if posts %}
<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Status</th>
      <th>Published</th>
      <th class="actions">Actions</th>
    </tr>
  </thead>
  <tbody id="post-rows">
    {% include "quillet/admin/_dashboard_rows.html" %}
  </tbody>
</table>
{% if next_cursor %}
<p id="load-more-wrap">
  <a id="load-more" rel="next"
     href="{{ url_for('quillet.dashboard', newsletter_slug=newsletter.slug, cursor=next_cursor) }}">Load more</a>
</p>
<script>
(function () {
  var body = document.getElementById('post-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 posts yet. <a href="{{ url_for('quillet.new_post', newsletter_slug=newsletter.slug) }}">Create one →</a></p>
{% endif %}
{% endblock %}