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

{{ block content }}
<!-- Intro Context Section -->
<div class="card bg-mid m-0">
    <h2 class="card-header">🔄 Let's Try Again!</h2>
    <div class="card-body">
        <div class="warning-box" style="background-color: #fff3cd; border-left: 5px solid #ffc107;">
            ⚠️ It looks like you didn't select the correct answers on your first try. That's okay! Let's practice one more time to make sure you understand the interface and 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;
}

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