{{ 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>
            In these practice rounds you will answer the same three questions that appear
            in the main missions. This practice will not affect your payment — it is just
            to get familiar with the interface.
            {{ endblock }}
        </div>

        <!-- Design decision (conversation): estimate explanation stripped back to
             cover story terms only — no sensors, no site, no terrain. The two
             points that matter for the training scenarios are (1) estimates are
             imperfect signals of true sample quality, and (2) team members may
             see different values, motivating disagreement. -->
        <div class="estimate-box">
            {{ block estimate_explanation }}
            <h6>📡 About the Robot Estimates</h6>
            Each robot displays an estimated sample quality on its button in
            Question 1. The accuracy of these estimates depends on the current
            weather conditions on Venus — the robot that actually collects the
            best sample may not always be the one with the highest estimate.
            <br><br>
            In the main missions, each team member receives their own individual
            estimates. Your teammates may see different values from yours, which
            can be a natural source of disagreement within the team.
            {{ endblock }}
        </div>

        <div class="decision-box" style="margin-top: 20px;">
            {{ block scenario_body }}
            <h6>📋 Practice Scenario</h6>
            <!-- Design decision (conversation): scenario_text is code-generated,
                 not user input, so mark safe is appropriate here. -->
            {{ scenario_text|safe }}
            <br><br>
            <strong>For the questions below, you should:</strong>
            <ul style="margin-top: 10px;">
                <li>Personally prefer <strong>{{ correct_personal_display }}</strong> — Question 1</li>
                <li>Vote for <strong>{{ correct_team_display }}</strong> as part of the Research Team — Question 2</li>
                <li>Vote for the <strong>{{ correct_authority_display }}</strong> — Question 3</li>
            </ul>
            {{ endblock }}
        </div>
    </div>
</div>

<br>

<!-- ── Question 1: Personal Vote (with estimates) ───────────────────────────── -->
<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>

<!-- Design decision (conversation): button_labels use plain "Robot N" strings
     to avoid anchoring participants on named robots from the main experiment. -->
<div class="button-section">
    <div class="button-container-row">
        <button type="button" class="button button2 strategy-button personal-button" onclick="setPersonalVote(0)">
            {{ 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)">
            {{ 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)">
            {{ 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)">
            {{ 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>

<!-- ── Question 2: Team Vote (labels only, no estimates) ────────────────────── -->
<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>

<!-- Design decision (conversation): estimates deliberately omitted in Q2.
     Participants already saw estimates in Q1; Q2 tests team-voting judgment
     which may differ from personal preference. Button order is identical
     to Q1 for positional consistency. -->
<div class="button-section">
    <div class="button-container-row">
        <button type="button" class="button button2 strategy-button team-button" onclick="setStrategyVote(0)">
            {{ button_labels.0 }}
        </button>
        <button type="button" class="button button2 strategy-button team-button" onclick="setStrategyVote(1)">
            {{ button_labels.1 }}
        </button>
        <button type="button" class="button button2 strategy-button team-button" onclick="setStrategyVote(2)">
            {{ button_labels.2 }}
        </button>
        <button type="button" class="button button2 strategy-button team-button" onclick="setStrategyVote(3)">
            {{ button_labels.3 }}
        </button>
    </div>
    <input type="hidden" name="strategy_answer" id="id_strategy_answer" value="">
</div>

<br><br>

<!-- ── Question 3: Governance Vote ──────────────────────────────────────────── -->
<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>
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;
}
.estimate-box {
    margin: 15px 0;
    background-color: #fff8e1;
    padding: 15px;
    border-left: 5px solid #ff9800;
    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,
.estimate-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;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 15px 10px;
    line-height: 1.4;
}
.est-quality {
    font-size: 18px;
    font-weight: normal;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding-top: 5px;
    width: 100%;
    text-align: center;
}
.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;
    }
    .est-quality { font-size: 16px; }
}
</style>
{{ endblock }}