<div id="path-banner" class="np-resource-header np-resource-header-card np-card-padding-large">
  <div id="path-text-title" class="np-top-vocabulary np-text-title">
    {% t shared.learning_path.title %}
    <i id="path-icon-lp" class="far fa-road np-button-color np-learning-path-icon"></i>
  </div>
  <div id="path-banner-title" class="np-top-title">
    <a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
      <i id="path-arrow" class="far fa-arrow-left np-icon-back"></i>
    </a>
    {{ learning_path.name }}
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="np-card-container">
      <img src="{{ learning_path.image_url }}" class="np-top-image" alt="{{ learning_path.name }}" />
      <div class="np-card-padding-dynamic">
        {% include "learning_path_description" %}
        {% include "learning_path_instructors" %}
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 np-grid-spacing">
    <div class="np-top-cta">
      {% include "learning_path_progress_and_cta" %}
    </div>
    {% include "learning_path_outline" %}
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script type="text/javascript">
  var url = window.location.pathname;
  if (url.indexOf('/app/learning_paths/283ab1f9-5bd5-4e64-b6e5-4a3a5e0cde5a') > -1) {
    $("#path-banner").attr("class", "path-banner-y1 np-resource-header np-resource-header-card np-card-padding-large");
    $("#path-banner-title").attr("class", "path-top-title");
    $("#path-arrow").attr("class", "far fa-arrow-left path-icon-arrow");
    $("#path-icon-lp").attr("class", "far fa-road path-icon-lp");
    $("#path-text-title").attr("class", "np-top-vocabulary path-text-title");

  } else if (url.indexOf('/app/learning_paths/577d28e6-b581-44fe-90bf-aff269c8394d') > -1) {
    $("#path-banner").attr("class", "path-banner-y1 np-resource-header np-resource-header-card np-card-padding-large");
    $("#path-banner-title").attr("class", "path-top-title");
    $("#path-arrow").attr("class", "far fa-arrow-left path-icon-arrow");
    $("#path-icon-lp").attr("class", "far fa-road path-icon-lp");
    $("#path-text-title").attr("class", "np-top-vocabulary path-text-title");

  } else if (url.indexOf('/app/learning_paths/b56514cf-6bfc-44f0-b213-089aed603961') > -1) {
    $("#path-banner").attr("class", "path-banner-y2 np-resource-header np-resource-header-card np-card-padding-large");
    $("#path-banner-title").attr("class", "path-top-title");
    $("#path-arrow").attr("class", "far fa-arrow-left path-icon-arrow");
    $("#path-icon-lp").attr("class", "far fa-road path-icon-lp");
    $("#path-text-title").attr("class", "np-top-vocabulary path-text-title");

  } else if (url.indexOf('/app/learning_paths/93c7eb64-c9b6-4028-ab58-1ef5eeffb37e') > -1) {
    $("#path-banner").attr("class", "path-banner-y2 np-resource-header np-resource-header-card np-card-padding-large");
    $("#path-banner-title").attr("class", "path-top-title");
    $("#path-arrow").attr("class", "far fa-arrow-left path-icon-arrow");
    $("#path-icon-lp").attr("class", "far fa-road path-icon-lp");
    $("#path-text-title").attr("class", "np-top-vocabulary path-text-title");

  } else if (url.indexOf('/app/learning_paths/3266a89f-8aa2-4f2e-9039-db5500e2d4ab') > -1) {
    $("#path-banner").attr("class", "path-banner-y3 np-resource-header np-resource-header-card np-card-padding-large");
    $("#path-banner-title").attr("class", "path-top-title");
    $("#path-arrow").attr("class", "far fa-arrow-left path-icon-arrow");
    $("#path-icon-lp").attr("class", "far fa-road path-icon-lp");
    $("#path-text-title").attr("class", "np-top-vocabulary path-text-title");

  } else if (url.indexOf('/app/learning_paths/7f43d5da-1275-45bc-8618-29cb20c0a179') > -1) {
    $("#path-banner").attr("class", "path-banner-y4 np-resource-header np-resource-header-card np-card-padding-large");
    $("#path-banner-title").attr("class", "path-top-title");
    $("#path-arrow").attr("class", "far fa-arrow-left path-icon-arrow");
    $("#path-icon-lp").attr("class", "far fa-road path-icon-lp");
    $("#path-text-title").attr("class", "np-top-vocabulary path-text-title");

  } else {
    $("#path-banner").attr("class", "np-resource-header np-resource-header-card np-card-padding-large");
    $("#path-banner-title").attr("class", "np-top-title");
    $("#path-arrow").attr("class", "far fa-arrow-left np-icon-back");
    $("#path-icon-lp").attr("class", "far fa-road np-button-color np-learning-path-icon");
    $("#path-text-title").attr("class", "np-top-vocabulary np-text-title");
  }
</script>