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

{% block title %}
    Part 2: Game {{ player.match }}– Choose Your Rule
{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'global/matrix.css' %}" />

    <style>
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 15px;
            font-size:16px;
        }

        th {
            padding: 15px;
            text-align:center;
            font-weight:normal;
        }

        table.center {
            margin-left: auto;
            margin-right: auto;
        }

        .strat{
            width:200px;
	        height:150px; word-wrap:break-word;
        }

        .red{
	        color:Orange;
        }

        .blue{
	        color:Purple;
        }
    </style>

{% endblock %}

{% block content %}

<h4>The Payment Table</h4>
<div class='container-fluid' style='display:block;text-align:center'>
    <table class="center">
		<tr>
			<th></th>
			<th></th>
			<th colspan="2"><span class="red"><b>Counterpart's Action</b></span></th>
		</tr>
		<tr>
			<th></th>
			<th></th>
			<th class='red'>A</th>
			<th class='red'>B</th>
		</tr>

		<tr>
			<th rowspan="2"><span class="blue" ><b>Your Action</b></span></th>
			<th class='blue'>A</th>
			<td><span class="blue">{{Constants.both_defect_payoff}}</span>, <span class="red">{{Constants.both_defect_payoff}}</span></td>
            {% if complex_treatment %}
                <td><span class="blue">{{Constants.betray_payoff}}</span>, <span class="red">{{ Constants.betrayed_payoff_complex }}</span></td>
            {% else %}
                <td><span class="blue">{{Constants.betray_payoff}}</span>, <span class="red">{{ Constants.betrayed_payoff_simple }}</span></td>
            {% endif %}
		</tr>

		<tr>
			<th  class='blue'>B</th>
			{% if complex_treatment %}
                <td><span class="blue">{{ Constants.betrayed_payoff_complex }}</span>, <span class="red">{{Constants.betray_payoff}}</span></td>
            {% else %}
                <td><span class="blue">{{ Constants.betrayed_payoff_simple }}</span>, <span class="red">{{Constants.betray_payoff}}</span></td>
            {% endif %}
			<td><span class="blue">{{Constants.both_cooperate_payoff}}</span>, <span class="red">{{Constants.both_cooperate_payoff}}</span></td>
		</tr>
	</table>
</div>
<hr>
<h4>The Rules Table</h4>
<div class='container-fluid ' style='display:block;text-align:center'>
    {% if complex_treatment %}
        <table class="center" style="table-layout:fixed; width:900px;height;">
            <tr>
                <th></th>
                <th></th>
                <th colspan="2"><span class="red"><b>Counterpart's Rule</b></span></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                {% if salience %}
                    <th class='red strat' >Always choose A</th>
                    <th class='red strat' style="text-align:left">In rounds 1, 2 and 3 choose B. After round 3: choose A if your counterpart chose A in all of the previous 3 rounds; otherwise choose B</th>
                {% else %}
                    <th class='red strat'>Rule 1</th>
                    <th class='red strat'>Rule 2</th>
                {% endif %}
            </tr>
            <tr>
                <th rowspan="2"><span class="blue" ><b>Your Rule</b></span></th>
                {% if salience %}
                    <th class='blue strat' style="text-align:left"><input name="strategy" type="radio" value="S1"> Always choose A</th>
                {% else %}
                    <th class='blue strat' style="text-align:left"><input name="strategy" type="radio" value="S1"> Rule 1</th>
                {% endif %}

                {% if computation %}
                    <td ><span class="blue">?</span>, <span class="red">?</span></td>
			        <td ><span class="blue">?</span>, <span class="red">?</span></td>
                {% else %}
                    <td ><span class="blue">{{Constants.AD_both}}</span>, <span class="red">{{Constants.AD_both}}</span></td>
			        <td ><span class="blue">{{Constants.ADTF3T}}</span>, <span class="red">{{ Constants.TF3TAD }}</span></td>
                {% endif %}
            </tr>
            <tr>
                {% if salience %}
                    <th class='blue strat' style="text-align:left"><input name="strategy" type="radio" value="C"> In rounds 1, 2 and 3 choose B. After round 3: choose A if your counterpart chose A in all of the previous 3 rounds; otherwise choose B</th>
                {% else %}
                    <th class='blue strat' style="text-align:left"><input name="strategy" type="radio" value="C"> Rule 2</th>
                {% endif %}

                {% if computation %}
                    <td ><span class="blue">?</span>, <span class="red">?</span></td>
			        <td ><span class="blue">?</span>, <span class="red">?</span></td>
                {% else %}
                    <td ><span class="blue">{{ Constants.TF3TAD }}</span>, <span class="red">{{Constants.ADTF3T}}</span></td>
			        <td ><span class="blue">{{Constants.TF3T_both}}</span>, <span class="red">{{Constants.TF3T_both}}</span></td>
                {% endif %}
            </tr>
        </table>
    {% else %}
        <table class="center" style="table-layout:fixed; width:800px;height;">
            <tr>
                <th></th>
                <th></th>
                <th colspan="2"><span class="red"><b>Counterpart's Rule</b></span></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                {% if salience %}
                    <th class='red strat'>Always choose A</th>
                    <th class='red strat' style="text-align:left">In round 1 choose B. After round 1: choose whatever your counterpart chose last round</th>
                {% else %}
                    <th class='red strat'>Rule 1</th>
                    <th class='red strat'>Rule 2</th>
                {% endif %}
            </tr>
            <tr>
                <th rowspan="2"><span class="blue" ><b>Your Rule</b></span></th>
                {% if salience %}
                    <th class='blue strat' style="text-align:left"><input name="strategy" type="radio" value="S1"> Always choose A</th>
                {% else %}
                    <th class='blue strat' style="text-align:left"><input name="strategy" type="radio" value="S1"> Rule 1</th>
                {% endif %}

                {% if computation %}
                    <td ><span class="blue">?</span>, <span class="red">?</span></td>
			        <td ><span class="blue">?</span>, <span class="red">?</span></td>
                {% else %}
                    <td ><span class="blue">{{Constants.AD_both}}</span>, <span class="red">{{Constants.AD_both}}</span></td>
			        <td ><span class="blue">{{Constants.ADTFT}}</span>, <span class="red">{{ Constants.TFTAD }}</span></td>
                {% endif %}

            </tr>
            <tr style="height:100px">
                {% if salience %}
                    <th class='blue strat' style="text-align:left"><input name="strategy" type="radio" value="S2"> In round 1 choose B. After round 1: choose whatever your counterpart chose last round</th>
                {% else %}
                    <th class='blue strat' style="text-align:left"><input name="strategy" type="radio" value="S2"> Rule 2</th>
                {% endif %}

                {% if computation %}
                    <td ><span class="blue">?</span>, <span class="red">?</span></td>
			        <td ><span class="blue">?</span>, <span class="red">?</span></td>
                {% else %}
                    <td ><span class="blue">{{ Constants.TFTAD }}</span>, <span class="red">{{Constants.ADTFT}}</span></td>
			        <td ><span class="blue">{{Constants.TFT_both}}</span>, <span class="red">{{Constants.TFT_both}}</span></td>
                {% endif %}
            </tr>
        </table>
    {% endif %}
</div>
<hr>
    <p style="font-size:20px">Please choose your rule and then click Submit.</p>
    <input type="submit" value="Submit">
    {{ form.strategy.errors }}
{% endblock %}