{% if course.properties.product_names_for_course_cards == 'Anthology Reach' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %}
  {% assign product_alt = 'Anthology Reach' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#731013' %}
  {% assign color_light = '#F58545' %}
{% elsif course.properties.product_names_for_course_cards == 'Radius' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#F3798A' %}
  {% assign color_light = '#F58545' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Engage' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Engage.svg' %}
  {% assign product_alt = 'Anthology Engage' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#F16423' %}
  {% assign color_light = '#F3798A' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Beacon' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Beacon.svg' %}
  {% assign product_alt = 'Anthology Beacon' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#D94827' %}
  {% assign color_light = '#F16423' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Milestone' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Milestone.svg' %}
  {% assign product_alt = 'Anthology Milestone' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#F3798A' %}
  {% assign color_light = '#F9B5B5' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Occupation Insight' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Occupation+Insight.svg' %}
  {% assign product_alt = 'Anthology Occupation Insight' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#F58545' %}
  {% assign color_light = '#F9B5B5' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Raise' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Raise.svg' %}
  {% assign product_alt = 'Anthology Raise' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#D94827' %}
  {% assign color_light = '#F9B5B5' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Digital Assistant' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Digital+Assistant.svg' %}
  {% assign product_alt = 'Anthology Digital Assistant' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#D94827' %}
  {% assign color_light = '#F58545' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Baseline' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Baseline.svg' %}
  {% assign product_alt = 'Anthology Baseline' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#731013' %}
  {% assign color_light = '#D94827' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Encompass' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Encompass.svg' %}
  {% assign product_alt = 'Anthology Encompass' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#731013' %}
  {% assign color_light = '#F3798A' %}
{% elsif course.properties.product_names_for_course_cards == 'Talisma' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#D94827' %}
  {% assign color_light = '#F3798A' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Student' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Student.svg' %}
  {% assign product_alt = 'Anthology Student' %}
  {% assign color_main = '#82C342' %}
  {% assign color_dark = '#96CA51' %}
  {% assign color_light = '#F3E588' %}
{% elsif course.properties.product_names_for_course_cards == 'CVue' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#82C342' %}
  {% assign color_dark = '#286734' %}
  {% assign color_light = '#F3E588' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Insight' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Insight.svg' %}
  {% assign product_alt = 'Anthology Insight' %}
  {% assign color_main = '#82C342' %}
  {% assign color_dark = '#286734' %}
  {% assign color_light = '#82C342' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Finance & HCM' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Finance+%26+HCM.svg' %}
  {% assign product_alt = 'Anthology Finance & HCM' %}
  {% assign color_main = '#82C342' %}
  {% assign color_dark = '#539542' %}
  {% assign color_light = '#C9BD2E' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Payroll' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Payroll.svg' %}
  {% assign product_alt = 'Anthology Payroll' %}
  {% assign color_main = '#82C342' %}
  {% assign color_dark = '#000000' %}
  {% assign color_light = '#82C342' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Academic Economics' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Academic+Economics.svg' %}
  {% assign product_alt = 'Anthology Academic Economics' %}
  {% assign color_main = '#82C342' %}
  {% assign color_dark = '#000000' %}
  {% assign color_light = '#286734' %}
{% elsif course.properties.product_names_for_course_cards == 'Blackboard' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %}
  {% assign product_alt = 'Blackboard' %}
  {% assign color_main = '#1BA8E1' %}
  {% assign color_dark = '#027BB6' %}
  {% assign color_light = '#1BA8E1' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Ally' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Ally.svg' %}
  {% assign product_alt = 'Anthology Ally' %}
  {% assign color_main = '#1BA8E1' %}
  {% assign color_dark = '#1BA8E1' %}
  {% assign color_light = '#A3DBDC' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Course Evaluations' %}
  {% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Course+Evaluations.svg' %}
  {% assign product_alt = 'Anthology Course Evaluations' %}
  {% assign color_main = '#1BA8E1' %}
  {% assign color_dark = '#004C6D' %}
  {% assign color_light = '#027BB6' %}
{%- comment -%} NEED DIFF IMG FORMAT FOR THIS ONE {%- endcomment -%}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Evaluate' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#1BA8E1' %}
  {% assign color_dark = '#027BB6' %}
  {% assign color_light = '#A3DBDC' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Portfolio' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Portfolio.svg' %}
  {% assign product_alt = 'Anthology Portfolio' %}
  {% assign color_main = '#1BA8E1' %}
  {% assign color_dark = '#0090A1' %}
  {% assign color_light = '#5CC6CC' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Program Review' %}
  {% assign product_logo = 'https://s3.amazonaws.com/static.northpass.com/anthology/Program+Review.svg' %}
  {% assign product_alt = 'Anthology Program Review' %}
  {% assign color_main = '#1BA8E1' %}
  {% assign color_dark = '#027BB6' %}
  {% assign color_light = '#5CC6CC' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Planning' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Planning.svg' %}
  {% assign product_alt = 'Anthology Planning' %}
  {% assign color_main = '#1BA8E1' %}
  {% assign color_dark = '#000000' %}
  {% assign color_light = '#004C6D' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Accreditation' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Accreditation.svg' %}
  {% assign product_alt = 'Anthology Accreditation' %}
  {% assign color_main = '#1BA8E1' %}
  {% assign color_dark = '#0090A1' %}
  {% assign color_light = '#1BA8E1' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology 101' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#7F59A5' %}
  {% assign color_dark = '#573376' %}
  {% assign color_light = '#7F59A5' %}
{% elsif course.properties.product_names_for_course_cards == 'Academy Use & Navigation' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#7F59A5' %}
  {% assign color_dark = '#6283C2' %}
  {% assign color_light = '#87ADDB' %}
{% elsif course.properties.product_names_for_course_cards == 'Data Strategy' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#7F59A5' %}
  {% assign color_dark = '#000000' %}
  {% assign color_light = '#573376' %}
{% elsif course.properties.product_names_for_course_cards == 'Faculty Development' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#7F59A5' %}
  {% assign color_dark = '#7F59A5' %}
  {% assign color_light = '#AA7FB8' %}
{% elsif course.properties.product_names_for_course_cards == 'Power BI' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#7F59A5' %}
  {% assign color_dark = '#573376' %}
  {% assign color_light = '#87ADDB' %}
{% elsif course.properties.product_names_for_course_cards == 'Professional Development' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#7F59A5' %}
  {% assign color_dark = '#000000' %}
  {% assign color_light = '#87ADDB' %}
{% else %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#DCE4E9' %}
  {% assign color_dark = '#747A7B' %}
  {% assign color_light = '#B2B7BA' %}
{% endif %}

{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% assign act_count = 0 %}
{% for section in course.sections %}
  {% for activity in section.activities %}
    {% assign act_count = act_count | plus : 1 %}
  {% endfor %}
{% endfor %}

{% assign allCats = '' %}
{% for category in course.categories %}
  {% assign allCats = allCats | append: category.name | append: ' || '%}
{% endfor %}

<div class="np-card course-card col-md-4" data-product="{{course.properties.product_names_for_course_cards}}" data-categories="{{ allCats }}">
  <div class="np-progress-bar-container" style="background: {{ color_light }}">
    <div
      style="width: 75%; background: {{ color_dark }}"
      class="np-button-background-color np-card-progress-bar course-card-progress-bar">
    </div>
  </div>
  <div class="card-product-banner">
    {% if product_logo != 'blank' %}
      <img src='{{ product_logo }}' alt='{{ product_alt }}' class="product-logo"/>
    {% else %}
      Anthology
    {% endif %}
  </div>
  <div class="np-card-container">
    <div class="card-image-replacement"></div>
    <div class="np-card-content np-card-content-vertical np-card-padding course-card-info">
      <div class="np-flex-1">
        <h3 class="np-card-content-title course-card-title">
          {{ course.name }}
        </h3>
      </div>
    </div>
    <div class="card-bottom-details">
      <span style="color: #757575; font-size: 14px">
        {% assign act_count = 0 %}
        {% for section in course.sections %}
          {% for activity in section.activities %}
            {% assign act_count = act_count| plus: 1 %}
          {% endfor %}
        {% endfor %}
        {{ act_count }} {% if act_count == 1 %}Activity{% else %}Activities{% endif %}
      </span>
      <a class="np-button np-button-wide course-card-button"
        href="{{ course_path }}"
      >
        View
      </a>
    </div>
  </div>
</div>
