<div class="np-top-cta-progress-content">
  <div class="np-top-cta-progress-title np-text-title">
    <span class="lang-en-US">{% t.header %}</span>
    <span class="lang-es">
      Progreso del Curso</span>
    <span class="lang-fr">
      Progression du Cours</span>
    <span class="lang-de">
      Kurs-Fortschritt</span>
    <span class="lang-en-GB">Course Progress</span>
    <span class="lang-nl">
      Cursus-voortgang</span>
    <span class="lang-pt-BR">Progresso do Curso</span>
  </div>
  <div class="np-progress-bar-container">
    <div style="width: {{ course.progress }}%" class="np-card-progress-bar np-learning-progress-bar-color"></div>
  </div>

  <div class="np-top-cta-progress-text
    {% if course.completed? %} np-color-success {% else %} np-learning-progress-text-color {% endif %}
  ">
  {% if course.completed? %}
    <span class="lang-en-US">Completed</span>
    <span class="lang-es">Completado</span>
    <span class="lang-fr">Terminé</span>
    <span class="lang-de">Abgeschlossen</span>
    <span class="lang-en-GB">Completed</span>
    <span class="lang-nl">Voltooid</span>
    <span class="lang-pt-BR">Completo</span>
  {% elsif course.enrolled? %}
    <span class="lang-en-US">In Progress</span>
    <span class="lang-es">En Progreso</span>
    <span class="lang-fr">En Cours</span>
    <span class="lang-de">In Bearbeitung</span>
    <span class="lang-en-GB">In Progress</span>
    <span class="lang-nl">In Progress</span>
    <span class="lang-pt-BR">Em Progresso</span>
  {% else %}
  <span class="lang-en-US">{% t shared.progress
      , count: course.progress %}</span>
    <span class="lang-es">No iniciado</span>
    <span class="lang-fr">Non commencé</span>
    <span class="lang-de">Fortschritt</span>
    <span class="lang-en-GB">Not started</span>
    <span class="lang-nl">Niet begonnen</span>
    <span class="lang-pt-BR">Não iniciado</span>
  {% endif %}
  </div>
  {% include "product_expiration_date"
    , date: course.expiration_date %}
</div>

<div class="np-top-cta-container">
  {% 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">
      <span class="lang-en-US">{% t.retake
          , key: current_school.course_vocabulary %}</span>
        <span class="lang-es">Repetir Curso</span>
        <span class="lang-fr">Reprendre le Cours</span>
        <span class="lang-de">Kurs wiederholen</span>
        <span class="lang-en-GB">Retake Course</span>
        <span class="lang-nl">Cursus herhalen</span>
        <span class="lang-pt-BR">Repetir Curso</span>
      </button>
    </form>
  {% else %}
    <a
      class="np-top-button np-button-font-color np-button np-button-big"
      {% 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-US">{% t shared.enroll %}</span>
        <span class="lang-es">Inscribirse</span>
        <span class="lang-fr">S'inscrire</span>
        <span class="lang-de">Anmelden</span>
        <span class="lang-en-GB">Enroll</span>
        <span class="lang-nl">Inschrijven</span>
        <span class="lang-pt-BR">Inscrição</span>
      {% elsif course.started? == false %}
      <span class="lang-en-US">View Course</span>
        <span class="lang-es">Ver Curso</span>
        <span class="lang-fr">Voir le Cours</span>
        <span class="lang-de">Kurs ansehen</span>
        <span class="lang-en-GB">View Course</span>
        <span class="lang-nl">Cursus bekijken</span>
        <span class="lang-pt-BR">Ver Curso</span>
      {% elsif course.completed? %}
        {% t shared.course.view
          , key: current_school.course_vocabulary %}</span>
        <span class="lang-es">Ver Curso</span>
        <span class="lang-fr">Voir le Cours</span>
        <span class="lang-de">Kurs ansehen</span>
        <span class="lang-en-GB">View Course</span>
        <span class="lang-nl">Cursus bekijken</span>
        <span class="lang-pt-BR">Ver Curso</span>
      {% else %}
      <span class="lang-en-US">{% t shared.continue %}</span>
        <span class="lang-es">Continuar</span>
        <span class="lang-fr">Continuer</span>
        <span class="lang-de">Fortsetzen</span>
        <span class="lang-en-GB">Continue</span>
        <span class="lang-nl">Verder</span>
        <span class="lang-pt-BR">Continuar</span>
      {% endif %}
    </a>
  {% endif %}
</div>