{% if course.properties.product_names_for_course_cards == 'Anthology Reach' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %}
  {% 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 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 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 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 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 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 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 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 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 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 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 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 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 color_main = '#82C342' %}
  {% assign color_dark = '#000000' %}
  {% assign color_light = '#286734' %}
{% elsif course.properties.product_names_for_course_cards == 'Blackboard Learn' %}
  {% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %}
  {% 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 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://cdn.northpass.io/anthology/Course+Evaluations.svg' %}
  {% 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 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://cdn.northpass.io/anthology/Program+Review.svg' %}
  {% 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 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 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 %}

<div class="np-card-container">
  <div class="np-resource-header np-course-header np-card-padding-large">
    {% include "course_header" %}
  </div>
  <div class="np-divider"></div>
  <div class="row np-course-content np-card-padding-dynamic">
    <div class="col-xs-12 col-sm-6">
      {%- comment -%} <div class="np-progress-bar-container" style="background: {{ color_light }}; border-radius: 0;">
        <div
          style="width: {{ course.progress }}%; background: {{ color_dark }}"
          class="np-button-background-color np-card-progress-bar course-card-progress-bar">
        </div>
      </div> {%- endcomment -%}
      <div class="product-banner">
        {% if product_logo != 'blank' %}
          <img src='{{ product_logo }}' class="product-logo" style="height: 36px;"/>
        {% else %}
          Anthology
        {% endif %}
      </div>
      <div class="np-top-image np-top-image-spacing course-image-replacement" style="border-radius: 0;">
      <div class="course-cover-info">
        <div class="np-flex-1">
          <h3 class="course-cover-title">
            {{ course.name }}
          </h3>
          {% assign act_count = 0 %}
          {% for section in course.sections %}
            {% for activity in section.activities %}
              {% assign act_count = act_count| plus: 1 %}
            {% endfor %}
          {% endfor %}

          <span style="color: #757575; font-size: 18px">
            {{ act_count }} {% if act_count == 1 %}Activity{% else %}Activities{% endif %}
          </span>
        </div>
        {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
        {% if course.has_to_restart? %}
          {% include "course_version_outdated_popup", path: course_path %}
        {% endif %}
      </div>

      </div>
      {%- comment -%} <img
        src="{{ course.image_url }}"
        class="np-top-image np-top-image-spacing"
        alt="{{ course.name }}"
      /> {%- endcomment -%}
      {% include "course_description" %}

      {% if course.categories.any? %}
        <div class="np-card-content-divider">
          {% include "course_categories" %}
        </div>
      {% endif %}

      {% if course.instructors.any? %}
        <div class="np-card-content-divider">
          {% include "course_instructors" %}
        </div>
      {% endif %}

      {% if course.events.any? %}
        <div class="np-card-content-divider">
          {% include "course_events" %}
        </div>
      {% endif %}
    </div>
    <div class="np-grid-spacing col-xs-12 col-sm-6">
      <div class="np-top-cta">
        {% include "course_progress_and_cta" %}
      </div>
      {% include "course_outline" %}
    </div>
  </div>
</div>

<style>
  .course-image-replacement{
    /* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%); */
    background: linear-gradient(325deg, rgba(255,255,255,1) 0%, rgb(225 235 343 / 30%) 60%);
  }

  .course-cover-title{
    font-size: 2em;
    line-height: 45px;
    margin-bottom: 20px;
  }

  .course-cover-info{
    display: flex;
    flex-direction: column;
    height: 25em;
    justify-content: center;
  }
</style>