{% comment %}
Sortable block list for the editor. The root element self-refreshes on the
``cms:blocks-changed`` event (fired by add/edit/delete/reorder), so the list
always reflects the current state. Reordering is wired declaratively through
conjunto.sortable.
{% endcomment %}
{% load i18n sortable %}
<div id="cms-block-list"
     hx-trigger="cms:blocks-changed from:body"
     hx-get="{% url 'cms:block_list' slug=page.slug %}"
     hx-target="this" hx-swap="outerHTML">

  {% url 'cms:block_reorder' page_pk=page.pk as reorder_url %}
  {% if block_rows %}
    <ul class="list-group" {% sortable_attrs reorder_url=reorder_url %}>
      {% for row in block_rows %}
        <li class="list-group-item d-flex align-items-center" id="cms-block-row-{{ row.block.pk }}">
          {% sortable_item row.block %}
          <span class="handle me-2" role="button" aria-label="{% translate 'Reorder' %}">
            <i class="ti ti-grip-vertical" aria-hidden="true"></i>
          </span>
          <span class="flex-fill">
            <span class="badge bg-secondary-lt me-2">{{ row.label }}</span>
            <span class="text-muted">{{ row.block }}</span>
          </span>
          <span class="btn-list">
            <button type="button" class="btn btn-sm btn-icon"
                    hx-get="{% url 'cms:block_update' pk=row.block.pk %}"
                    hx-target="#dialog" hx-swap="innerHTML"
                    aria-label="{% translate 'Edit block' %}">
              <i class="ti ti-pencil" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-sm btn-icon text-danger"
                    hx-post="{% url 'cms:block_delete' pk=row.block.pk %}"
                    hx-confirm="{% translate 'Delete this block?' %}"
                    aria-label="{% translate 'Delete block' %}">
              <i class="ti ti-trash" aria-hidden="true"></i>
            </button>
          </span>
        </li>
      {% endfor %}
    </ul>
  {% else %}
    <div class="empty">
      <p class="empty-title">{% translate "No blocks yet" %}</p>
      <p class="empty-subtitle text-muted">
        {% translate "Add your first content block to build this page." %}
      </p>
    </div>
  {% endif %}
</div>