{% assign lp_contains_ilt = false %}

<div class="np-learning-path-outline blocks-layout">
  {% for item in learning_path.items %}
    {% if item.course? %}
      {% include "learning_path_course", course: item %}
    {% elsif item.training_event? %}
    {% assign lp_contains_ilt = true %}
      {% include "learning_path_training_session", training_session: item %}
    {% endif %}
  {% endfor %}
</div>

<style>
  .outline-card__icon-link {
    background-color: #3E1191;
    color: #ffffff;
  }

  .outline-card__icon-link:hover {
    background-color: #7625F7;;
  }

	.np-learning-path-session-card .np-card-content {
		flex-direction:column;
		padding:16px;
	}

  .np-learning-path-session-card .np-events-content-date-wrapper {
    height:185px;
    margin-bottom:20px;
  }

	.np-learning-path-session-card .np-events-content-date {
		min-width: auto;
    width: 100%;
    padding: 8px 16px;
    height: 100%;
    margin: 0 auto 16px;
	}

  .np-learning-path-session-card .np-events-content-month,
  .np-learning-path-session-card .np-events-content-day {
		font-size: 32px;
	}

	.np-learning-path-session-card .np-events-content-time { font-size:16px;}

	.np-learning-path-session-card .np-optional-ribbon {
		background-color: #B6B9C2;
    padding: 0.25rem 1rem;
    border-radius: 1.5rem;
    line-height: 1.1;
    text-transform: none;
    font-size: 0.75rem;
    text-align: center;
    color: #fff;
		right: 22px;
    top: 22px;
    bottom: unset;
	}

	.np-learning-path-session-card .np-learning-path-outline-name {
		font-size:18px;
	}

	.np-learning-path-session-card .register-button {
		width: auto;
    border-radius: 30px;
    padding: 6px 16px;
    min-width: 115px;
    text-align: center;
    margin-right: 0;
		background-color: #3E1191;
    color: #ffffff;
		margin-left:auto;
	}

	@media (min-width:768px) {
		.np-learning-path-session-card .np-card-content {
			flex-direction:row;
			align-items: center;
		}

    .np-learning-path-session-card .np-events-content-date-wrapper {
      width: 40%;
      max-width: 300px;
      height: calc(100% + 32px);
      margin: -16px 0;
      padding: 16px;
      border-right: 1px solid #e0f3ff;
      position:relative;
      left: -16px;
      flex:1;
    }

     .np-learning-path-session-card .np-events-content-date {
      margin: 0 8px;
      width:auto;
    }

		.np-learning-path-session-card .np-events-content-day {
			font-size: 30px;
    	line-height: normal;
		}

		.np-learning-path-session-card .np-learning-path-outline-content {
			flex-direction:column;
      padding: 6px 16px 0 0;
      height:100%;
      flex: 1;
		}

		.np-learning-path-session-card .np-optional-ribbon {
			right: 22px;
      top: 22px;
		}

		.np-learning-path-session-card .np-learning-path-outline-name {
    	font-size: 16px;
		}
	}
</style>

<script>
  buttons = document.getElementsByClassName("np-learning-path-outline-item");

  for (i = 0; i < buttons.length; i++) {
   buttons[i].href = buttons[i].href.replace('/app','');
  }

  const lpContainsILT = {{lp_contains_ilt}}

  //if (!lpContainsILT) {
    if (!$(".cta__container.cta--outline").hasClass('all-optional-items')) {
      console.log("reorder lp.")
      reorderLpCoursesByRequirement()
    }
  //}

  function reorderLpCoursesByRequirement() {
    var indexes = document.querySelectorAll(".lp-course");
    var indexesArray = Array.from(indexes);

    const sortByRequirementAttr = arr => {
      const sorter = (a, b) => {
          return b.dataset.required - a.dataset.required;
      }
      arr.sort(sorter);
    };

    sortByRequirementAttr(indexesArray);   
    $(".np-learning-path-outline").empty()

    indexesArray.forEach(e =>
      document.querySelector(".np-learning-path-outline").appendChild(e));

  }

</script>