{% 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>Your work today:</u></b>
</p>
<p>
You have been assigned to solve <b> {{player.num_tasks_additional}} </b> additional sequences.
</p>
<p>
Thus, in total, you need to solve <b> {{player.num_tasks_total}} </b> sequences.
</p>
<p>
Last week, you have already solved <b> {{player.num_completed}} </b> of these.
</p>
<p>
Therefore, today you still need to complete <b> {{player.num_todo}} </b> sequences.
</p>

<p>Click "next" to start working on the transcription tasks.</p>
<br>
<p>
  <button name="details_task_3" value="true" class="btn btn-warning" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseExample">
    Click here if you want to see the explanation of the task again
  </button>
  <div style="display: none;">
        {% formfield player.details_task_3 %}
 </div>

    <br>

        {% next_button %}

    <br>

<br>
{% endblock %}