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

{% block scripts %}
<script>
    // Wait for the DOM to load before running
    document.addEventListener("DOMContentLoaded", function() {
        // Uncheck all radio buttons for authority_accepted_transfer
        const radios = document.querySelectorAll('input[name="authority_accepted_transfer"]');
        radios.forEach(radio => radio.checked = false);
    });
</script>
{% endblock %}

{% 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;">Decision Task</h1>
    </div>
    <div style="text-align: right;">
        <p>Round: {{ player.round_number }} of {{ C.NUM_ROUNDS }}</p>
    </div>
</div>
<br><br>
<p>You earned <strong>{{ points_earned }}</strong> points in the addition task.</p>

<p>The manager may offer you a transfer of <strong>60 ECUs</strong>.</p>
<ul>
    <li>If you accept, you will pay <strong>{{ interfere_cost }} ECUs</strong> to intervene, reducing the report success chance from 97% to {{ treatment_percentage }}%.</li>
    <li>If you reject, no transfer occurs, and the report success chance stays at 97%.</li>
</ul>
<br>

<p>Do you want to accept the Manager’s transfer of 60 ECUs, and earn <strong>55 ECUs</strong>?</p>
<div class="radio-container">
    {{ formfield 'authority_accepted_transfer' }}
    {{ formfield_errors 'authority_accepted_transfer' }}
</div>

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

<style>
    .otree-timer {
        background-color: transparent !important;
        color: black !important;
        font-weight: normal;
        border: none;
        padding: 0;
        text-align: right;
    }
    .radio-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin: 10px auto;
        width: fit-content;
    }
</style>
{% endblock %}