{% 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>
<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>
<p>You have five minutes to construct and submit the longest English word that you can form with these letters. Note that each of these letters can be used exactly once in the word that you form. When you are ready to make the submission, type it in the box below and click ‘Submit’. You can see how much time you have remaining on the top of your screen.</p>
</div>

<div>
{% formfield player.word %}
</div>

<div class='container-fluid'>
	<div class='row'>
		<div class='col-md text-center'>
			{% next_button %}
		</div>
	</div>
</div>

{% endblock %}