<div class="np-top-cta-progress-content">
  <div class="small-heading lang-en">
    Course progress
  </div>
  <div class="small-heading lang-de">
    Kursfortschritt
  </div>
  <div class="small-heading lang-fr">
    Progression de la formation
  </div>
  <div class="small-heading lang-jp">
    コースの進捗
  </div>
  <div class="progress-overview">
    <div class="np-progress-bar-container">
      <div
        style="width: {{ course.progress }}%"
        class="np-button-background-color np-card-progress-bar">
      </div>
    </div>
    <div class="progress-text">
      {{ course.progress }}%
    </div>
  </div>

</div>

{% if course.learner_can_retake? %}
  <form action="{% route course_retake, id: course.id %}" method="POST">
    {% form_authenticity_token %}
    <button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
      {% t .retake, key: current_school.course_vocabulary %}
    </button>
  </form>
{% else %}
  <div class="overview-cta-btn-container">
    <a
      class="overview-cta-btn"
    {% if course.enrolled? %}
        href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
    {% else %}
        href="{% route course_enrollment, code: course.enrollment_code %}"
    {% endif %}
    >
      {% if course.enrolled? == false %}
        <span class="lang-en"> Get started </span>
        <span class="lang-fr"> Commencer </span>
		<span class="lang-de"> Loslegen </span>
		<span class="lang-jp"> 今すぐ開始 </span>
      {% elsif course.started? == false %}
        <span class="lang-en"> Start Course </span>
        <span class="lang-fr"> Commencer </span>
		<span class="lang-de"> Kurs starten </span>
		<span class="lang-jp"> 今すぐ開始 </span>
      {% elsif course.completed? %}
     	<span class="lang-en"> Start </span>
        <span class="lang-fr"> Commencer </span>
		<span class="lang-de"> Starten </span>
		<span class="lang-jp"> 今すぐ開始 </span>
        {% t shared.course.view, key: current_school.course_vocabulary %}
      {% else %}
        {% t shared.continue %}
      {% endif %}
    </a>
  </div>
{% endif %}

<style>
  .progress-text {
    color: #42A2FF;
    font-size: 14px;
    font-weight: 600;
    line-height: 19.6px;
    letter-spacing: -0.01em;
  }
  .progress-overview {
    display: flex;
    gap: 20px;
  }
  .overview-cta-btn {
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    padding: 7px 18px;
    background: #0F2B46;
    border-radius: 40px;
    text-decoration: none;
  }
  .overview-cta-btn-container {
    display: flex;
    width: 100%;
    max-width: 150px;
  }
</style>
