{% if not course.upcoming %}
<div class="reviews-parent">
  {% set reviews = get_reviews(course.name) %}
  <div class="mb-5">
    <span class="course-home-headings"> {{ _("Reviews") }} </span>
    {% if is_eligible_to_review(course.name, membership) and reviews | length %}
    <span class="review-link button is-secondary pull-right">
      {{ _("Write a review") }}
    </span>
    {% endif %}
  </div>

  {% set avg_rating = get_average_rating(course.name) %}
  <div class="reviews-header">
    <div class="text-center">
      <div class="avg-rating"> {{ avg_rating }} </div>
      <div class="course-meta"> {{ reviews | length }} {{ _("ratings") }} </div>
      <div class="avg-rating-stars">
        <div class="rating">
          {% for i in [1, 2, 3, 4, 5] %}
          <svg class="icon icon-md {% if i <= avg_rating %} star-click {% endif %}" data-rating="{{ i }}">
            <use href="#icon-star"></use>
          </svg>
          {% endfor %}
        </div>
      </div>
      <div class="course-meta"> {{ avg_rating }} {{ _("out of 5 ") }} </div>
    </div>
    <div class="vertical-divider"></div>
    {% set sorted_reviews = get_sorted_reviews(course.name) %}
    <div>
      {% for review in sorted_reviews %}
      <div class="d-flex align-items-center mb-3">
        <div class="course-meta mr-2"> {{ frappe.utils.cint(review) }} {{ _("stars") }} </div>
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="{{ sorted_reviews[review] }}"
          aria-valuemin="0" aria-valuemax="100" style="width:{{ sorted_reviews[review] }}%">
            <span class="sr-only"> {{ sorted_reviews[review] }} Complete</span>
          </div>
        </div>
        <div class="course-meta ml-3"> {{ frappe.utils.cint(sorted_reviews[review]) }}% </div>
      </div>
      {% endfor %}
    </div>
  </div>




  {% if reviews | length %}
  <div class="mt-12">
    {% for review in reviews %}
    <div class="">
      <div class="review-card-footer">
        <div class="d-flex align-items-center">
          <div class="mr-5">
            {{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }}
          </div>
          <div>
            <a class="button-links" href="{{get_profile_url(review.owner_details.username) }}">
              <span class="review-author">
                {{ review.owner_details.full_name }}
              </span>
            </a>
            <div class="rating">
              {% for i in [1, 2, 3, 4, 5] %}
              <svg class="icon icon-md {% if i <= review.rating %} star-click {% endif %}" data-rating="{{ i }}">
                <use href="#icon-star"></use>
              </svg>
              {% endfor %}
            </div>
          </div>
        </div>
        <div class="ml-16 mt-4">
          <div> {{ review.review }} </div>
          <div class="frappe-timestamp mt-2 mb-6 course-meta" data-timestamp="{{ review.creation }}"> frappe.utils.pretty_date(review.creation) </div>
        </div>
      </div>
    </div>
    {% if loop.index != reviews | length %}
    <div class="card-divider"></div>
    {% endif %}
    {% endfor %}
  </div>

  {% else %}
  <div class="empty-state text-center">
    <img class="icon icon-xl" src="/assets/frappe/icons/timeless/message.svg">
    <div class="course-home-headings mt-4 mb-0" style="color: inherit;"> {{ _("Review the course") }} </div>
    <div class="small mb-6"> {{ _("Help us improve our course material.") }} </div>
    {% if is_eligible_to_review(course.name, membership) %}
      <span class="review-link button is-secondary ml-auto mr-auto mt-3">
        {{ _("Write a review") }}
      </span>
    {% elif frappe.session.user == "Guest" %}
    <a class="button is-secondary dark-links ml-auto mr-auto mt-3" href="/login?redirect-to=/courses/{{ course.name }}"> {{ _("Login") }} </a>
    {% elif not membership %}
    <div class="button is-secondary join-batch ml-auto mr-auto mt-3" data-course="{{ course.name | urlencode }}"> {{ _("Start Learning") }} </div>
    {% endif %}
  </div>
  {% endif %}
</div>

<div class="modal fade review-modal" id="review-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="font-weight-bold">{{ _("Write a review") }}</div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="review-form" id="review-form">
          <div class="form-group">
            <div class="clearfix">
              <label class="control-label reqd" style="padding-right: 0px;">{{ _("Rating") }}</label>
            </div>
            <div class="control-input-wrapper">
              <div class="control-input">
                <div class="rating rating-field" id="rating">
                  {% for i in [1, 2, 3, 4, 5] %}
                  <svg class="icon icon-md icon-rating" data-rating="{{ i }}">
                    <use href="#icon-star"></use>
                  </svg>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="clearfix">
              <label class="control-label reqd" style="padding-right: 0px;">{{ _("Review") }}</label>
            </div>
            <div class="control-input-wrapper">
              <div class="control-input">
                <textarea type="text" autocomplete="off" class="input-with-feedback form-control review-field"
                  data-fieldtype="Text" data-fieldname="feedback_comments" placeholder="" style="height: 300px;"
                  spellcheck="false"></textarea>
              </div>
            </div>
          </div>
          <p class="error-field muted-text"></p>
        </form>
      </div>
      <div class="modal-footer">
        <div class="button submit-review is-primary" data-course="{{ course.name | urlencode}}" id="submit-review">
          {{ _("Submit") }}</div>
      </div>
    </div>
  </div>
</div>
{% endif %}