{% if course.properties.product_names_for_course_cards == 'Anthology Reach' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Reach.png' %}
  {% assign product_alt = 'Anthology Reach' %}
{% elsif course.properties.product_names_for_course_cards == 'Radius' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Engage' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Engage.png' %}
  {% assign product_alt = 'Anthology Engage' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Beacon' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Milestone' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Milestone.png' %}
  {% assign product_alt = 'Anthology Milestone' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Occupation Insight' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Raise' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Raise.png' %}
  {% assign product_alt = 'Anthology Raise' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Digital Assistant' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Baseline' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Baseline.png' %}
  {% assign product_alt = 'Anthology Baseline' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Encompass' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Encompass.png' %}
  {% assign product_alt = 'Anthology Encompass' %}
{% elsif course.properties.product_names_for_course_cards == 'Talisma' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Student' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Student.png' %}
  {% assign product_alt = 'Anthology Student' %}
{% elsif course.properties.product_names_for_course_cards == 'CVue' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Insight' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Finance & HCM' or course.properties.product_names_for_course_cards contains 'Finance' or course.properties.product_names_for_course_cards contains 'HCM' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_FinanceHCM.png' %}
  {% assign product_alt = 'Anthology Finance & HCM' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Payroll' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Academic Economics' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Blackboard' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Blackboard.png' %}
  {% assign product_alt = 'Blackboard' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Ally' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Course Evaluations' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_CourseEvaluation.png' %}
  {% assign product_alt = 'Anthology Course Evaluations' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Evaluate' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Evaluate.png' %}
  {% assign product_alt = 'Anthology Evaluate' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Portfolio' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Portfolio.png' %}
  {% assign product_alt = 'Anthology Portfolio' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Program Review' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_ProgramReview.png' %}
  {% assign product_alt = 'Anthology Program Review' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Planning' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Planning.png' %}
  {% assign product_alt = 'Anthology Planning' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Accreditation' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Accreditation.png' %}
  {% assign product_alt = 'Anthology Accreditation' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology Outcomes' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Outcomes.png' %}
  {% assign product_alt = 'Anthology Outcomes' %}
{% elsif course.properties.product_names_for_course_cards == 'Anthology 101' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_Anthology101.png' %}
  {% assign product_alt = 'Anthology 101' %}
{% elsif course.properties.product_names_for_course_cards == 'Academy Use & Navigation' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Data Strategy' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Faculty Development' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% elsif course.properties.product_names_for_course_cards == 'Power BI' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_PowerBI.png' %}
  {% assign product_alt = 'Power BI' %}
{% elsif course.properties.product_names_for_course_cards == 'Professional Development' %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology_ProfesionalLearning.png' %}
  {% assign product_alt = 'Professional Learning' %}
{% else %}
  {% assign product_logo = 'https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' %}
  {% assign product_alt = 'Anthology' %}
{% endif %}

{% assign color_main = '#0054bc' %}

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

{% 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 %}


{% comment %} <div class="np-card course-card" data-product="{{course.properties.product_names_for_course_cards}}" data-categories="{{ allCats }}"> {% endcomment %}
<div class="np-card course-card">
  {%- comment -%} {% unless flag == 'catalog' %}
  {% endunless %} {%- endcomment -%}
  <div class="np-progress-bar-container">{% comment %}  style="background: {{ color_light }}" {% endcomment %}
    {% comment %} <div
      style="width: 75%; background: {{ color_dark }}"
      class="np-button-background-color np-card-progress-bar course-card-progress-bar">
    </div> {% endcomment %}
  </div>
  {% comment %} <div class="card-product-banner">
    {% if product_logo != 'blank' %}
      <img src='{{ product_logo }}' alt='{{ product_alt }}' class="product-logo"/>
    {% else %}
      Anthology
    {% endif %}
  </div> {% endcomment %}
  <div class="np-card-container">
    {% if course.ribbon %}
      <div class="np-card-ribbon">
        {{ course.ribbon }}
      </div>
    {% endif %}
    {% comment %} <div class="card-image-replacement"></div> {% endcomment %}
    {%- comment -%} <img
      class="np-card-image"
      alt="{{ course.name }}"
      src="{{ course.image_url }}"
    > {%- endcomment -%}
    <div class="np-card-content np-card-content-vertical np-card-padding course-card-info">
      {% if product_logo != 'blank' %}
        <img src='{{ product_logo }}' alt='{{ product_alt }}' class="product-logo-banner"/>
      {% else %}
        <img src='https://shelves.s3.us-east-1.amazonaws.com/academy/imgs/Anthology.png' alt='Anthology' class="product-logo-banner"/>
      {% endif %}
      <div class="np-flex-1">
        <h3 class="np-card-content-title course-card-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: 14px">
          {{ 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>
    {% if flag == 'dashboard' %}<div class="card-bottom-details">{% else %}<div class="card-bottom-details card-bottom-details-plain">{% endif %}
      {% 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: #BACCE9;
            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>
            {%- comment -%} {{course.properties.course_duration}} left {%- endcomment -%}
          </div>
        </div>
      {% else %}
        {%- comment -%} <div class="np-card-content-progress np-button-color">
          {% t shared.progress, count: course.progress %}
        </div> {%- endcomment -%}
        {%- comment -%} <div style="padding-left: 15px">
          {{course.properties.course_duration}} duration
        </div> {%- endcomment -%}
      {% endif %}
      <a class="np-button np-button-wide course-card-button"
        {% if course.properties.video_on_demand == true %}
          {% if course.enrolled? %}
              href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
          {% else %}
              href="{% route course_enrollment, code: course.enrollment_code %}"
          {% endif %}
        {% else %}
          href="{{ course_path }}"
        {% endif %}
      >
        {% if course.progress > 0 and course.progress < 100 %}
          Continue
        {% else %}
          View
        {% endif %}
      </a>
    </div>
  </div>
</div>


<style>
  .np-card-ribbon {
    background: #0054bc !important;
    border: 1px solid #07a9cb;
    z-index: 99999999;
    padding: 5px !important;
  }
  .card-product-banner{
    align-items: center;
    background: #FFF;
    box-shadow: 0 3px 30px rgba(0,0,0,.1);
    display: flex;
    height: 32px;
    overflow: hidden;
    padding: 6px 8px;
    width: 100%;
  }

  .product-logo {
    height: 100%;
  }

  .product-logo-banner {
    width: 100%;
    height: auto;
  }

  .np-flex-1 {
    padding: 10px 20px 20px;
  }

  .np-catalog-courses {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
  }

@media only screen and (max-width: 1000px) {
    .np-catalog-courses {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

@media only screen and (max-width: 600px) {
    .np-catalog-courses {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .np-catalog-courses .col-lg-4,
  .np-catalog-courses .col-sm-6 {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .np-max-width {
    width: 100%;
  }

  .card-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%);
    height: 12rem;
    width: 100%;
  }

  @media screen and (min-width: 550px) and (max-width: 649px){
    .card-image-replacement{
      height: 15rem;
    }
  }

  @media screen and (min-width: 650px) and (max-width: 767px){
    .card-image-replacement{
      height: 20rem;
    }
  }

  .course-card-info{
    max-height: 100% !important;
    height: auto; /*calc(100% - 38px);*/
    justify-content: center;
    position: relative;
    top: 0;
    padding: 0;
  }

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

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

  .course-card-button:focus{
    border: 2px solid blue;
  }

  .np-progress-bar-container,
  .np-card-progress-bar{
    border-radius: 0;
    height: 3px;
    margin: 0;
    background: linear-gradient(81.13deg, #0054bc 45.35%, #0dac14 94.86%);
  }

  .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;
  }

  .np-card-content {
    display: block;
  }

  .card-bottom-details {
    background: #0054bc10 !important;
  }

  .card-bottom-details-plain {
    padding: 0;
  }

  .card-bottom-details-plain .course-card-button {
    display: block;
    width: 100%;
    text-align: center;
  }

.card-bottom-details .course-card-button {
  background-color: #0054bc;
}

  .card-bottom-details .course-card-button:hover {
    background-color: #000;
  }

  .np-course-version-outdated-popup {
    text-align: right;
  }

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

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

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