Gainsight/Custom_Templates/customer_templates/Agriwebb/_achievements_modal.html.liquid

  <button
    type="button"
    class="dialog-trigger np-view-all-achievements"
    data-toggle-class-on-target
    data-toggle-target="#dialog_achievements"
    data-toggle-escape
    data-toggle-modal>
    View All
  </button>

<div class="dialog" id="dialog_achievements">
	<section class="dialog-container">
		<header class="dialog-header">
			<h5>Achievements</h5>
      <button
				type="button"
				data-toggle-trigger-off 
        class="modal-close"
        >
				<i class="fal fa-times"></i>
			</button>
		</header>
		<div class="dialog-content acheievements-list row">
      {% assign courses_by_name = courses.enrolled | sort: "name" %}
      {% for course in courses_by_name %}
        {% if course.properties.badges != "NULL" %}
          <div class="np-card-content-title achievements-card col-xs-12 col-md-6 col-lg-4">
            <div class="course-badge">
              <div class="badge-title">
                {{ course.name }}
              </div>
              {% if course.progress == 100 %}
                  <img class="np-achievement-icon" src="{{ course.properties.badges }}" />
                  <div class="badge-btns">
                    <a class="badge-btn" onclick="downloadImage('{{ course.properties.badges }}', '{{ course.name }}')"> Download</a>
                    <a class="badge-btn add-to-linkedin" href="https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name={{course.name}}&organizationId=3211815" target="_blank">Add to LinkedIn</a>
                  </div>
              {% else %}
                  <img class="np-achievement-icon badge-locked" src="{{ course.properties.badges }}" />
                  <div class="badge-btns">
                  </div>
              {% endif %}
            </div>
          </div>  
        {% endif %}                
      {% endfor %}		
		</div>
	</section>
</div>

<style>
  .dialog-trigger {
    display: inline-block;
    padding: 0;
    overflow: hidden;
    border: none;
    background: none;
    color: #000;
    text-decoration: underline;
  }
  .dialog-trigger:hover,
  .dialog-trigger:focus {
    text-decoration: none;
  }
  .dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
   /* padding: 1em; */
    background-color: rgba(0,0,0,.75);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: .25s ease-out;
  }
  .dialog.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .dialog-container {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    margin: auto;
    transform: translateY(-1em) scale(.95);
    background-color: white;
    transition: transform .25s ease-out;
  }
  .dialog.is-active .dialog-container {
    transform: translateY(0) scale(1);
  }
  .dialog-header {
    padding: 1rem;
  }

  .dialog-content {
    padding: 48px 32px;
    max-width: 1920px;
    margin: auto;
    overflow-y: scroll;
    max-height: 100%;
  }
  .dialog-header {
    background-color: #092344;
    color: white;
    font-weight: 500;
    text-align:center;
    position:relative;
  }
  .dialog-header h5 {
    margin: 0;
    font-size:1.2rem;
  }

  .dialog-header button {
    border: none;
    color: white;
    position:absolute;
    right:12px;
    top:4px;
    background: transparent;
    font-size: 1.7rem;
    cursor:pointer;
    padding:8px;
  }

  .achievements-card {
    margin-bottom:32px;
  }

  .course-badge {
    padding:16px;
    text-align:center;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .badge-title {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.3rem;
    margin: 0 auto 8px;
    max-width: 200px;
    flex:1
  }

  .course-badge img {
    border-radius: 50%;
  }
  .badge-btns {
    display: flex;
    justify-content: center;
    flex: 1;
  }

  .badge-btns a {
    margin: 8px;
  }

  .badge-btn {
    background: #092344;
    padding: 12px 16px;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.1s;
    min-width: 130px;
    line-height: 16px;
  }

  .badge-btn:hover,
  .badge-btn:hover {
    background-color:#65bb39;
  }
  .badge-locked {
    filter: grayscale(50) opacity(30%) blur(1px);
  }
</style>

<script>
  async function downloadImage(imageSrc, fileName) {
    const fileNameFinal = fileName.replaceAll(" ", "-").toLowerCase()
    const image = await fetch(imageSrc)
    const imageBlog = await image.blob()
    const imageURL = URL.createObjectURL(imageBlog)

    const link = document.createElement('a')
    link.href = imageURL
    link.download = fileNameFinal
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }    

  // Get month and year and append as date params to linkedin links
  const date = new Date()
  const month = date.getMonth() + 1
  const year = date.getFullYear()

  const issueDateParams = "&issueYear=" + year + "&issueMonth=" + month

  $(".add-to-linkedin").attr('href', function(index, item) {
    return item + issueDateParams;
  });

</script>