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

{% block title %}
    Result
{% endblock %}

{% block content %}


    <style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
table tr#ROW1  {background-color:#E4DCDB ; color:black; colspan="2"}
td {
  border: 2px solid #dddddd;
  text-align: center;
  padding: 8px;
}

th {
  border: 2px solid #dddddd;
  text-align: left;
  padding: 8px;
}

<!--tr:nth-child(even) {-->
<!--  background-color: #dddddd;-->
<!--}-->
</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 id = "ROW1">
        <td style="text-align:left" colspan="2">&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>
    <tr>
        {% for choice in form.treatment_choice %}
            <td>  {{ choice }} </td>
        {% endfor %}
    </tr>

</table>

    {% next_button %}
{% endblock %}