{% extends "global/Page.html" %}
{% load otree static %}

{% block content %}
<!-- Modal -->
<div id="instructionModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h2> Instructions <h2>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <h4> INTERGROUP COMPETITION </h4>
      <b><u>Payment In Each Round</b></u>
      <ul>
      <li> We will sum up the length of the words submitted by each member of your group. We will do the same for the other group. </li>
      <li> If this sum for your group is strictly greater than that of the other group then your group wins and each member of your group receives 100 INR; otherwise each of you earn 0 INR.</li>
      </ul>
      <p>Therefore, your payment in this task depends on the ability of you and your group members to cooperate and to do better than the members of the other group. </p>
      </div>
            <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>

      </div>
    </div>
  </div>
</div>
<link rel="stylesheet" href="{% static 'global/instructions.css' %}"/>
<style>
.reportedletters {
  border: 1px solid black;
}
</style>
<div class="show-modal-button">
  <button type="button" class="btn btn-info instruction-button" data-toggle="modal" data-target="#instructionModal">View Instructions</button>
</div>
<div class="instructions">
<br>
<br>
The set of shared letters is: <div class="reportedletters"> {% for letter in ReportedLetters %} {% if forloop.last %} {{ letter }} {% else %} {{letter }} , {% endif %} {% endfor %}  </div>
<br>
<br>
<ul>
    <li> You have five minutes to construct and submit the longest English word that you can form with these letters. </li>
    <li> Note that each of these letters can be used exactly once in the word that you form. </li>
    <li> When you are ready to make the submission, type it in the box below and click "Submit". </li>
    <li> Use the chat box on the bottom right to communicate with the other group members. </li>
</ul>
You can see how much time you have remaining on the top right corner of your screen.
</div>
<div class='container-fluid'>
    <div class='row'>
        <div class='col-7 word_field'>
            {% formfield player.word %}
        </div>
        <div class='col-5'>
            {% chat channel=chat_channel nickname=player.participant.vars.group_member %}
        </div>
    </div>
</div>
<br>
<div class='container-fluid'>
    <div class='row'>
        <div class='col-md text-center'>
            {% next_button %}
        </div>
    </div>
</div>

<style>
        .word_field{
            padding-top: 10%;
        }
        .otree-chat {
 /*            position: fixed;*/
/*             right: 2cm;
             bottom:10cm;*/
             width: 400px;
             height: 1000px
             border: 3px solid #73AD21;
        }
/*        .otree-chat__messages {
             position: fixed;
             right: 2.15cm;
             top: 1.3cm;
             width: 330px;
             height: 500px
             border: 3px solid #73AD21;
        }*/
        .otree-chat__nickname {
            color: #0000FF;
            font-weight: bold;
        }
</style>

{% endblock %}