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

{% block title %}
    Choose Treatment
{% endblock %}

{% block content %}


    <style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
table tr#ROW1  {background-color:#D3D3D3 ; color:black;}
td {
  font-size:120%;
  border: 1px solid #858482;
  text-align: center;
  padding: 8px;
}

th {
  font-size:120%;
  border: 1px solid #858482;
  text-align: left;
  padding: 8px;
}

<!--tr:nth-child(even) {-->
<!--  background-color: #F5F5F5;-->
<!--}-->
</style>
<table>
    <colgroup>
       <col span="1" style="width: 60%;">
       <col span="1" style="width: 40%;">
    </colgroup>
    <tr>
        <th colspan="2">Your Own Information</th>
    </tr>
    <tr>
        <td>Your signal</td>
        <td> <b> Problem {{ private_signal }} </b> </td>
    </tr>
    <tr>
        <td>Accuracy of Your Signal</td>
        <td> <b> 60% </b> </td>
    </tr>
</table>
<br>
<table>
    <colgroup>
       <col span="1" style="width: 60%;">
       <col span="1" style="width: 40%;">
    </colgroup>
    <tr>
        <th colspan="2">Expert's Information</th>
    </tr>
    <tr>
        <td>Diagnostic Result</td>
        <td> <b> Problem {{ diagnostic_result }} </b> </td>
    </tr>
    <tr>
        <td>Solution Recommendation</td>
        <td> <b> Solution {{ recommend_solution }} </b> </td>
    </tr>

</table>

<table>
    <colgroup>
       <col span="1" style="width: 60%;">
       <col span="1" style="width: 40%;">
    </colgroup>
    <tr>
        <td >Please guess the expert's diagnostic accuracy</td>
        <td align="center">&emsp; {% formfield player.belief_precision label = "" %} </td>
    </tr>

</table>

<br>
<table>

    <tr id = "ROW1">
        <td style="text-align:left">&emsp;&emsp;Note:<br>
&emsp;&emsp;Solution A* solves Problem A. Solution B* solves Problem B.<br>
&emsp;&emsp;If you receive the correct solution, you will receive 120 tokens.<br>
&emsp;&emsp;If you receive the incorrect solution, you will receive 20 tokens.
</td>
    </tr>

</table>

<table>
       <colgroup>
       <col span="1" style="width: 50%;">
       <col span="1" style="width: 50%;">
    </colgroup>
    <tr>
        <th colspan="2">Which solution would you choose for solving your problem?</th>
    </tr>
    <tr>
        {% for choice in form.treatment_choice %}
            <td>  {{ choice }} </td>
        {% endfor %}
    </tr>

</table>
<br><br>
    {% next_button %}
{% endblock %}