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

{% block title %}
       Information Feedback of {{ title_text }}
{% endblock %}

{% block styles %}

    <style>

    #ptable table, th, td {
      border: 2px solid black;
      padding: 0;
        table-layout:fixed;
    }
    #ptable table{
         height: 100%;
    }

    #ptable thead tr th:first-child,
    #ptable tbody tr td:first-child {
      width: 8em;
      min-width: 8em;
      max-width: 8em;
    }

        button{
        margin:15px;
        padding: 4px 8px;
        font-size: 30px;
    }

        body{
       text-align: center;
       align-items: center;
       justify-content: center;
    }

        p{
    font-size: 22px;
    text-indent:0;
}
    </style>
{% endblock %}

{% block content %}
<br>
<br>
{% if player.roles == 'R' %}

<p>Your paired sender in this round was <U><b>H-Sender</b></u>.</p>

{% elif player.roles == 'R_vs_bot' %}

<p>Your paired sender in this round was <U><b>C-Sender</b></u>.</p>

{% endif %}

<br>
<br>

<table id="ptable" border="2" style=" rules:none; font-size:22px; text-align:center;width: 100%;">
    {% if subsession.gamemode == 2 %}
    <tr>
        <th>Information</th>
        <th>Stage 1</th>
        <th>Stage 2</th>
    </tr>
    <tr>
        <td>Shell Color</td>
        <td>{% if player.shell == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
        <td>{% if player.shell2 == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
    </tr>
    <tr>
        <td>Core Color</td>
        <td>{% if player.type == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
        <td>{% if player.type2 == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
    </tr>
    <tr>
        <td>Sender Message</td>
        <td>{% if player.message_sent == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
        <td>{% if player.message_sent2 == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
    </tr>
    <tr>
        <td>Receiver Action</td>
        <td>{% if player.conjecture == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
        <td>{% if player.conjecture2 == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
    </tr>
    <tr>
        <td>Earning</td>
        <td>{{ payoff1|to0 }}</td>
        <td>{{ payoff|to0 }}</td>
    </tr>
    {% elif subsession.gamemode == 1 %}
    <tr>
        <td>Shell Color</td>
        <td>{% if player.shell == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
    </tr>
    <tr>
        <td>Core Color</td>
        <td>{% if player.type == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
    </tr>
    <tr>
        <td>Sender Message</td>
        <td>{% if player.message_sent == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
    </tr>
    <tr>
        <td>Receiver Action</td>
        <td>{% if player.conjecture == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
    </tr>
    <tr>
        <td>Earning</td>
        <td>{{ payoff|to0 }}</td>
    </tr>
    {% else %}
    <tr>
        <td>Shell Color</td>
        <td>{% if player.shell == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
    </tr>
    <tr>
        <td>Core Color</td>
        <td>{% if player.type == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
    </tr>
    <tr>
        <td>Sender Recommendation Rule</td>
        <td>Given <span style="color: blue; font-weight: bold;">BLUE</span> shell: <span style="color: red; font-weight: bold;">{{ recom_0 }}</span>% Red, <span style="color: blue; font-weight: bold;">{{ recomm_0 }}</span>% Blue<br>
        Given <span style="color: red; font-weight: bold;">RED</span> shell: <span style="color: red; font-weight: bold;">{{ recomm_1 }}</span>% Red, <span style="color: blue; font-weight: bold;">{{ recom_1 }}</span>% Blue</td>
    </tr>
    <tr>
        <td>Sender Message</td>
        <td>{% if player.message_sent == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
    </tr>
    <tr>
        <td>Receiver Action</td>
        <td>{% if player.conjecture == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}</td>
    </tr>
    <tr>
        <td>Earning</td>
        <td>{{ payoff|to0 }}</td>
    </tr>
    {% endif %}
</table>

<br>
{% next_button %}

{% endblock %}

{% block scripts %}

{% endblock %}