{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}


<style type="text/css">
a.back-btn::before {
    font-weight: 900;
    content: '\f104';
    font-family: 'Font Awesome 5 Free';
    margin-right: 10px;
}
.heading-top {
    background-color: #ccc75d;
    padding: 18px;
    border-radius:.25rem;
    display: flex;
    justify-content: space-between;
    margin: 30px 0 20px;
}
.heading-top a,
.heading-top  h2.f-20.mb-0 {
    color: #000;
    text-decoration: none;
}
.sup-box {
    padding: 20px;
    background-color: #fff;
/*    height: 200px;*/
    border-radius: .25rem;
}
.sup-box p:last-child {
    margin-bottom: 0;
}
.review {
    display: flex;
    align-items: center;
    gap: 5px;
}
</style>
<title>Investment Edu | Ratings Feedback View</title>
<div class="container-fluid">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="support-view">
            {% comment %} <a style="background-color: #ccc75d; color: #000;text-decoration: none;padding: 10px 20px;display: inline-block;position: relative;border-radius: 5px;" href="/help-and-support-list" class="back-btn">Back</a> {% endcomment %}

            <div class="heading-top shadow">
                <h2 class="f-22 mb-2 bold">Ratings Feedback</h2>
            </div>
            <div class="heading-box">
                <div class="row">
                    <div class="col-12 col-xl-12 col-md-12">
                        <div class="sup-box ratings shadow">
                            <p><strong>Name: </strong>{{service_obj.user.username}}</p>
                            <div class="review">
                            <p><strong>Ratings: </strong>{{service_obj.rating}}
                               {% if service_obj.ratings == 0 %}
                            <ul class="rating-star">
                            </ul>
                         {% elif service_obj.ratings == 1 %}
                            <ul class="rating-star">
                                <li><i class="fa-solid fa-star"></i></li>
                            </ul>
                        {% elif service_obj.ratings == 2 %}   
                            <ul class="rating-star">
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                            </ul>
                        {% elif service_obj.ratings == 3 %}
                          <ul class="rating-star">
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                            </ul>
                        {% elif service_obj.ratings == 4 %}
                             <ul class="rating-star">
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                            </ul>
                        {% else %}
                            <ul class="rating-star">
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                                <li><i class="fa-solid fa-star"></i></li>
                            </ul>
                        {% endif %}
                            </p>
                            </div>
                            <p><strong>Feedback: </strong>{{service_obj.feedback}}</p>
                            <p><strong>Section Name: </strong>{{service_obj.section_name}}</p>
                            <p><strong>Date: </strong>{{service_obj.start_date| date:"d M  Y"}}</p>
                            
                        </div>
                    </div>
            </div>
            </div>

            </div>
    </div>
</div>
<!-- /.container-fluid -->

{% endblock %}