{% 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) %}
            <span class="btn btn-secondary btn-sm review-link">
                {{ _("Write a review") }}
            </span>
        {% elif not is_instructor(course.name) and frappe.session.user == "Guest" %}
            <a class="btn btn-secondary btn-s pull-rightm" href="/login?redirect-to=/courses/{{ course.name }}"> {{ _("Login") }} </a>
        {% elif not is_instructor(course.name) and not membership and course.status == "Approved" %}
            <div class="btn btn-secondary btn-sm join-batch pull-right" data-course="{{ course.name | urlencode }}"> {{ _("Start Learning") }} </div>
        {% endif %}
    </div>


    {% set avg_rating = get_average_rating(course.name) %}
    {% if avg_rating %}
    <div class="reviews-header">
        <div class="text-center">
            <div class="avg-rating">
                {{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }}
            </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 <= frappe.utils.ceil(avg_rating) %} star-click {% endif %}" data-rating="{{ i }}">
                        <use href="#icon-star"></use>
                    </svg>
                    {% endfor %}
                </div>
            </div>
            <div class="course-meta">
                {{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }} {{ _("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>
    {% endif %}


    {% if reviews | length %}
    <div class="mt-12">
        {% for review in reviews %}
        <div class="mb-4">
            <div class="d-flex align-items-center">
                <div class="mr-4">
                {{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }}
                </div>
                <div>
                    <div class="d-flex align-items-center">
                        <a class="button-links mr-4" href="{{get_profile_url(review.owner_details.username) }}">
                        <span class="bold-heading">
                            {{ review.owner_details.full_name }}
                        </span>
                        </a>
                        <div class="frappe-timestamp course-meta" data-timestamp="{{ review.creation }}">
                            {{ frappe.utils.pretty_date(review.creation) }}
                        </div>
                    </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>
            <div class="review-content"> {{ review.review }} </div>
        </div>
        {% if loop.index != reviews | length %}
            <div class="card-divider"></div>
        {% endif %}
        {% endfor %}
    </div>


    {% else %}
    <div class="empty-state">
        <img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
        <div class="empty-state-text">
            <div class="empty-state-heading">{{ _("Review the course") }}</div>
            <div class="course-meta">{{ _("Help us improve our course material.") }}</div>
        </div>
    </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 %}