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


{% 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:14px;
        }

        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;
        }

        legend{
            font-size:18px;
            font-weight:bold;
        }

        label{
            font-weight:normal;
        }

        li{
            font-size:16px;
        }

        .red{color:red;}
        .blue{color:blue;}
        .green{color:green;}
        .purple{color:purple;}
        .orange{color:orange;}
    </style>

{% endblock %}

{% block content %}

<div class="card card-body instructions">
    <ul class='page'>
        <hr>
            <h3>Part 2:  New Payment Table and Rule Options</h3>
        <hr>

        <li>
            In the next part of the experiment, everything will remain the same except that we will <b>change</b> (i) the <b>set of rules</b> you and your counterpart are allowed to choose from and (ii) the <b>numbers in the payment table</b>.
        </li>
        <br>

        <li>
            The new Payment Table:
        </li>
        <br>

        <div class='container-fluid' style='display:block;text-align:center'>
            {% if complex_treatment %}
                <img src="{% static 'complex2021/payment_c.png' %}" width="400px" height="184px"/>
            {% else %}
                <img src="{% static 'complex2021/payment_s.png' %}" width="420px" height="193px"/>
            {% endif %}
        </div>
        <br>

        <li>
            The new Rules Table:
        </li>
        <br>

        <br>
        <div class='container-fluid' style='display:block;text-align:center'>
            {% if salience %}
                {% if computation %}
                    {% if complex_treatment %}
                        <img src="{% static 'complex2021/rules_c_compu_salience.png' %}" width="748px" height="450px"/>
                    {% else %}
                        <img src="{% static 'complex2021/rules_s_compu_salience.png' %}" width="702px" height="411px"/>
                    {% endif %}
                {% else %}
                    {% if complex_treatment %}
                        <img src="{% static 'complex2021/rules_c_nocompu_salience.png' %}" width="751px" height="459px"/>
                    {% else %}
                        <img src="{% static 'complex2021/rules_s_nocompu_salience.png' %}" width="751px" height="475px"/>
                    {% endif %}
                {% endif %}
            {% else %}
                {% if complex_treatment %}
                    <img src="{% static 'complex2021/rules_c_nocompu_nosalience.png' %}" width="752px" height="415px"/>
                {% else %}
                    <img src="{% static 'complex2021/rules_s_nocompu_nosalience.png' %}" width="710px" height="415px"/>
                {% endif %}
            {% endif %}
        </div>
        <br>

        {% if no_computation %}
            <li>
                Because the rules and numbers in the payment table are different, the numbers in the "Rules Table" may also be different.
            </li>
            <br>
        {% endif %}

        <li>
            Click <b>Next</b> to begin.
        </li>
    </ul>
</div>

<p style="text-align:right">
    <button class="otree-btn-next btn btn-primary">Next</button>
</p>


{% endblock %}