{{ extends 'global/Page.html' }}
{{ block title }}Decision Task{{ endblock }}

{{ block content }}

<style>
    .door-btn { 
        padding: 15px 20px;
        font-size: 1.2rem; 
        margin: 15px auto;
        cursor: pointer; 
        border: 2px solid #333; 
        background: #f9f9f9; 
        color: #333333 !important;
        border-radius: 8px; 
        width: 90%;
        max-width: 300px;
        font-weight: bold;
        display: block;
        box-sizing: border-box;
        white-space: normal;
    }
    .door-btn:hover { background: #e9ecef; }
</style>

<div style="text-align: center; margin-top: 40px;" id="main-content">
    <h2>Round {{ player.round_number }} of 30</h2>

    {{ if last_earned != None }}
        <div style="background: #e2e3e5; padding: 10px; border-radius: 5px; margin-bottom: 20px; font-weight: bold; color: #383d41 !important;">
            Previous round payoff: {{ last_earned }} points
        </div>
    {{ endif }}

    <p style="margin-bottom: 30px;">Please choose one option.</p>

    <button type="submit" name="choice" value="left" class="door-btn" id="btn_left" onclick="recordRT()">
        Option A
    </button>
    
    <button type="submit" name="choice" value="mid" class="door-btn" id="btn_mid" onclick="recordRT()">
        Option B
    </button>

    <button type="submit" name="choice" value="right" class="door-btn" id="btn_right" onclick="recordRT()">
        Option C
    </button>
</div>

<input type="hidden" name="decision_rt" id="in_decision_rt" value=""> 

<div style="display: none;">
    {{ formfield_errors 'decision_rt' }} 
</div>

<script>
   let pageLoadTime;
requestAnimationFrame(function() {
    requestAnimationFrame(function() {
        pageLoadTime = performance.now();
    });
});
function recordRT() {
    document.getElementById('in_decision_rt').value = performance.now() - pageLoadTime;
}
</script>



{{ endblock }}