{{ extends 'global/Page.html' }}
{{ block title }}Sector Exploration{{ 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; }
    
    .reminder-box { 
        background: #e8f4f8; 
        border-left: 5px solid #17a2b8; 
        padding: 15px; 
        border-radius: 4px; 
        margin: 20px auto 30px auto; 
        width: 90%; 
        max-width: 400px; 
        box-sizing: border-box;
        color: #333333 !important;
    }
</style>

<div style="text-align: center; margin-top: 40px;" id="main-content">
    <h2>Wave {{ player.round_number }} of 30</h2>
    
    {{ if player.round_number > 1 }}
        <div class="reminder-box">
            <span style="font-size: 0.9rem; color: #555555; font-weight: bold;">--- PREVIOUS WAVE PAYOFF ---</span><br><br>
            <strong>Mining Yield:</strong> <span style="color: #28a745; font-size: 1.1rem; font-weight: bold;">{{ last_earned }} coins</span>
        </div>
    {{ endif }}

    <p style="margin-bottom: 30px;">Choose a sector.</p>

    <button type="submit" name="bandit_choice" value="left" class="door-btn" id="btn_left" onclick="recordRT()">
        SECTOR ALPHA
    </button>
    
    <button type="submit" name="bandit_choice" value="mid" class="door-btn" id="btn_mid" onclick="recordRT()">
        SECTOR BETA
    </button>

    <button type="submit" name="bandit_choice" value="right" class="door-btn" id="btn_right" onclick="recordRT()">
        SECTOR GAMMA
    </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 }}