{% assign activity_count = 0 %}
{% for section in course.sections %}
{% assign activity_count = activity_count | plus: section.activities.size %}
{% endfor %}
{% if course.has_certificate? %}
<div class="np-resource-header np-course-header np-card-padding-large certificate-header">
  <div style="width: 100%;">
    <div class="np-top-title">
      <a href="#" onclick="window.history.back();" class="np-back-button" aria-label="{% t shared.go_back %}">
        <i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
      </a>
      {{ course.name }}
    </div>
    <div class="card-activity-count">{{ activity_count }}<br><span class="activity-label">Activities</span></div>
  </div>
  <div class="np-top-vocabulary np-text-title np-text-muted">
    <svg xmlns="http://www.w3.org/2000/svg" width="71" height="61" viewBox="0 0 71 61" fill="none">
      <path
        d="M33 30.5C33 31.163 32.7366 31.7989 32.2678 32.2678C31.7989 32.7366 31.163 33 30.5 33H15.5C14.837 33 14.2011 32.7366 13.7322 32.2678C13.2634 31.7989 13 31.163 13 30.5C13 29.837 13.2634 29.2011 13.7322 28.7322C14.2011 28.2634 14.837 28 15.5 28H30.5C31.163 28 31.7989 28.2634 32.2678 28.7322C32.7366 29.2011 33 29.837 33 30.5ZM30.5 18H15.5C14.837 18 14.2011 18.2634 13.7322 18.7322C13.2634 19.2011 13 19.837 13 20.5C13 21.163 13.2634 21.7989 13.7322 22.2678C14.2011 22.7366 14.837 23 15.5 23H30.5C31.163 23 31.7989 22.7366 32.2678 22.2678C32.7366 21.7989 33 21.163 33 20.5C33 19.837 32.7366 19.2011 32.2678 18.7322C31.7989 18.2634 31.163 18 30.5 18ZM65.5 38.4594V58C65.504 58.4407 65.3913 58.8747 65.1735 59.2579C64.9557 59.6411 64.6405 59.9599 64.2598 60.1819C63.8791 60.404 63.4464 60.5215 63.0056 60.5225C62.5649 60.5235 62.1317 60.4079 61.75 60.1875L54.25 55.8937L46.75 60.1875C46.3683 60.4079 45.9351 60.5235 45.4944 60.5225C45.0536 60.5215 44.6209 60.404 44.2402 60.1819C43.8595 59.9599 43.5443 59.6411 43.3265 59.2579C43.1087 58.8747 42.996 58.4407 43 58V50.5H5.5C4.17392 50.5 2.90215 49.9732 1.96447 49.0355C1.02678 48.0979 0.5 46.8261 0.5 45.5V5.5C0.5 4.17392 1.02678 2.90215 1.96447 1.96447C2.90215 1.02678 4.17392 0.5 5.5 0.5H60.5C61.8261 0.5 63.0979 1.02678 64.0355 1.96447C64.9732 2.90215 65.5 4.17392 65.5 5.5V15.0406C67.0804 16.554 68.338 18.3716 69.1972 20.384C70.0564 22.3964 70.4993 24.5619 70.4993 26.75C70.4993 28.9381 70.0564 31.1036 69.1972 33.116C68.338 35.1284 67.0804 36.946 65.5 38.4594ZM43 45.5V38.4594C40.2757 35.832 38.5539 32.336 38.1318 28.5747C37.7098 24.8135 38.6139 21.0228 40.6882 17.857C42.7625 14.6911 45.8768 12.3486 49.4937 11.2337C53.1106 10.1188 57.0033 10.3014 60.5 11.75V5.5H5.5V45.5H43ZM60.5 41.75C58.5201 42.5772 56.3957 43.0031 54.25 43.0031C52.1043 43.0031 49.9799 42.5772 48 41.75V53.6937L53 50.8312C53.3778 50.6153 53.8055 50.5017 54.2406 50.5017C54.6758 50.5017 55.1034 50.6153 55.4813 50.8312L60.4813 53.6937L60.5 41.75ZM65.5 26.75C65.5 24.525 64.8402 22.3499 63.604 20.4998C62.3679 18.6498 60.6109 17.2078 58.5552 16.3564C56.4995 15.5049 54.2375 15.2821 52.0552 15.7162C49.8729 16.1502 47.8684 17.2217 46.2951 18.795C44.7217 20.3684 43.6502 22.3729 43.2162 24.5552C42.7821 26.7375 43.0049 28.9995 43.8564 31.0552C44.7078 33.1109 46.1498 34.8679 47.9998 36.104C49.8499 37.3402 52.025 38 54.25 38C55.7274 38 57.1903 37.709 58.5552 37.1436C59.9201 36.5783 61.1603 35.7496 62.2049 34.7049C63.2496 33.6603 64.0783 32.4201 64.6436 31.0552C65.209 29.6903 65.5 28.2274 65.5 26.75Z"
        fill="#FF9886" />
    </svg>
  </div>
  <img src="{{ course.image_url }}" class="np-top-image np-hidden-desktop" alt="{{ course.name }}" />
