{% 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="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/10183441-2254-4b1e-a9f7-9549ca773257/20240214175234_Replenishment%20Badge.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>
{% 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>
