{% with base_color=base_color|default:"bg-blue" %}
<button type="submit" class="flex items-center justify-center w-64 h-12 px-6 mt-8 text-lg text-white uppercase {{ base_color }}-600 rounded text-bold hover:{{ base_color }}-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 form = button.closest("form");
    const loader = button.querySelector("svg");

    const toggle = () => {
      button.classList.toggle("{{ base_color }}-600");
      button.classList.toggle("hover:{{ base_color }}-700");
      button.classList.toggle("{{ base_color }}-300");
      button.classList.toggle("hover:{{ base_color }}-400");
    };

    form.addEventListener("submit", () => {
      console.debug("Button clicked");

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

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