Submit Once

<%# Submit-once demo: the submit button disables and swaps its label on submit, then
    restores. This catalog has no server, so demo.js intercepts the submit and simulates
    a round trip by firing turbo:submit-end after a short delay. The library owns the
    disable / aria-busy / data-submitting / label state; this demo only styles it. %>
<div class="submit-once-demo">
  <form
    data-controller="stimeo--submit-once"
    data-stimeo--submit-once-busy-label-value="<%= t('components.submit_once.demo.busy') %>"
    data-action="submit->stimeo--submit-once#start">
    <label class="submit-once-demo__field">
      <span><%= t("components.submit_once.demo.label") %></span>
      <input type="text" name="title" class="submit-once-demo__input">
    </label>
    <button type="submit" class="demo-trigger" data-stimeo--submit-once-target="submit">
      <%= t("components.submit_once.demo.submit") %>
    </button>
  </form>
</div>

/*
 * Presentation-only styles for the submit-once demo.
 * The library disables the button, sets aria-busy, swaps the label, and marks the
 * form with data-submitting; this CSS only reflects that busy state.
 */

.submit-once-demo {
  max-width: 28rem;
}

.submit-once-demo form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.submit-once-demo__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.submit-once-demo__input {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font: inherit;
}

/* Dim and show a progress cursor on the disabled, busy button. */
.submit-once-demo button[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

// Submit-once demo (consumer-side JS).
//
// The controller disables the submit button and swaps its label on submit, then
// restores on Turbo's turbo:submit-end. This catalog has no server, so here we
// intercept the submit, prevent the real navigation, and simulate a round trip by
// dispatching turbo:submit-end after a short delay — letting you see the busy →
// restored cycle the controller drives.
document.querySelectorAll(".submit-once-demo form").forEach((form) => {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    window.setTimeout(() => {
      form.dispatchEvent(new CustomEvent("turbo:submit-end", { detail: { success: true } }));
    }, 1500);
  });
});