{% comment %}
  {% if learning_paths.enrolled.any? %}
    {% assign total_course_finished = 0 %}
    {% assign all_learning_paths = learning_paths.enrolled %}
    {% for learning_path in learning_paths.enrolled %}
      {% for item in learning_path.items %}
        {% if item.course? %}
          {% if item.completed? %}
            {% assign total_course_finished = total_course_finished | plus: 1 %}
          {% endif %}
        {% endif %}
      {% endfor %}
    {% endfor %}
  {% endif %}  
{% endcomment %}

<div class="scoreboard">
  <div class="scoreboard-content">
    {% comment %}
      <div class="total-credentials np-flex">
        <span>{{total_course_finished}}</span> total credentials Earned
      </div>
    {% endcomment %}
    <div class="complete-learning-paths">
      <div class="complete-learning-paths-title">You are subject experts in...</div>
      <div class="scoreboard-lps">
        {% if learning_paths.available.any? %}
          {% for learning_path in learning_paths.available %}
            {% if learning_path.completed? %}
              <div class="complete-lp-item">
                <svg class="complete-lp-icon" width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.70508 23.9998V7.4541H17.1159V23.9998L11.4105 18.4845L5.70508 23.9998Z" fill="#18D8AD"/>
                  <g style="mix-blend-mode:multiply">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L11.0311 11.7915L15.1417 7.39648L16.8085 8.9554L11.0312 15.1322L2.28216 5.78004V18.2946H0V0Z" fill="#009C8A"/>
                  </g>
                </svg>

                <a class="lp-name" href="{% route learning_path, id: learning_path.id %}">{{learning_path.name}}</a>
              </div>
            {% endif %}
          {% endfor %}
        {% endif %}
      </div>

      <a class="learning-path-redirect-button" href="/app/learning_paths">
        Learn more about MATTR Badges
      </a>
    </div>
    <div class="progress-overview">
      <div class="overview-title">Progress overview</div>
      <div class="scoreboard-lps">
        {% if learning_paths.enrolled.any? %}
          {% for learning_path in learning_paths.enrolled %}
            {% unless learning_path.completed? %}
              {% assign learning_path_item_completed = 0 %}

              {% for item in learning_path.items %}
                {% if item.course? %}
                  {% if item.completed? %}
                    {% assign learning_path_item_completed = learning_path_item_completed | plus: 1 %}
                  {% endif %}
                {% endif %}
              {% endfor %}

              {% assign learning_path_size = learning_path.items | size %}
              {% assign completed_percent = learning_path_item_completed | times: 100 | divided_by: learning_path_size %}

              {% assign lp_name_formatted = learning_path.name | replace: " ", "-" | downcase %}
              <div class="lp-item">
                <div class="lp-info">
                  <a class="lp-name" href="/app/learning_paths#{{lp_name_formatted}}">{{learning_path.name}}</a>
                  <div class="lp-courses-count">{{learning_path_item_completed}}/{{learning_path_size}}</div>
                </div>
                <div class="lp-progress">
                  <div style="width: {{completed_percent}}%;" class="lp-progress lp-progress-gain"></div>
                </div>
                <div class="lp-progress-percent">{{completed_percent}}% completed</div>
              </div>           
            {% endunless %}

          {% endfor %}
        {% endif %}
      </div>
    </div>

    
  </div>
</div>

<style>
  .scoreboard {
    margin-bottom:32px;
  }

  .lp-name {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #333132;
  }

  .complete-lp-item {
    display: flex;
    margin-bottom: 32px;
    align-items: center;
  }

  .complete-lp-icon {
    margin-right: 12px;
  }

  .scoreboard-content {
    display: flex;
    flex-direction: column;
  }

  .learning-path-redirect-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 39px;
    gap: 10px;
    background: #F5F6FF;
    border-radius: 32px;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 15px;
    color: #100796;
  }

  .lp-item {
    margin-bottom: 32px;
  }

  .scoreboard {
    border: 1px solid #EBEAEB;
    padding: 32px 24px 0;
  }

  .scoreboard .total-credentials {
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    align-items:center;
    color:#333132;
  }

  .scoreboard .total-credentials > span {
    font-size: 28px;
    line-height: 35px;
    color: #100796;
    margin-right:10px;
    padding: 12px;
    background-color: #fff;;
    position:relative;
    border-radius: 50%;
    min-width: 59px;
    min-height: 59px;
    text-align: center;
  }

  .scoreboard .total-credentials > span:after {
      background: linear-gradient(180deg, #2E29FC 0%, rgba(0, 189, 157, 0.3) 100%),
                  linear-gradient(0deg, #FFFFFF, #FFFFFF);
      border-radius: 50%;
      content: "";
      height: calc(100% + 4px);
      left: -2px;
      position: absolute;
      top: -2px;
      width: calc(100% + 4px);
      z-index: -1;
  }

  .scoreboard hr {
    margin:20px 0;
  }

  .overview-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 23px;
    margin:32px 0;
  }

  .complete-learning-paths-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 23px;
    margin-bottom: 32px;
  }

  .scoreboard .lp-info {
    display:flex;
    font-weight:600;
    font-size:14px;
    justify-content:space-between;
    margin-bottom:12px;
    color:#333132;
  }

  .scoreboard .lp-progress {
    background-color:#E2E5FF;
    height:4px;
    width:100%;
  }

  .scoreboard .lp-progress-percent {
    margin-top:12px;
    color:#A4A1A2;
    font-weight: 500;
    font-size: 12px;
  }

  .lp-progress-gain {
    border-radius: 0px 4px 4px 0px;
    background-color: #2D29FC !important;
  }
</style>