{% if learning_path.enrolled? %}
  <div class="np-top-cta-progress-content">
    <div class="small-heading lang-en">
      Learning path progress
    </div>
    <div class="small-heading lang-de">
      Lernpfadfortschritt
    </div>
    <div class="small-heading lang-jp">
      学習プログラムの進捗
    </div>
    <div class="small-heading lang-fr">
      Progression du parcours d’apprentissage
    </div>
    <div class="progress-overview">
      <div class="np-progress-bar-container">
        <div
          style="width: {{ learning_path.progress }}%"
          class="np-button-background-color np-card-progress-bar">
        </div>
      </div>
      <div class="progress-text">
        {{ learning_path.progress }}%
      </div>
    </div>
  </div>
{% endif %}
<div class="overview-cta-btn-container">
  {% learning_path_next_step_button learning_path, class: "overview-cta-btn" %}
</div>


<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>