<div class="np-top-vocabulary np-text-title np-text-muted">
  {{ current_school.course_vocabulary }}
  <i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
  </i>
</div>
<div class="np-top-title">
  <a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
    <i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
  </a>
  <span class="desktop-back-label">Back</span>
</div>
{%- comment -%} <img
  src="{{ course.image_url }}"
  class="np-top-image np-hidden-desktop"
  alt="{{ course.name }}"
/> {%- endcomment -%}


<div class="product-banner np-hidden-desktop">
  {% if product_logo != 'blank' %}
    <img src='{{ product_logo }}' class="product-logo" style="height: 36px;"/>
  {% else %}
    Anthology
  {% endif %}
</div>
{%- comment -%} <div class="course-image-replacement np-hidden-desktop" style="border-radius: 0;"> {%- endcomment -%}
<div class="course-cover-info np-hidden-desktop">
  <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>


<style>
  .desktop-back-label{
    font-size: 16px;
  }
  
  @media screen and (max-width: 767px){
    .desktop-back-label{
      display: none; 
    }

    .course-cover-info{
      background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%);
    }

    .np-flex-1{
      padding-left: 25px;
    }
  }
</style>