{% load i18n %}
<div class="oh-card">
    <div class="oh-accordion-meta">
        {% for question,answers in feedback_overview.items %}
            <div class="oh-accordion-meta__item">
                <div class="oh-accordion-meta__header" onclick='$(this).toggleClass("oh-accordion-meta__header--show");'>
                    <span class="oh-accordion-meta__title pt-3 pb-3">
                        <div class="oh-tabs__input-badge-container">
                            <span
                                class="oh-badge oh-badge--round mr-1"
                            >
                                {{question}}
                            </span>
                        </div>
                    </span>
                </div>
                <div class="oh-accordion-meta__body d-none">
                    <div class="oh-sticky-table oh-sticky-table--no-overflow">
                        <div class="oh-sticky-table">
                            <div class="oh-sticky-table__table oh-table--sortable">
                                <div class="oh-sticky-table__thead">
                                    <div class="oh-sticky-table__tr">
                                        <div class="oh-sticky-table__th">{% trans "Employee" %}</div>
                                        <div class="oh-sticky-table__th">{% trans "Answer" %}</div>
                                    </div>
                                </div>
                                <div class="oh-sticky-table__tbody">
                                    {% for answer in answers %}
                                    {% for key,value in answer.items %}
                                        <div class="oh-sticky-table__tr" draggable="true">
                                            <div class="oh-sticky-table__td">
                                                <div class="oh-profile oh-profile--md">
                                                    <div class="oh-profile__avatar mr-1">
                                                        <img
                                                        src="{{key.get_avatar}}"
                                                        class="oh-profile__image"
                                                        alt=""
                                                        />
                                                    </div>
                                                        <span class="oh-profile__name oh-text--dark">{{key}}</span>
                                                </div>
                                            </div>
                                            <div class="oh-sticky-table__td">
                                                {% if value.1.type == '1' %}
                                                    <span class="oh-activity-sidebar__a">{{ value.0.answer}}</span>
                                                    {% endif %}

                                                    {% if value.1.type == '2' %}
                                                    <div class="d-block mb-0">
                                                        <div class="oh-rate">
                                                        <input type="radio" id="star5" value="5" disabled {% if value.0.answer == '5' %} checked {% endif %} />
                                                        <label for="star5" title="5 Stars">5 {% trans "Stars" %}</label>
                                                        <input type="radio" id="star4" value="4" disabled  {% if value.0.answer == '4' %} checked {% endif %} />
                                                        <label for="star4" title="4 Stars">4 {% trans "Stars" %}</label>
                                                        <input type="radio" id="star3" value="3" disabled  {% if value.0.answer == '3' %} checked {% endif %} />
                                                        <label for="star3" title="3 Stars">3 {% trans "Stars" %}</label>
                                                        <input type="radio" id="star2" value="2" disabled  {% if value.0.answer == '2' %} checked {% endif %}  />
                                                        <label for="star2" title="2 Stars">2 {% trans "Stars" %}</label>
                                                        <input type="radio" id="star1" value="1" disabled  {% if value.0.answer == '1' %} checked {% endif %} />
                                                        <label for="star1" title="1 Star">1 {% trans "Star" %}</label>
                                                        </div>
                                                    </div>
                                                    {% endif %}

                                                    {% if value.1.type == '3' %}
                                                    <div class="oh-input__group">
                                                        <div class="oh-input-picker-group">
                                                        <div class="oh-input-picker   oh-input-picker--selected boolean-colour ">
                                                            {{value.0.answer}}
                                                            <input type="radio" selected />
                                                        </div>
                                                        </div>
                                                    </div>
                                                    {% endif %}

                                                    {% if value.1.type == '4' %}
                                                    <div class="d-block">
                                                        <label class="oh-label" for="answer1"> {{value.0.answer}}</label>
                                                    </div>
                                                    {% endif %}

                                                    {% if value.1.type == '5' %}
                                                    <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 ">
                                                            {{value.0.answer}}
                                                        </div>
                                                        </div>
                                                    </div>
                                                    {% endif %}
                                                </li>
                                                </div>
                                        </div>
                                    {% endfor %}
                                    
                                    {% endfor %}

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

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