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

{% block title %}
    Result: Round {{round_number}}
{% endblock %}

{% block content %}
    {% if player.id_in_group == 2 %}

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

    <tr>
        <td>The expert's recommended solution</td>
        <td> Solution {{ recommended_solution }} </td>
    </tr>

    <tr>
        <td>The solution you actually received</td>
        <td> Solution {{ actual_solution }} </td>
    </tr>

    <tr>
        <td>The problem you are having</td>
        <td>Problem {{ problem }}</td>
    </tr>
    <tr>
        <td>Is the problem solved?</td>
        <td>{% if player.treatment_final == player.problem %} Yes {% else %} No {% endif %}</td>
    </tr>



    <tr>
        <td>Your payoff from this round</td>
        <td> <b> {{ payment_client }} Tokens </b></td>
    </tr>
</table>

    {% endif %}

    {% if player.id_in_group == 1 %}
<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>
            <col width="70%">
            <col width="30%">
    <tr>
        <td>Your recommended solution</td>
        <td>Solution {{ recommended_solution }}</td>
    </tr>
    <tr>
        <td>The client actually received</td>
        <td>Solution {{ actual_solution }}</td>
    </tr>
    <tr>
        <td>The client's problem</td>
        <td>Problem {{ problem }}</td>
    </tr>
    <tr>
        <td>Is the problem solved?</td>
        <td>{% if player.treatment_final == player.problem %} Yes {% else %} No {% endif %}</td>
    </tr>

</table>
<br>
<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>
        <col width="70%">
            <col width="30%">
    <tr>
        <td>Base income</td>
        <td> <b> + 80 Tokens</b></td>
    </tr>

    <tr>
        <td>Extra income from problem solving </td>
        <td> <b> + {{ altruism_payoff }} Tokens</b></td>
    </tr>

    <tr>
        <td>Cost of diagnosis</td>
        <td> <b>  - {{cost}} Tokens</b> </td>
    </tr>
    <tr>
        <td>Your payoff for this round</td>
        <td><b>{{payment_expert}} Tokens</b></td>
    </tr>
</table>


    {% endif %}



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