<div id="nl-{{ un.newsletter_id }}" class="flex items-center">
  <button
    hx-post="{{ coop_url('/auth/newsletter/' ~ un.newsletter_id ~ '/toggle/') }}"
    hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
    hx-target="#nl-{{ un.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
      {% if un.subscribed %}bg-emerald-500{% else %}bg-stone-300{% endif %}"
    role="switch"
    aria-checked="{{ 'true' if un.subscribed else 'false' }}"
  >
    <span
      class="inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform
        {% if un.subscribed %}translate-x-6{% else %}translate-x-1{% endif %}"
    ></span>
  </button>
</div>
