<%
  const stateButtonStates = (typeof states !== "undefined" && states) || [
    { id: "idle", text: (typeof text !== "undefined" && text) || "Submit" },
    { id: "loading", text: (typeof loadingText !== "undefined" && loadingText) || "Working...", spinner: true },
    { id: "success", text: (typeof successText !== "undefined" && successText) || "Done" }
  ];
  const stateButtonDefault = (typeof defaultState !== "undefined" && defaultState) || "idle";
  const stateButtonAttrs = (typeof attrs !== "undefined" && attrs) || "";
  const stateButtonClass = `button lumi-state-btn ${(typeof classes !== "undefined" && classes) || ""}`.trim();
%>
<button
  type="<%= (typeof type !== "undefined" && type) || 'button' %>"
  class="<%= stateButtonClass %>"
  data-lumi-state-button
  data-state="<%= stateButtonDefault %>"
  data-default-state="<%= stateButtonDefault %>"
  data-loading-state="<%= (typeof loadingState !== "undefined" && loadingState) || 'loading' %>"
  data-success-state="<%= (typeof successState !== "undefined" && successState) || 'success' %>"
  data-error-state="<%= (typeof errorState !== "undefined" && errorState) || 'error' %>"
  data-reset-delay="<%= (typeof resetDelay !== "undefined" && resetDelay) || 0 %>"
  data-disable-while-busy="<%= typeof disableWhileBusy !== "undefined" && disableWhileBusy === false ? 'false' : 'true' %>"
  <%- typeof name !== "undefined" && name ? `name="${name}"` : "" %>
  <%- typeof value !== "undefined" && value ? `value="${value}"` : "" %>
  <%- typeof ariaLabel !== "undefined" && ariaLabel ? `aria-label="${ariaLabel}"` : "" %>
  <%- typeof disabled !== "undefined" && disabled ? "disabled" : "" %>
  <%- stateButtonAttrs %>
>
  <span class="lumi-state-btn-content">
    <% stateButtonStates.forEach((state) => { %>
    <span data-state-view="<%= state.id %>" data-state-hidden="<%= state.id === stateButtonDefault ? 'false' : 'true' %>" aria-hidden="<%= state.id === stateButtonDefault ? 'false' : 'true' %>">
      <% if (state.spinner) { %><span class="lumi-state-btn-spinner" aria-hidden="true"></span><% } %>
      <span><%= state.text %></span>
    </span>
    <% }) %>
  </span>
</button>
