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

{% block title %}
    Round {{ round }}
{% endblock %}

{% 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> <b>INTERGROUP COMPETITION</b></h4>
        <ul>
        <li>
        If you (or anyone else) choose to share your assigned letter:
        <ul>
        <li>All group members will be able to see and use the letter in their word construction task. </li><li>You will be able to participate in a chat with other group members who have also choosen to share their assigned letters and help each other in this task. </li></ul>
        </li>

        <li>
        If you choose to keep your letter private:
        <ul>
         <li>Your group members will not be able to use your letter in their word construction task (you will still be able to see the letters that other members of your group have shared).</li> <li>You will also not be able to participate in the chat with your group members nor be able to see the messages that the other members exchange. </li>

        </ul>
        <li>
        The set of letters available to each participant in the word construction task is the same if all members of a group choose to share their letters. </li>
        </ul>
      </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' %}"/>
<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">
The letter you have been assigned is {{ letter }}.
<br>
<br>
Click on ’Yes’ if you want to share your letter with your group members and on ’No’ otherwise.
<br>
<br>
{% for field in form %}

{{ field }}

{% endfor %}
</div>

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


{{ form.report.errors }}
{% endblock %}