{{ extends 'otree/Page.html' }}

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

{{ block content }}

<div class="card bg-mid m-0">
    <h2 class="card-header">
        {{ block intro_header }}🎯 Ready to Practice!{{ endblock }}
    </h2>
    <div class="card-body">
        {{ block attempt_warning }}{{ endblock }}

        <div class="process-box">
            {{ block intro_body }}
            <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.
            {{ endblock }}
        </div>

        <div class="decision-box" style="margin-top: 20px;">
            {{ block scenario_body }}
            <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>
            {{ endblock }}
        </div>
    </div>
</div>

<br>

<!-- Personal Vote Section -->
<!-- Design decision: estimates shown here too for layout parity with Q2,
     but user may remove them from Q1 in a future revision. -->
<div class="card bg-mid m-0">
    <h2 class="card-header">
        {{ block personal_header }}Practice Question 1: What robot do you personally think would be best for this round?{{ endblock }}
    </h2>
</div>

<br>

<div class="button-section">
    <div class="button-container-row">
        <button type="button" class="button button2 strategy-button personal-button" onclick="setPersonalVote(0)">
            {{ C.BUTTON_LABELS.0 }}
            <span class="est-quality">Est. Quality: {{ button_estimates.0 }}</span>
        </button>
        <button type="button" class="button button2 strategy-button personal-button" onclick="setPersonalVote(1)">
            {{ C.BUTTON_LABELS.1 }}
            <span class="est-quality">Est. Quality: {{ button_estimates.1 }}</span>
        </button>
        <button type="button" class="button button2 strategy-button personal-button" onclick="setPersonalVote(2)">
            {{ C.BUTTON_LABELS.2 }}
            <span class="est-quality">Est. Quality: {{ button_estimates.2 }}</span>
        </button>
        <button type="button" class="button button2 strategy-button personal-button" onclick="setPersonalVote(3)">
            {{ C.BUTTON_LABELS.3 }}
            <span class="est-quality">Est. Quality: {{ button_estimates.3 }}</span>
        </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">
        {{ block strategy_header }}🤖 Practice Question 2: What robot would you choose as part of the Research Team for this round?{{ endblock }}
    </h2>
</div>

<br>

<div class="button-section">
    <div class="button-container-row">
        <button type="button" class="button button2 strategy-button team-button" onclick="setStrategyVote(0)">
            {{ C.BUTTON_LABELS.0 }}
            <span class="est-quality">Est. Quality: {{ button_estimates.0 }}</span>
        </button>
        <button type="button" class="button button2 strategy-button team-button" onclick="setStrategyVote(1)">
            {{ C.BUTTON_LABELS.1 }}
            <span class="est-quality">Est. Quality: {{ button_estimates.1 }}</span>
        </button>
        <button type="button" class="button button2 strategy-button team-button" onclick="setStrategyVote(2)">
            {{ C.BUTTON_LABELS.2 }}
            <span class="est-quality">Est. Quality: {{ button_estimates.2 }}</span>
        </button>
        <button type="button" class="button button2 strategy-button team-button" onclick="setStrategyVote(3)">
            {{ C.BUTTON_LABELS.3 }}
            <span class="est-quality">Est. Quality: {{ button_estimates.3 }}</span>
        </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">
        {{ block governance_header }}🧑‍🔬🎖️ Practice Question 3: Who should decide which type of robot to send for this round?{{ endblock }}
    </h2>
</div>

<br>

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

<br>

<script>
/*
 * Each setter writes to its hidden field, highlights the clicked button
 * within its own question group (scoped by class), then calls maybeSubmit.
 */
function setPersonalVote(value) {
    document.getElementById('id_personal_answer').value = value;
    document.querySelectorAll('.personal-button').forEach(b => b.classList.remove('selected'));
    event.target.closest('button').classList.add('selected');
    maybeSubmit();
}

function setStrategyVote(value) {
    document.getElementById('id_strategy_answer').value = value;
    document.querySelectorAll('.team-button').forEach(b => b.classList.remove('selected'));
    event.target.closest('button').classList.add('selected');
    maybeSubmit();
}

function setGovernanceVote(value) {
    document.getElementById('id_governance_answer').value = value;
    document.querySelectorAll('.governance-button').forEach(b => b.classList.remove('selected'));
    event.target.closest('button').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; }

.button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

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

.button-container-row .strategy-button {
    flex: 1;
    min-width: 180px;
    max-width: 220px;
    min-height: 60px;
    /* Use flex column so label and estimate stack vertically */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 15px 10px;
    line-height: 1.4;
}

/* Est. Quality line: smaller, muted, visually subordinate to the robot label */
.est-quality {
    font-size: 13px;
    opacity: 0.72;
    font-weight: normal;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding-top: 5px;
    width: 100%;
    text-align: center;
}

/* Keep the separator visible against the green selected state */
.button2.selected .est-quality {
    border-top-color: rgba(255, 255, 255, 0.4);
}

.button-container .button {
    min-width: 120px;
    flex: 1;
    max-width: 200px;
}

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