{#
  Action button partial — one button per render (either `pin` or `archive`).

  Context variables (required, exact names — Agent A's drop_actions router
  re-renders this partial with these two keys after a successful toggle):

    * kind — "pin" or "archive"
    * drop — the Drop ORM row; we read `drop.short_id`, `drop.pinned_at`,
             `drop.archived_at`.

  Progressive enhancement: the outer `<form method="post">` ensures a click
  without JS submits the form natively; the backend returns 303 back to
  `/d/{short_id}`. With HTMX loaded, `hx-post` on the button intercepts the
  click, issues XHR, and swaps only the `<button>` (hx-swap="outerHTML" with
  hx-target="this"). The `<form>` wrapper is therefore preserved across
  swaps — important because we want the no-JS fallback to keep working even
  after an HTMX-driven toggle has landed. Toggle endpoint is the same for
  pin and unpin (and archive / unarchive), so no URL rewrite is needed.
#}
{% if kind == "pin" %}
  {% set is_active = drop.pinned_at is not none %}
{% else %}
  {% set is_active = drop.archived_at is not none %}
{% endif %}
<form method="post" action="/d/{{ drop.short_id }}/{{ kind }}" class="action-form">
  <input type="hidden" name="_csrf" value="{{ csrf_token(request) }}" />
  <button type="submit"
          class="action-btn{% if is_active %} action-btn--{{ kind }}-active{% endif %}"
          hx-post="/d/{{ drop.short_id }}/{{ kind }}"
          hx-target="this"
          hx-swap="outerHTML"
          hx-disabled-elt="this"
          hx-indicator="this"
          hx-headers='{"X-CSRF-Token": "{{ csrf_token(request) }}"}'
          aria-label="{% if kind == 'pin' %}{% if is_active %}Unpin drop{% else %}Pin drop{% endif %}{% else %}{% if is_active %}Unarchive drop{% else %}Archive drop{% endif %}{% endif %}"
          aria-pressed="{{ 'true' if is_active else 'false' }}"
          data-action="{{ kind }}">
    {# `min-width: …` styling on .action-btn keeps the layout fixed
       across the {Pin, Pinned, Archive, Archived} label set, so the
       spinner replacement during htmx-request never causes shift. #}
    <span class="action-btn__content">
      {% if kind == "pin" and is_active -%}
        <span class="action-btn__icon" aria-hidden="true">&#9733;</span><span class="label">Pinned</span>
      {%- elif kind == "pin" -%}
        <span class="label">Pin</span>
      {%- elif kind == "archive" and is_active -%}
        <span class="label">Archived</span>
      {%- else -%}
        <span class="label">Archive</span>
      {%- endif %}
    </span>
    <span class="action-btn__spinner" aria-hidden="true"></span>
  </button>
</form>