{% if course.properties.product_type == '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_type == 'Radius' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#F3798A' %}
  {% assign color_light = '#F58545' %}
{% elsif course.properties.product_type == '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_type == '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_type == '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_type == '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_type == '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_type == '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_type == '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_type == '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_type == 'Talisma' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#F06A32' %}
  {% assign color_dark = '#D94827' %}
  {% assign color_light = '#F3798A' %}
{% elsif course.properties.product_type == '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_type == 'CVue' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#82C342' %}
  {% assign color_dark = '#286734' %}
  {% assign color_light = '#F3E588' %}
{% elsif course.properties.product_type == '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_type == '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_type == '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_type == '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_type == '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_type == '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_type == '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_type == 'Anthology Evaluate' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#1BA8E1' %}
  {% assign color_dark = '#027BB6' %}
  {% assign color_light = '#A3DBDC' %}
{% elsif course.properties.product_type == '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_type == '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_type == '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_type == '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_type == 'Anthology 101' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#7F59A5' %}
  {% assign color_dark = '#573376' %}
  {% assign color_light = '#7F59A5' %}
{% elsif course.properties.product_type == 'Academy Use & Navigation' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#7F59A5' %}
  {% assign color_dark = '#6283C2' %}
  {% assign color_light = '#87ADDB' %}
{% elsif course.properties.product_type == 'Data Strategy' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#7F59A5' %}
  {% assign color_dark = '#000000' %}
  {% assign color_light = '#573376' %}
{% elsif course.properties.product_type == 'Faculty Development' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#7F59A5' %}
  {% assign color_dark = '#7F59A5' %}
  {% assign color_light = '#AA7FB8' %}
{% elsif course.properties.product_type == 'Power BI' %}
  {% assign product_logo = 'blank' %}
  {% assign color_main = '#7F59A5' %}
  {% assign color_dark = '#573376' %}
  {% assign color_light = '#87ADDB' %}
{% elsif course.properties.product_type == '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 %}

{% unless flag == 'dashboard' %}
  {% assign flag = '' %}
{% endunless %}

<div class="np-card course-card">
  {%- comment -%} {% unless flag == 'catalog' %}
  {% endunless %} {%- endcomment -%}
  <div class="np-progress-bar-container" style="background: {{ color_light }}">
    <div
      style="width: {{ course.progress }}%; 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 }}' class="product-logo"/>
    {% else %}
      Anthology
    {% endif %}
  </div>
  <div class="np-card-container">
    <img
      class="np-card-image"
      alt="{{ course.name }}"
      src="{{ course.image_url }}"
    >
    <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>
      {% 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 class="card-bottom-details">
      {% if flag == 'dashboard' %}
        <div style="
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 15px;
        width: 70%;">
          <div style="
            background: {{ color_light }};
            border-radius: 10px;
            height: 8px;
            margin-right: 15px;
            width: 60%;
          ">
            <div
              style="height: 8px; background: {{ color_main }}; border-radius: 10px; width: {{ course.progress }}%; "
              class="np-button-background-color np-card-progress-bar course-card-progress-bar">
            </div>
          </div>
          <div>
            {{course.properties.course_duration}} left
          </div>
        </div>
      {% else %}
        {%- comment -%} <div class="np-card-content-progress np-button-color">
          {% t shared.progress, count: course.progress %}
        </div> {%- endcomment -%}
        <div style="padding-left: 15px">
          {{course.properties.course_duration}} duration
        </div>
      {% endif %}
      <a class="np-button np-button-wide course-card-button" href="{{ course_path }}">
        {% if course.progress > 0 and course.progress < 100 %}
          Continue
        {% else %}
          View
        {% endif %}
        {%- comment -%} {% t shared.view %} {%- endcomment -%}
      </a>
    </div>
  </div>
</div>

<style>
  .card-product-banner{
    align-items: center;
    background: #FFF;
    display: flex;
    height: 32px;
    padding: 6px 8px 2px;
    width: 100%;
  }

  .product-logo{
    height: 100%;
  }

  .course-card-info{
    height: calc(100% - 41px);
    position: absolute;
    top: 0;
  }

  .course-card-title{
    font-size: 24px;
    font-weight: 600;
    line-height: 25px;
    margin-top: 32px !important;
  }

  .course-card-button{
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    height: 100%;
    line-height: 21px;
    width: 30%;
  }

  .np-progress-bar-container,
  .np-card-progress-bar{
    border-radius: 0;
    height: 6px;
    margin: 0;
  }

  .np-card-content-progress{
    height: 25px;
    margin: 0;
  }

  .course-card-progress-bar{
    min-width: 0;
  }

  .np-card-content-progress{
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
  }

  @media screen and (min-width: 768px){
    .course-card-wrapper{
      margin-bottom: 32px;
      /* max-height: 315px;
      max-width: 445px; */
    }

    .course-card{
      padding: 0 10px !important;
    }

    .course-card-wrapper,
    .course-card{
      height: 100%;
    }
  }
</style>