{% if learning_path.id == "fa4c61ac-e6cd-44dc-a8e0-9b95025968a5" %}
  <div class="np-learning-path-completed-banner np-learning-path-banner" style="background-color: #DBD7EE">
	<a class="np-learning-path-banner-image" style="width:30%; height:30%" onclick="downloadImage()">
	  <img style="width:100%; height:100%"
		   id="image"
			 src="http://i5.walmartimages.com/dfw/63925b23-3fe6/k2-_20d29bb1-77be-4634-b73c-6b0aa5ea0c2f.v1.png" >
	</a>
	<div class="np-learning-path-banner-content" style="align-items: center; display: flex; flex-direction: column; justify-content: center;">
	  <h3 class="np-learning-path-banner-headline" style="color: #8F75DD; font-size: 25px; font-weight: 500; line-height: 25px; margin: 0 0 4px;">You earned it!</h3>
	  <p class="np-learning-path-banner-description" style="color: #1b3e4f; font-size: 20px; font-weight: 400; line-height: 20px; margin: 0 0 12px;">
	  Congratulations, you're Scintilla Replenishment Certified. Click the button below to add your accomplishment to LinkedIn!</p>
	  <div class="np-learning-path-banner-actions">
		<a href="https://linkedin.com/profile/add/?startTask=Walmart%20Luminate%20Replenishment%20Certification&name=Walmart%20Luminate%20Replenishment%20Certification&organizationId=80427781&certUrl=https%3A%2F%2Fwalmartluminate.northpass.com"
		   class="np-learning-path-banner-action np-learning-path-banner-action--primary">
		  Add to LinkedIn!</a>
	  </div>
	</div>
  </div>
{% elsif learning_path.id == "f8ce6c73-a086-4e44-8b96-74883d7fae0e" %}
  <div class="np-learning-path-completed-banner np-learning-path-banner" style="background-color: #DBD7EE">
	<a class="np-learning-path-banner-image" style="width:30%; height:30%" onclick="downloadImage()">
	  <img style="width:100%; height:100%"
		   id="image"
			 src="http://i5.walmartimages.com/dfw/63925b23-e24c/k2-_20640e6f-a4db-4ab3-9377-a77d3df0f7d9.v1.png">

	</a>
	<div class="np-learning-path-banner-content" style="align-items: center; display: flex; flex-direction: column; justify-content: center;">
	  <h3 class="np-learning-path-banner-headline" style="color: #8F75DD; font-size: 25px; font-weight: 500; line-height: 25px; margin: 0 0 4px;">You earned it!</h3>
	  <p class="np-learning-path-banner-description" style="color: #1b3e4f; font-size: 20px; font-weight: 400; line-height: 20px; margin: 0 0 12px;">
	  Congratulations, you're Scintilla Sales Analysis Certified. Click the button below to add your accomplishment to LinkedIn!</p>
	  <div class="np-learning-path-banner-actions">
		<a href="https://linkedin.com/profile/add/?startTask=Walmart%20Luminate%20Sales%20Analysis%20Certification&name=Walmart%20Luminate%20Sales%20Analysis%20Certification&organizationId=80427781&certUrl=https%3A%2F%2Fwalmartluminate.northpass.com" class="np-learning-path-banner-action np-learning-path-banner-action--primary">
		  Add to LinkedIn!</a>
	  </div>
	</div>
  </div>
{% elsif learning_path.id == "33ef47b2-915d-4b57-b58e-dacfa34f5e3d" %}
  <div class="np-learning-path-completed-banner np-learning-path-banner" style="background-color: #DBD7EE">
	<a class="np-learning-path-banner-image" style="width:30%; height:30%" onclick="downloadImage()">
	  <img style="width:100%; height:100%"
		   id="image"
			 src="http://i5.walmartimages.com/dfw/63925b23-9dbe/k2-_1f6d66a6-d31a-4d13-a07d-0d869735c72c.v1.png">
	</a>
	<div class="np-learning-path-banner-content" style="align-items: center; display: flex; flex-direction: column; justify-content: center;">
	  <h3 class="np-learning-path-banner-headline" style="color: #8F75DD; font-size: 25px; font-weight: 500; line-height: 25px; margin: 0 0 4px;">You earned it!</h3>
	  <p class="np-learning-path-banner-description" style="color: #1b3e4f; font-size: 20px; font-weight: 400; line-height: 20px; margin: 0 0 12px;">
	  Congratulations, you're Scintilla Customer Insights Certified. Click the button below to add your accomplishment to LinkedIn!</p>
	  <div class="np-learning-path-banner-actions">
		<a href="https://linkedin.com/profile/add/?startTask=Walmart%20Luminate%20Customer%20and%20Shopper%20Insights%20Certification&name=Walmart%20Luminate%20Customer%20Insights%20Certification&organizationId=80427781&certUrl=https%3A%2F%2Fwalmartluminate.northpass.com" class="np-learning-path-banner-action np-learning-path-banner-action--primary">
		  Add to LinkedIn!</a>
	  </div>
	</div>
  </div>
{% else %}
<div class="np-learning-path-completed-banner np-learning-path-banner">
  <img class="np-learning-path-banner-image" src="https://s3.amazonaws.com/static.northpass.com/images/stars-completed.svg"/>
  <div class="np-learning-path-banner-content">
    <h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
    <p class="np-learning-path-banner-description">{% t .description %}</p>
    <div class="np-learning-path-banner-actions">
      {% if learning_path.certificate_link %}
        <a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--primary">{% t .actions.certificate %}</a>
      {% endif %}
      <a href="/app/courses" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.more_courses %}</a>
    </div>
  </div>
</div>
{% endif %}

<script>
  function downloadImage() {
        axios({
		  	url:"https://s3.amazonaws.com/schoolkeep-production/wysiwyg/10183441-2254-4b1e-a9f7-9549ca773257/20240214175234_Replenishment%20Badge.png",
            method: 'GET',
            responseType: 'blob'
        })
            .then((response) => {
                const url = window.URL
                    .createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'image.jpg');
                document.body.appendChild(link);
                link.click();
            })
    }
</script>
