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

{% block content %}

<div style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
    <div>
        <p>Your role is: <strong>{{ player.get_role }}</strong></p>
    </div>
    <div style="text-align: center;">
        <h1 style="font-weight: bold; font-size: 20px; margin: 0;">Belief Task</h1>
    </div>
    <div style="text-align: right;">
        <p style="margin: 0;">Round: {{ player.round_number }} of {{ C.NUM_ROUNDS }}</p>
        <div class="otree-timer"></div>
    </div>
</div>

<br>

<p>

You will now be asked to guess what participants did in round 10 in previous sessions. In round {{ player.round_number }}, the managers in previous sessions faced a <strong>{{ inst_label }}</strong> chance of losing their earnings if the authority accepted a transfer and a report was made.


</p>

{% if is_manager %}

<p>
How many workers do you think reported their manager who took the following percentages from a worker?

</p>

<p>The computer will automatically calculate your earnings. You only need to enter the number that best reflects your belief</p>

<table class="table">
  <tr><th>Theft (%)</th><th>Your answer (0–100)</th></tr>
  <tr><td>Out of 100 workers from previous sessions, how many do you think reported if their manager took <strong>10%</strong>? </td><td>{% formfield player.belief_mgr_report_10 label="" %}</td></tr>
  <tr><td>Out of 100 workers from previous sessions, how many do you think reported if their manager took <strong>20%</strong>?</td><td>{% formfield player.belief_mgr_report_20 label="" %}</td></tr>
  <tr><td>Out of 100 workers from previous sessions, how many do you think reported if their manager took <strong>30%</strong>?</td><td>{% formfield player.belief_mgr_report_30 label="" %}</td></tr>
  <tr><td>Out of 100 workers from previous sessions, how many do you think reported if their manager took <strong>40%</strong>?</td><td>{% formfield player.belief_mgr_report_40 label="" %}</td></tr>
  <tr><td>Out of 100 workers from previous sessions, how many do you think reported if their manager took <strong>50%</strong>?</td><td>{% formfield player.belief_mgr_report_50 label="" %}</td></tr>
</table>
{% endif %}

{% if is_worker %}


<p>How many managers who took the following percentages from the workers do you think offered a transfer to the authority?</p>
<p>The computer will automatically calculate your earnings. You only need to enter the number that best reflects your belief</p>

<table class="table">
  <tr><th>Theft (%)</th><th>Your answer (0–100)</th></tr>
  <tr><td>Out of 100 managers from previous sessions who took <strong>10%</strong> from their matched worker, how many do you think offered a transfer? </td><td>{% formfield player.belief_wkr_offer_10 label="" %}</td></tr>
  <tr><td>Out of 100 managers from previous sessions who took <strong>20%</strong> from their matched worker, how many do you think offered a transfer? </td><td>{% formfield player.belief_wkr_offer_20 label="" %}</td></tr>
  <tr><td>Out of 100 managers from previous sessions who took <strong>30%</strong> from their matched worker, how many do you think offered a transfer? </td><td>{% formfield player.belief_wkr_offer_30 label="" %}</td></tr>
  <tr><td>Out of 100 managers from previous sessions who took <strong>40%</strong> from their matched worker, how many do you think offered a transfer? </td><td>{% formfield player.belief_wkr_offer_40 label="" %}</td></tr>
  <tr><td>Out of 100 managers from previous sessions who took <strong>50%</strong> from their matched worker, how many do you think offered a transfer? </td><td>{% formfield player.belief_wkr_offer_50 label="" %}</td></tr>
</table>



{% endif %}


<br>

<!-- Right-Aligned Next Button -->
<div style="text-align: right;">
    {{ next_button }}
</div>

<style>
    /* Make the oTree timer match your Authority page look */
    .otree-timer {
        background-color: transparent !important;
        color: black !important;
        font-weight: normal;
        border: none;
        padding: 0;
        text-align: right;
        margin: 0;
    }

    /* Optional: tighten input look */
    input[type="number"], input[type="text"] {
        max-width: 200px;
    }
</style>

{% endblock %}