{{ block title }}
Interface Practice ({{qu_num}}/{{qu_rep}})
{{ endblock }}

{{ block content }}
<!-- Intro Context Section -->
<div class="card bg-mid m-0">
    <h2 class="card-header">🎯 Ready to Practice!</h2>
    <div class="card-body">
        <div class="process-box">
            <h6>🚀 Practice Round Overview</h6>
            Great! Now that you understand how payment and decision-making work in the experiment, 
            it's time to practice using the interface. 
            <br><br>
            In these practice rounds, you will answer all three questions that appear in the main experiment. 
            This practice will not affect your actual payment—it's just to get familiar with the process and interface.
        </div>
        
        <div class="decision-box" style="margin-top: 20px;">
            <h6>📋 Example Scenario</h6>
            {{ scenario_text }}
            <br><br>
            Given this example, you might:
            <ul style="margin-top: 10px;">
                <li>Personally prefer <strong>{{ correct_personal }}</strong></li>
                <li>Choose <strong>{{ correct_team }}</strong> as part of the Research Team</li>
                <li>Vote for the <strong>{{ correct_authority }}</strong></li>
            </ul>
            <strong>For the practice questions below, choose the votes that correspond to the above example.</strong>
        </div>
    </div>
</div>

<br>

<!-- Personal Vote Section -->
<div class="card bg-mid m-0">
    <h2 class="card-header">Practice Question 1: What robot do you personally think would be best for this round?</h2>
</div>

<br>

<div class="button-section">
    <div class="button-container-row">
        <button type="button" class="button button2 strategy-button" onclick="setPersonalVote(0)">{{ C.BUTTON_LABELS.0 }}</button>
        <button type="button" class="button button2 strategy-button" onclick="setPersonalVote(1)">{{ C.BUTTON_LABELS.1 }}</button>
        <button type="button" class="button button2 strategy-button" onclick="setPersonalVote(2)">{{ C.BUTTON_LABELS.2 }}</button>
        <button type="button" class="button button2 strategy-button" onclick="setPersonalVote(3)">{{ C.BUTTON_LABELS.3 }}</button>
    </div>
    <input type="hidden" name="personal_answer" id="id_personal_answer" value="">
</div>

<br><br>

<!-- Strategy Vote Section -->
<div class="card bg-mid m-0">
    <h2 class="card-header">🤖 Practice Question 2: What robot would you choose as part of the Research Team for this round?</h2>
</div>

<br>

<div class="button-section">
    <div class="button-container-row">
        <button type="button" class="button button2 strategy-button" onclick="setStrategyVote(0)">{{ C.BUTTON_LABELS.0 }}</button>
        <button type="button" class="button button2 strategy-button" onclick="setStrategyVote(1)">{{ C.BUTTON_LABELS.1 }}</button>
        <button type="button" class="button button2 strategy-button" onclick="setStrategyVote(2)">{{ C.BUTTON_LABELS.2 }}</button>
        <button type="button" class="button button2 strategy-button" onclick="setStrategyVote(3)">{{ C.BUTTON_LABELS.3 }}</button>
    </div>
    <input type="hidden" name="strategy_answer" id="id_strategy_answer" value="">
</div>

<br><br>

<!-- Governance Vote Section -->
<div class="card bg-mid m-0">
    <h2 class="card-header">🧑‍🔬🎖️ Practice Question 3: Who should decide which type of robot to send for this round?</h2>
</div>

<br>

<div class="button-section">
    <div class="button-container">
        <button type="button" class="button button2" onclick="setGovernanceVote(0)">{{ C.LEADER_BUTTON_LABELS.0 }}</button>
        <button type="button" class="button button2" onclick="setGovernanceVote(1)">{{ C.LEADER_BUTTON_LABELS.1 }}</button>
    </div>
    <input type="hidden" name="governance_answer" id="id_governance_answer" value="">
</div>

<br>

<script>
function setPersonalVote(value) {
    document.getElementById('id_personal_answer').value = value;

    const personalButtons = document.querySelectorAll('[onclick^="setPersonalVote"]');
    personalButtons.forEach(btn => btn.classList.remove('selected'));
    event.target.classList.add('selected');

    maybeSubmit();
}

function setStrategyVote(value) {
    document.getElementById('id_strategy_answer').value = value;

    const strategyButtons = document.querySelectorAll('[onclick^="setStrategyVote"]');
    strategyButtons.forEach(btn => btn.classList.remove('selected'));
    event.target.classList.add('selected');

    maybeSubmit();
}

function setGovernanceVote(value) {
    document.getElementById('id_governance_answer').value = value;

    const governanceButtons = document.querySelectorAll('[onclick^="setGovernanceVote"]');
    governanceButtons.forEach(btn => btn.classList.remove('selected'));
    event.target.classList.add('selected');

    maybeSubmit();
}

function maybeSubmit() {
    const personal = document.getElementById('id_personal_answer').value;
    const strategy = document.getElementById('id_strategy_answer').value;
    const governance = document.getElementById('id_governance_answer').value;

    if (personal !== '' && strategy !== '' && governance !== '') {
        document.querySelector('form').submit();
    }
}
</script>

{{ if player.participant.active == 0 }}
<div class="inactive_box">
    <h1 class="inactive_text">Lo sentimos, no puede continuar con el estudio.</h1>
</div>
{{ endif }}
{{ endblock }}

{{ block styles }}
<style>
.decision-box {
    margin: 15px 0;
    background-color: #e7f3ff;
    padding: 15px;
    border-left: 5px solid #007bff;
    border-radius: 6px;
}

.process-box {
    margin: 15px 0;
    background-color: #e8f5e8;
    padding: 15px;
    border-left: 5px solid #198754;
    border-radius: 6px;
}

.warning-box {
    margin: 15px 0;
    background-color: #fff3cd;
    padding: 15px;
    border-left: 5px solid #ffc107;
    border-radius: 6px;
    font-weight: bold;
}

.decision-box h6,
.process-box h6 {
    margin-top: 0;
    font-weight: bold;
    color: #333;
}

.decision-box ul {
    margin-bottom: 10px;
}

.button-section {
    text-align: center;
}

/* Single row container for governance buttons */
.button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

/* Single row container for questions 1 and 2 */
.button-container-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 15px auto 0;
    padding: 0 20px;
    max-width: 1000px;
}

.button {
    background-color: #3182bd;
    border: none;
    color: white;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    border-radius: 12px;
}

.button2 {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
}

.button2.selected {
    background-color: #4CAF50;
    color: white;
    border: 2px solid #4CAF50;
    font-weight: bold;
}

/* Strategy buttons in single row - evenly sized */
.button-container-row .strategy-button {
    flex: 1;
    min-width: 180px;
    max-width: 220px;
    min-height: 60px;
    white-space: pre-line;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
}

/* Governance buttons remain in row */
.button-container .button {
    min-width: 120px;
    flex: 1;
    max-width: 200px;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .button-container-row {
        flex-direction: column;
        align-items: center;
        max-width: 300px;
    }
    
    .button-container-row .strategy-button {
        width: 100%;
        max-width: 300px;
    }
    
    .button-container {
        flex-direction: column;
        align-items: center;
    }
    
    .button-container .button {
        width: 100%;
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .button-container-row {
        padding: 0 10px;
    }
    
    .button-container-row .strategy-button {
        min-height: 50px;
        font-size: 16px;
        padding: 10px 8px;
    }
}
</style>
{{ endblock }}