{% load otree static %}

{% block content %}
<style>
/* Popup container - can be anything you want */
.popup {
  position: relative;
  cursor: pointer;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 280px;
  background-color: #ffde00;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.collapse.in{display:block}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>


<p>
    <b><u>Feedback Repetition:</u></b>
</p>
<p style="text-align:justify">
Please repeat the feedback you just received
</p>

<p>
Of the 3 randomly selected participants from the group ...
</p>



  <p>
Number of participants that ranked <strong>worse</strong> than you: {%formfield player.ConfirmPosFeedback label=""%}
</p>
 <p>
Number of participants that ranked <strong>better</strong> than you: {% formfield player.ConfirmNegFeedback label="" %}
</p>
<br>
<p>
  <button name="details_feedback_1" value="true" class="btn btn-success" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseExample">
    Click here if you want to see your feedback again
  </button>
  <div style="display: none;">
        {% formfield player.details_feedback_1 %}
 </div>

    <br>

        {% next_button %}

    <br>

<br>
{% endblock %}