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

  {% if reviews | length %}
  <div class="reviews-section">
    {% for review in reviews %}
    <div class="review-card">
      <div class="common-card-style review-content small-title"> {{ review.review }} </div>
      <div class="review-card-footer">
        <div>
          {{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }}
          <a class="button-links" href="{{get_profile_url(review.owner_details.username) }}">
            <span class="course-instructor">
              {{ review.owner_details.full_name }}
            </span>
          </a>
        </div>
        <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>
    {% 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 %}