{% extends "base.html" %}
{% block title %}Edit: {{ dashboard.name }} — Roundtable{% endblock %}
{% block content %}
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem;">
  <h1 class="page-title" style="margin-bottom:0;">Edit: {{ dashboard.name }}</h1>
  <a href="/d/{{ dashboard.id }}" class="btn btn-ghost btn-sm">Done</a>
</div>
{% include "dashboard/_edit_panels.html" %}
{% endblock %}
{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
(function () {
  function initSortable() {
    var el = document.getElementById('widget-sort-list');
    if (!el) return;
    var dashId = el.dataset.dashId;
    Sortable.create(el, {
      handle: '.drag-handle',
      animation: 150,
      ghostClass: 'sortable-ghost',
      onEnd: function () {
        var order = Array.from(el.querySelectorAll('[data-widget-id]'))
          .map(function (row) { return parseInt(row.dataset.widgetId, 10); });
        fetch('/d/' + dashId + '/edit/reorder', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ order: order }),
        });
      },
    });
  }

  // Init on first load and after every HTMX swap (add/remove re-renders the list)
  document.addEventListener('DOMContentLoaded', initSortable);
  document.addEventListener('htmx:afterSwap', initSortable);
})();
</script>
<style>
.sortable-ghost { opacity: 0.4; }
.drag-handle:active { cursor: grabbing; }
</style>
{% endblock %}