{% block title %}
Control Example
{% endblock %}

{% block content %}

<audio id="page-load-sound" src="{% static 'Page.wav' %}" preload="auto"></audio>

<style>
    .form-group.inline-radio span {
        display: inline-block;
        margin-right: 10px;
        padding: 5px 8px;  /* Adjust the space between radio and label */
        position: relative;
    }
    
    .form-group.inline-radio input[type="radio"]:checked + span label {
        background-color: hsl(210, 100%, 86%);
    }
    
    .form-group.inline-radio input[type="radio"], 
    .form-group.inline-radio span label {
        cursor: pointer;
    }
    
    input[type="radio"] {
        transform: scale(1.3);
        margin-right: 3px;
        vertical-align: middle;
    }
</style>

<div style="background-color: white; padding: 20px; border-radius: 15px; margin: 20px auto; max-width: 800px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);">
    <b style="font-size: 18px; color: rgb(0, 70, 84); display: block; margin-bottom: 20px;">Please calculate the payoffs for each player based on the provided information.</b>
    
    <p style="line-height: 1.5; margin-bottom: 20px;">What are the payoffs, if:</p>
    <ul>
        <li>In Phase 1: Player A chose 100% as the tax.</li>
        <li>In Phase 2: Player B produced 2 points. Then,</li>
    </ul>

    {{ formfields }}
    
    <p style="line-height: 1.5; margin-top: 20px;">Press the 'Next' button to proceed and you will be assigned to one of the roles.</p>

    {{ next_button }}
</div>

{% endblock %}


{% block scripts %}
<script src="{{ static 'otree-front-1.3.b1.js' }}"></script>

<!-- Play sound when the page loads -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('page-load-sound').play();
    });
</script>

{% endblock %}