{#
  Two things the mapping table does in the browser, both of them conveniences
  over rules the server enforces anyway.

  Everything is delegated from `document`, because each step swaps the whole
  block: a listener bound to a select would be thrown away with it.
#}
<script>
  (function () {
    function sync() {
      const selects = Array.from(document.querySelectorAll("[data-source-select]"));
      // A source column can fill one destination only. The mapping refuses a
      // repeat outright; this stops it being offered, so the refusal is not
      // how the user finds out.
      const taken = new Set(selects.map((select) => select.value).filter(Boolean));
      for (const select of selects) {
        for (const option of select.options) {
          option.disabled = option.value !== "" && option.value !== select.value && taken.has(option.value);
        }
        // The example beside the row is the first data row's value at the
        // chosen position, so the row shows what it is actually going to
        // import rather than only which column it named.
        const cell = select.closest("tr")?.querySelector("[data-example-cell]");
        if (cell) cell.textContent = select.selectedOptions[0]?.dataset.example ?? "";
      }
    }

    document.addEventListener("change", function (event) {
      if (event.target.matches("[data-source-select]")) sync();
    });
    document.body.addEventListener("htmx:afterSwap", sync);
    sync();
  })();
</script>