</div>
{% else %}
<div class="np-resource-header np-course-header np-card-padding-large course-header">
  <div style="width: 100%;">
    <div class="np-top-title">
      <a href="#" onclick="window.history.back();" class="np-back-button" aria-label="{% t shared.go_back %}">
        <i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
      </a>
      {{ course.name }}
    </div>
    <div class="card-activity-count">{{ activity_count }}<br><span class="activity-label">Activities</span></div>
  </div>
  <div class="np-top-vocabulary np-text-title np-text-muted">
    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none">
      <path
        d="M78.6749 27.7938L41.1749 7.79376C40.8132 7.60116 40.4097 7.50043 40 7.50043C39.5902 7.50043 39.1867 7.60116 38.825 7.79376L1.32495 27.7938C0.924965 28.0069 0.590453 28.3248 0.357201 28.7134C0.123949 29.1021 0.000732422 29.5468 0.000732422 30C0.000732422 30.4533 0.123949 30.898 0.357201 31.2866C0.590453 31.6752 0.924965 31.9931 1.32495 32.2063L9.99995 36.8344V51.9656C9.99735 53.1936 10.4493 54.3791 11.2687 55.2938C15.3625 59.8531 24.5343 67.5 40 67.5C45.1279 67.5424 50.2175 66.6136 55 64.7625V75C55 75.663 55.2633 76.2989 55.7322 76.7678C56.201 77.2366 56.8369 77.5 57.5 77.5C58.163 77.5 58.7989 77.2366 59.2677 76.7678C59.7366 76.2989 60 75.663 60 75V62.3469C63.26 60.465 66.2059 58.0852 68.7312 55.2938C69.5506 54.3791 70.0025 53.1936 70 51.9656V36.8344L78.6749 32.2063C79.0749 31.9931 79.4094 31.6752 79.6427 31.2866C79.876 30.898 79.9992 30.4533 79.9992 30C79.9992 29.5468 79.876 29.1021 79.6427 28.7134C79.4094 28.3248 79.0749 28.0069 78.6749 27.7938ZM40 62.5C26.4781 62.5 18.525 55.8938 15 51.9656V39.5L38.825 52.2063C39.1867 52.3989 39.5902 52.4996 40 52.4996C40.4097 52.4996 40.8132 52.3989 41.1749 52.2063L55 44.8344V59.3156C51.0625 61.1531 46.0999 62.5 40 62.5ZM65 51.9531C63.5013 53.6161 61.8246 55.1094 60 56.4063V42.1656L65 39.5V51.9531ZM58.75 37.1688L58.6812 37.1281L41.1812 27.7938C40.5973 27.4955 39.9197 27.4386 39.2942 27.6352C38.6688 27.8319 38.1456 28.2663 37.8374 28.845C37.5293 29.4236 37.4607 30.1002 37.6466 30.7289C37.8325 31.3577 38.2579 31.8882 38.8312 32.2063L53.4375 40L40 47.1656L7.81245 30L40 12.8344L72.1875 30L58.75 37.1688Z"
        fill="#80C4FF" />
    </svg>
    </i>
  </div>
  <img src="{{ course.image_url }}" class="np-top-image np-hidden-desktop" alt="{{ course.name }}" />
</div>
{% endif %}
<style>
  .np-resource-header {
    flex-direction: row;
  }
  .np-course-header{
    padding-right: 132px;
  }
  .card-activity-count {
    padding-left: 42px;
    padding-top: 32px;
    padding-bottom: 0;
    margin-top: 0;
  }
</style>