<div class="w-full max-w-3xl mx-auto px-4 py-6">
  <div class="bg-white/70 backdrop-blur rounded-2xl shadow border border-stone-200 p-6 sm:p-8 space-y-6">

    <h1 class="text-xl font-semibold tracking-tight">Newsletters</h1>

    {% if newsletter_list %}
      <div class="divide-y divide-stone-100">
        {% for item in newsletter_list %}
          <div class="flex items-center justify-between py-4 first:pt-0 last:pb-0">
            <div class="min-w-0 flex-1">
              <p class="text-sm font-medium text-stone-800">{{ item.newsletter.name }}</p>
              {% if item.newsletter.description %}
                <p class="text-xs text-stone-500 mt-0.5 truncate">{{ item.newsletter.description }}</p>
              {% endif %}
            </div>
            <div class="ml-4 flex-shrink-0">
              {% if item.un %}
                {% with un=item.un %}
                  {% include "_types/auth/_newsletter_toggle.html" %}
                {% endwith %}
              {% else %}
                {# No subscription row yet — show an off toggle that will create one #}
                <div id="nl-{{ item.newsletter.id }}" class="flex items-center">
                  <button
                    hx-post="{{ coop_url('/auth/newsletter/' ~ item.newsletter.id ~ '/toggle/') }}"
                    hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
                    hx-target="#nl-{{ item.newsletter.id }}"
                    hx-swap="outerHTML"
                    class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 bg-stone-300"
                    role="switch"
                    aria-checked="false"
                  >
                    <span class="inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform translate-x-1"></span>
                  </button>
                </div>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <p class="text-sm text-stone-500">No newsletters available.</p>
    {% endif %}

  </div>
</div>
