<div class="row lps-row">
  {% assign displayed_learning_paths_count = 0 %}
  <div class="col-xs-12">
    <div class="flex-wrapper">
      <div class="dashboard-title">LEARNING PATHS: NEW AND IN PROGRESS</div>
      <div class="learning-paths-link">
        <a href="/app/learning_paths?category=completed">View completed Learning Paths</a>
      </div>
    </div>

    {% if learning_paths.enrolled.any? %}
      {% assign learning_paths_by_progress = learning_paths.enrolled | sort: "progress" | reverse %}
      {% assign learning_paths_index = 1 %}

      {% for learning_path in learning_paths_by_progress %}
        {% if learning_path.progress < 100 and learning_paths_index < 3 %}
          {% include "cards_learning_path" with learning_path %}
          {% assign learning_paths_index = learning_paths_index | plus: 1 %}
          {% assign displayed_learning_paths_count = displayed_learning_paths_count | plus: 1 %}
        {% endif %}
      {% endfor %}

      {% if displayed_learning_paths_count == 0 %}
        <div class="learning-paths-completed-card np-card">
          <div>
            <div class="flex-wrapper">
              <div class="completion-icon">
                <svg
                  width="102"
                  height="103"
                  viewBox="0 0 102 103"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg">
                  <path d="M48.4102 68.4844C46.2188 70.6758 42.832 70.6758 40.6406 68.4844L27.8906 55.7344C25.6992 53.543 25.6992 50.1562 27.8906 47.9648C30.082 45.7734 33.4688 45.7734 35.6602 47.9648L44.625 56.7305L66.1406 35.2148C68.332 33.0234 71.7188 33.0234 73.9102 35.2148C76.1016 37.4062 76.1016 40.793 73.9102 42.9844L48.4102 68.4844ZM102 51.75C102 80.0391 79.0898 102.75 51 102.75C22.7109 102.75 0 80.0391 0 51.75C0 23.6602 22.7109 0.75 51 0.75C79.0898 0.75 102 23.6602 102 51.75ZM51 10.3125C28.0898 10.3125 9.5625 29.0391 9.5625 51.75C9.5625 74.6602 28.0898 93.1875 51 93.1875C73.7109 93.1875 92.4375 74.6602 92.4375 51.75C92.4375 29.0391 73.7109 10.3125 51 10.3125Z" fill="#16C466" />
                </svg>
              </div>
              <div>
                <div class='completion-title-message'>Congratulations, you've completed all your assigned Learning Paths!</div>
                <div class="completion-subtitle-message">When new learning paths become available we'll send an email announcing it and they'll always appear here.<br>For now you can
                  <a href="/app/courses">browse your courses</a>,
                  <a href="/app/courses">watch previous events</a>, and sign-up for any
                  <a href="/app/training_events">upcoming events</a>.</div>
              </div>
            </div>
          </div>
        </div>

        <style>
          .learning-paths-link {
            display: none;
          }
        </style>
      {% endif %}
    {% else %}
      <div class="np-learning-paths-resources-container">
        <div class="np-zero-state-text">
          {% t.empty %}
        </div>
        <img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
      </div>
    {% endif %}
  </div>
</div>

<style>
  .completion-title-message {
    color: #000;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .completion-subtitle-message a {
    color: #0077B8;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
  }

  .completion-subtitle-message {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .completion-icon {
    margin-right: 14px;
  }

  .learning-paths-link {
    margin-bottom: 32px;
    text-align: right;
  }

  .learning-paths-link a {
    color: #0077B8;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
  }

  .learning-paths-link a:hover {
    color: #185A7D;
  }

  .learning-path-card.np-card {
    height: unset;
    min-height: unset;
  }

  .learning-paths-completed-card.np-card {
    padding: 0 !important;
    margin-bottom: 150px !important;
  }

  .learning-paths-completed-card .np-card-container {
    padding: 32px 16px;
  }

  .learning-paths-completed-card .learning-paths-completed-heading {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 16px;
  }

  @media(min-width:768px) {

    .lps-row .flex-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .lps-row .learning-paths-link {
      margin-bottom: 0;
    }

    .learning-paths-completed-card .flex-wrapper {
      display: flex;
    }

    .learning-paths-completed-card .np-card-container {
      padding: 32px;
    }

  }
</style>

<script>
  // hide title and link if no laernings paths to display
  $(document).ready(function() {
    const displayedLps = {{displayed_learning_paths_count}}

    if (displayedLps == 0) {
      $(".lps-row .dashboard-title").hide()
      $(".learning-paths-link").hide()
    }
  })
</script>