{% load static i18n %}
    {% if answers %}
        <ol class="oh-activity-sidebar__qa-list" role="list">
            {% for answer in answers %}
            <li class="oh-activity-sidebar__qa-item">
                <span class="oh-activity-sidebar__q">
                    {{forloop.counter}}. {{answer.question_id.question}}?</span
                >
                {% if answer.question_id.question_type == '1' %}
                <!--question type =  Text-->
                <span class="oh-activity-sidebar__a"
                    >{{ answer.answer.answer}}.</span
                >
                {% endif %}
                {% if answer.question_id.question_type == '2' %}
                <!--question type =  Rating-->
                <div class="d-block mb-0">
                    <div class="oh-rate">
                        <input type="radio" id="star5" value="5" disabled
                        {% if answer.answer.answer == '5' %} checked {% endif %} />
                        <label for="star5" title="5 Stars"
                            >5 {% trans "Stars" %}</label
                        >
                        <input type="radio" id="star4" value="4" disabled
                        {% if answer.answer.answer == '4' %} checked {% endif %} />
                        <label for="star4" title="4 Stars"
                            >4 {% trans "Stars" %}</label
                        >
                        <input type="radio" id="star3" value="3" disabled
                        {% if answer.answer.answer == '3' %} checked {% endif %} />
                        <label for="star3" title="3 Stars"
                            >3 {% trans "Stars" %}</label
                        >
                        <input type="radio" id="star2" value="2" disabled
                        {% if answer.answer.answer == '2' %} checked {% endif %} />
                        <label for="star2" title="2 Stars"
                            >2 {% trans "Stars" %}</label
                        >
                        <input type="radio" id="star1" value="1" disabled
                        {% if answer.answer.answer == '1' %} checked {% endif %} />
                        <label for="star1" title="1 Star"
                            >1 {% trans "Star" %}</label
                        >
                    </div>
                </div>
                {% endif %}
                {% if answer.question_id.question_type == '3' %}
                <!--question type =  Boolean-->
                <div class="oh-input__group">
                    <div class="oh-input-picker-group">
                        <div
                            class="oh-input-picker oh-input-picker--selected boolean-colour"
                        >
                            {{answer.answer.answer}}
                            <input type="radio" selected />
                        </div>
                    </div>
                </div>
                {% endif %}
                {% if answer.question_id.question_type == '4' %}
                <!--question type =  Multi-choices-->
                <div class="d-block">
                    <ul class="oh-questions mt-2">
                        <li class="oh-questions__answer">
                            <div class="oh-radio">
                                <input
                                    type="radio"
                                    class="oh-radio"
                                    id="answer1"
                                    name="answer{{q.id}}"
                                    value="{{option.option_a}}"
                                    checked
                                />
                                <span class="oh-radio__checkmark"></span>
                                <label class="oh-label" for="answer1">
                                    {{answer.answer.answer}}</label
                                >
                            </div>
                        </li>
                    </ul>
                </div>
                {% endif %}
                {% if answer.question_id.question_type == '5' %}
                <!--question type =  Likert-->
                <div class="d-block">
                    <div
                        class="oh-input-picker-group oh-input-picker-group--resp mt-2"
                    >
                        <div
                            class="oh-input-picker oh-input-picker--likert likert-colour oh-input-picker--selected"
                        >
                            {{answer.answer.answer}}
                        </div>
                    </div>
                </div>
                {% endif %}
            </li>
            {% endfor %}
        </ol>
    {% else %}
        <div style="
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            "
        >
            <img src="{% static "images/ui/unknown_document.svg" %}" style ="width: 130px;height: 130px;opacity:0.7" />
            <h5 class="oh-404__subtitle">{% trans "Questions not answered yet." %}</h5>
        </div>
    {% endif %}
<script>
    $(document).ready(function () {
        // answer color for likert
        var booleanText = $('.boolean-colour').text().trim()
        var booleanEl = $('.boolean-colour')
        var red = "oh-input-picker--1"
        var orange = "oh-input-picker--2"
        var yellow = "oh-input-picker--3"
        var light_green = "oh-input-picker--4"
        var green = "oh-input-picker--5"

        $('.likert-colour').each(function() {
            var likertText = $(this).text().trim()

            if (likertText === 'Strongly Agree'){
                $(this).addClass(green)
            }
            else if (likertText === 'Agree'){
                $(this).addClass(light_green)
            }
            else if (likertText === 'Neutral'){
                $(this).addClass(yellow)
            }
            else if (likertText === 'Disagree'){
                $(this).addClass(orange)
            }
            else if (likertText === 'Strongly Disagree'){
                $(this).addClass(red)
            }
        });

        // boolean text colour adding
        $('.boolean-colour').each(function() {
            var booleanText = $(this).text().trim()

            if (booleanText === 'yes'){
                $(this).addClass(green)
            }
            else if (booleanText === 'no'){
                $(this).addClass(red)
            }
        })
    });
</script>