{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    ROUND {{ subsession.round_number }} - WHOSE ADVICE DO YOU WANT?
{% endblock %}

{% block content %}

    <p>
        There is a
            {% if subsession.round_number != 1 %}
                <span style="color: red;"><u>brand new</u></span>
            {% endif %}
        jar containing  {{ n1_balls }} <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span> balls and {{ n2_balls }}
        <span style="color: red;"><b>{{ Constants.colour2 }}</b></span> balls.<br/><br/>

        {% if player.treatment == 'T1' or player.treatment ==  'T2' or player.treatment ==  'T3' %}
            <img src="{% static "information_acquisition/urn1.png" %}"/>
        {% else %}
            <img src="{% static "information_acquisition/urn2.png" %}"/>
        {% endif %}
    </p>

    <p>
        The computer has randomly drawn <b>ONE</b> ball out of this jar.<br/><br>

        <b>Your task is to guess whether the ball drawn by the computer is <span style="color: blue;">{{ Constants.colour1 }}</span> or
        <span style="color: red;">{{ Constants.colour2 }}</span></b>.<br/><br/>

        Before you make your guess, you can get advice from a <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span> or a
        <span style="color: red;"><b>{{ Constants.colour2 }}</b></span> expert.
    </p>


    {% if player.treatment == 'T1' or player.treatment == 'T4' %}
        <p>If you get advice from a <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span> expert:</p>

        <ul>
            <li>If the ball is BLUE:
                    <ul>
                        <li>An informed BLUE expert says “The ball is BLUE”</li>
                        <li>An uninformed BLUE expert says “The ball is BLUE”</li>
                    </ul>
            </li>

            <li>If the ball is RED:
                    <ul>
                        <li>An informed BLUE expert says “The ball is RED”</li>
                        <li>An uninformed BLUE expert says “The ball is BLUE”</li>
                    </ul>
            </li>
        </ul>

        <p>If you get advice from a <span style="color: red;"><b>{{ Constants.colour2 }}</b></span> expert:</p>

        <ul>
            <li>If the ball is BLUE:
                    <ul>
                        <li>An informed RED expert says “The ball is BLUE”</li>
                        <li>An uninformed RED expert says “The ball is RED”</li>
                    </ul>
            </li>

            <li>If the ball is RED:
                    <ul>
                        <li>An informed RED expert says “The ball is RED”</li>
                        <li>An uninformed RED expert says “The ball is RED”</li>
                    </ul>
            </li>
        </ul>

        <p>Remember that <span style="color: red;"><b><u>5 out of 10</u></b></span> BLUE experts are informed and
            <span style="color: red;"><b><u>5 out of 10</u></b></span> RED experts are informed.
        </p>
    {% endif %}

    {% if player.treatment == 'T2' or player.treatment == 'T5' %}
        <p>If you get advice from a <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span> expert:</p>

        <ul>
            <li>If the ball is BLUE:
                    <ul>
                        <li>An informed BLUE expert says “The ball is BLUE”</li>
                        <li>An uninformed BLUE expert says “The ball is BLUE”</li>
                    </ul>
            </li>

            <li>If the ball is RED:
                    <ul>
                        <li>An informed BLUE expert says “The ball is RED”</li>
                        <li>An uninformed BLUE expert says “The ball is BLUE”</li>
                    </ul>
            </li>
        </ul>

        <p>If you get advice from a <span style="color: red;"><b>{{ Constants.colour2 }}</b></span> expert:</p>

        <ul>
            <li>If the ball is BLUE:
                    <ul>
                        <li>An informed RED expert says “The ball is BLUE”</li>
                        <li>An uninformed RED expert says “The ball is RED”</li>
                    </ul>
            </li>

            <li>If the ball is RED:
                    <ul>
                        <li>An informed RED expert says “The ball is RED”</li>
                        <li>An uninformed RED expert says “The ball is RED”</li>
                    </ul>
            </li>
        </ul>

        <p>Remember that <span style="color: red;"><b><u>3 out of 10</u></b></span> BLUE experts are informed and
            <span style="color: red;"><u><b>7 out of 10</b></u></span> RED experts are informed.</p>
    {% endif %}

    <br/>

    <p><b>Which expert do you want to hear from?</b></p>

    <table class="table">
        <tr>
	    	<td><img src="{% static 'information_acquisition/BlueExpert.png' %}"/></td>
	    	<td><img src="{% static 'information_acquisition/RedExpert.png' %}"/></td>
	    </tr>
        <tr>
            <td><input type='radio' name='expert_choice' value='BLUE Expert' required><span style="color: blue;"><b> BLUE</b></span> Expert</td>
            <td><input type='radio' name='expert_choice' value='RED Expert' required><span style="color: red;"><b> RED</b></span> Expert</td>
        </tr>
    </table>

    {% next_button %}

{% endblock %}

{% block styles %}
    <style type="text/css">
        img {
            display: block;
            margin: auto;
            width: 200px;
            height: auto;
        }
        p {
            text-align: justify;
            font-size: 1.3vw;
        }
        ul {
            text-align: justify;
            font-size: 1.3vw;
        }
        li {
                padding-bottom: 0.35vw;
        }

        th, td {
            text-align: center;
            font-size: 1.3vw;
            font-weight: 400;
        }

    </style>
{% endblock %}