{#
  Leaves the table dropdown holding only the tables of the selected profile.

  The options are rebuilt rather than hidden: `hidden` on an `<option>` is not
  honoured everywhere, and a hidden option is still selectable with the
  keyboard. With scripting off the dropdown lists every table it was rendered
  with, and the server still refuses a table that is not in the scope.

  Bound again after every HTMX step swap, which replaces both selects with
  fresh nodes when the user returns to the source step.
#}
<script>
  (function () {
    function bind() {
      const profileSelect = document.querySelector("[data-profile-select]");
      const tableSelect = document.querySelector("[data-table-select]");
      if (!profileSelect || !tableSelect || tableSelect.dataset.bound) return;
      tableSelect.dataset.bound = "true";
      const placeholder = tableSelect.options[0];
      const all = Array.from(tableSelect.options).slice(1);
      function sync() {
        const chosen = tableSelect.value;
        tableSelect.replaceChildren(placeholder);
        for (const option of all) {
          if (option.dataset.profile === profileSelect.value) {
            tableSelect.append(option);
          }
        }
        tableSelect.value = Array.from(tableSelect.options).some(
          (option) => option.value === chosen,
        )
          ? chosen
          : "";
      }
      profileSelect.addEventListener("change", sync);
      sync();
    }

    bind();
    document.body.addEventListener("htmx:afterSwap", bind);
  })();
</script>