<div class="np-top-cta">
	<div class="np-top-cta-progress-content">
		<div class="np-top-cta-progress-title np-text-title">
			<span data-lang="DE">Lernfortschritt</span>
			<span data-lang="EN">Study progress</span>
		</div>
		<div class="np-progress-bar-container">
			<div
				style="width: {{ learning_path.progress }}%"
				class="np-progress-background-color np-card-progress-bar">
			</div>
		</div>

		<div class="np-top-cta-progress-text">
			<span data-lang="DE">
				{% if learning_path.progress > 0 %}
					{% t shared.progress, count: learning_path.progress %}
				{% else %}
					nicht angefangen
				{% endif %}
			</span>
			<span data-lang="EN">
				{% if learning_path.progress > 0 %}
					{{learning_path.progress}}% complete
				{% else %}
					not started
				{% endif %}
			</span>
		</div>

    {% if learning_path.enrolled? %}
      {% learning_path_next_step_button learning_path, class: "np-button-font-color np-button lp-start-button" %}
    {% else %}
      {% learning_path_next_step_button learning_path, class: "np-button-font-color np-button lp-enroll-button np-hidden" %}
    {% endif %}

	</div>
</div>

<style>
  .lp-start-button {
    width: auto !important;
  }
</style>

<script>
  window.addEventListener("DOMContentLoaded", () => {
    document.querySelector(".lp-enroll-button")?.click()

    const targetNode = document.querySelector("body");
    const config = { attributes: true };
    const callback = (mutationList, observer) => {
      for (const mutation of mutationList) {
        if (mutation.type === "attributes") {
          if (mutation.attributeName == "data-lang") {
            console.log(mutation)
            changeTitleOfNextStepButton()
            changeLanguageInLearningPathBanner()
          }
        }
      }
    };
    const observer = new MutationObserver(callback);

    observer.observe(targetNode, config);
  })


  function changeTitleOfNextStepButton() {
    setTimeout(() => {
      console.log(document.querySelector("body").getAttribute("data-lang"))
      buttonText = document.querySelector(".lp-start-button").innerText.trim()
      if (document.querySelector("body").getAttribute("data-lang") == "EN") {
        switch(buttonText) {
          case "Neuen Inhalt starten", 'Weg beginnen', 'Weiter':
            document.querySelector(".lp-start-button").innerText = "Start Path"
            break;
          case 'Weg anzeigen':
            document.querySelector(".lp-start-button").innerText = "View Path"
            break;
          default:
            document.querySelector(".lp-start-button").innerText = "Continue"
            break;
        }
      } else if (document.querySelector("body").getAttribute("data-lang") == "DE") {
        switch(buttonText) {
          case "Start Path":
            document.querySelector(".lp-start-button").innerText = "Weg beginnen"
            break;
          case 'View Path':
            document.querySelector(".lp-start-button").innerText = "Weg anzeigen"
            break;
          default:
            document.querySelector(".lp-start-button").innerText = "Weitermachen"
            break;
        }
      }
    }, 300)
  }

  function changeLanguageInLearningPathBanner() {
    setTimeout(() => {
      if (document.querySelector(".np-learning-path-completed-banner")) {
        if (document.querySelector("body").getAttribute("data-lang") == "EN") {
          document.querySelector(".np-learning-path-banner-headline").innerText = "Congratulations!"
          document.querySelector(".np-learning-path-banner-description").innerText = "You've completed this Learning Path."
          document.querySelector(".np-learning-path-banner-action").innerText = "Explore More Courses"
        } else if (document.querySelector("body").getAttribute("data-lang") == "DE") {
          document.querySelector(".np-learning-path-banner-headline").innerText = "Herzlichen Glückwunsch!"
          document.querySelector(".np-learning-path-banner-description").innerText = "Du hast diesen Lernpfad abgeschlossen."
          document.querySelector(".np-learning-path-banner-action").innerText = "Weitere Kurse erkunden"
        }
      }
    }, 300)
  }
</script>
