{% assign rating = course.properties.np_course_rating %}

{% if isButton %}
  <div class="np-ratings-container np-ratings-button" onclick='showPopup("ratingsModal")'>
{% else %}
  <div class="np-ratings-container">
{% endif %}
    <div class="rating-group-static">
      <div class="fas fa-star-half {% if rating >= 0.5 %}star-gold{% endif %}"></div>
      <div class="fas fa-star {% if rating >= 1.0 %}star-gold{% endif %}"></div>
      <div class="fas fa-star-half {% if rating >= 1.5 %}star-gold{% endif %}"></div>
      <div class="fas fa-star {% if rating >= 2.0 %}star-gold{% endif %}"></div>
      <div class="fas fa-star-half {% if rating >= 2.5 %}star-gold{% endif %}"></div>
      <div class="fas fa-star {% if rating >= 3.0 %}star-gold{% endif %}"></div>
      <div class="fas fa-star-half {% if rating >= 3.5 %}star-gold{% endif %}"></div>
      <div class="fas fa-star {% if rating >= 4.0 %}star-gold{% endif %}"></div>
      <div class="fas fa-star-half {% if rating >= 4.5 %}star-gold{% endif %}"></div>
      <div class="fas fa-star {% if rating == 5.0 %}star-gold{% endif %}"></div>
    </div>
    <div class="np-course-rating">{{ course.properties.np_course_rating }}</div> 
    <div class="np-course-rating-count">({{course.properties.np_course_rating_count}})</div>
  </div> 

<style>

  .np-ratings-container {
      display:flex;
      align-items:center;
      font-size:0.75rem;
      color:#fff;
      font-weight:500;
  }

  .np-ratings-button {
      background:transparent;
      outline:none;
      border: 2px solid transparent;
      transition:border-color 0.2s;
      border-radius:4px;
      cursor:pointer;
      padding: 1px 6px;
  }

  .np-ratings-button:hover { border: 2px solid #E6E9EA; }

  .np-course-rating-count {
      color:#bec2c6;
      margin-left:3px;
  }

  .rating-group-static {  
    margin-right:8px; 
    display: inline-flex;  
  }

  .rating-group-static .fa-star,
  .rating-group-static .fa-star-half {
      color: #EBECED;
      font-size: 1.15rem;
      margin: 0 1px 3px;
  }

  .rating-group-static .fa-star-half {
    position:relative;
    z-index:10;
  }

  .rating-group-static .fa-star{
      margin-left: -22px;
  }

  .rating-group-static .star-gold{ color: #F7BB17; }

  @media (min-width:768px) {
      .np-ratings-button { margin-right:24px; }
  }

</style>