<button type="submit" class="flex items-center justify-center w-64 h-12 px-6 mt-8 text-lg text-white uppercase bg-blue-600 rounded text-bold hover:bg-blue-700">
  <svg class="hidden w-5 h-5 mr-3 animate-spin" viewBox="0 0 24 24">
    <path
      className="opacity-25"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>
  {{ text }}

   <script>
    const script = document.currentScript;
    const button = script.parentElement;
    const loader = button.querySelector("svg");

    const toggle = () => {
      button.classList.toggle("bg-blue-600");
      button.classList.toggle("hover:bg-blue-700");
      button.classList.toggle("bg-blue-300");
      button.classList.toggle("hover:bg-blue-400");
    };
    button.addEventListener("click", () => {
      console.debug("Button clicked");

      toggle();
      button.setAttribute("disabled", "");
      loader.classList.toggle("hidden");

      // Clear on timeout
      setTimeout(() => {
        toggle();
        button.removeAttribute("disabled");
        loader.classList.toggle("hidden");
      }, 1000);
    });
   </script>
</button>

