{% if learning_path.enrolled? %}
  <div class="np-top-cta-progress-content">
    <div class="np-top-cta-progress-title np-text-title">
      <span class="lang-en-US">{% t .progress %}</span>
      <span class="lang-es">Progreso</span>
      <span class="lang-fr">Progression</span>
      <span class="lang-de">Fortschritt</span>
      <span class="lang-en-GB">Progress</span>
      <span class="lang-nl">Progressie</span>
      <span class="lang-pt-BR">Progresso</span>
    </div>
    <div class="np-progress-bar-container">
      <div
        style="width: {{ learning_path.progress }}%"
        class="np-card-progress-bar np-learning-progress-bar-color">
      </div>
    </div>
    <div class="np-top-cta-progress-text
      {% if learning_path.completed? %} np-color-success {% else %} np-learning-progress-text-color {% endif %}
    ">
    {% if learning_path.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 learning_path.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: learning_path.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: learning_path.expiration_date %}
  </div>
{% endif %}

<div class="np-top-cta-container">
  {% learning_path_next_step_button learning_path, class: "np-top-button np-button-font-color np-button np-button-big" %}
</div>
