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

{{ block content }}
<!-- Intro Context Section -->
<div class="card bg-mid m-0">
    <h2 class="card-header">⚠️ Final Chance!</h2>
    <div class="card-body">
        <div class="danger-box" style="background-color: #f8d7da; border-left: 5px solid #dc3545;">
            🚨 This is your <strong>last opportunity</strong> to practice using the interface. If you don't select the correct answers this time, you will not be able to continue with the study. Please read carefully and make sure you understand the decision-making process.
        </div>
        
        <div class="decision-box" style="margin-top: 20px;">
            <h6>📋 Reminder: Example Scenario</h6>
            {{ scenario_text }}
            <br><br>
            Given this example, you should:
            <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>Please select the correct answers below.</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;
}

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

.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;
}

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

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

.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 }}