{{ block title }}
{{ if player.round_number == 1 }}
Welcome to the first round of the experiment!
{{ else }}
What kind of robot should be sent for the next sample! 
{{ endif }}
{{ endblock }}

{{ block content }}

{{ if player.participant.admonish == 1 }}
<div class="warning_box">
<div class="warning_content">
<h2 class="warning_text">⚠️ Warning</h2>
<p class="warning_message">{{ admonish_msg }}</p>
</div>
</div>
{{ endif }}

<!-- PROGRESS BAR -->
<div class="card bg-light m-0">
    <div class="card">
        <div class="card-body">
            <h5 style="text-align: center; margin-bottom: 10px;">Experiment Progress</h5>
            <div class="progress-container">
                <div class="progress-bar" id="progressBar"></div>
            </div>
            <div class="progress-labels">
                <span>First sample</span>
                <span>Last sample</span>
            </div>
        </div>
    </div>
</div>

<br>

<form method="post">

    <!-- Question 1: Personal Choice -->
    <!-- Design decision: labels now read from participant.button_labels (shuffled per-participant)
         instead of vars_for_template button_1…button_4 (which were always C.BUTTON_LABELS[0…3]).
         onclick values and score_N were already correct — onclick uses participant.button_values,
         and score_N is computed in Python against btn_vals[N-1], i.e. the same shuffled order.
         This mirrors the V1.html pattern exactly. No Python changes required. -->
    <div class="question-section">
        <h4>{{C.QUESTIONS_TRIPLE.0}}</h4>
        <div class="button-section">
            <div class="button-container-row">
                <button type="button" class="button button2 strategy-button personal-button" onclick="setPersonalVote({{ participant.button_values.0 }})">
                    {{ participant.button_labels.0 }}
                    <span class="est-quality">Est. Quality: {{ score_1 }}</span>
                </button>
                <button type="button" class="button button2 strategy-button personal-button" onclick="setPersonalVote({{ participant.button_values.1 }})">
                    {{ participant.button_labels.1 }}
                    <span class="est-quality">Est. Quality: {{ score_2 }}</span>
                </button>
                <button type="button" class="button button2 strategy-button personal-button" onclick="setPersonalVote({{ participant.button_values.2 }})">
                    {{ participant.button_labels.2 }}
                    <span class="est-quality">Est. Quality: {{ score_3 }}</span>
                </button>
                <button type="button" class="button button2 strategy-button personal-button" onclick="setPersonalVote({{ participant.button_values.3 }})">
                    {{ participant.button_labels.3 }}
                    <span class="est-quality">Est. Quality: {{ score_4 }}</span>
                </button>
            </div>
        </div>
        <input type="hidden" name="strategy_vote_private" id="id_strategy_vote_private" value="">
    </div>

    <br><br>

    <!-- Question 2: Team Choice -->
    <div class="question-section">
        <h4>{{C.QUESTIONS_TRIPLE.1}}</h4>
        <div class="button-section">
            <div class="button-container-row">
                <button type="button" class="button button2 strategy-button team-button" onclick="setStrategyVote({{ participant.button_values.0 }})">
                    {{ participant.button_labels.0 }}
                </button>
                <button type="button" class="button button2 strategy-button team-button" onclick="setStrategyVote({{ participant.button_values.1 }})">
                    {{ participant.button_labels.1 }}
                </button>
                <button type="button" class="button button2 strategy-button team-button" onclick="setStrategyVote({{ participant.button_values.2 }})">
                    {{ participant.button_labels.2 }}
                </button>
                <button type="button" class="button button2 strategy-button team-button" onclick="setStrategyVote({{ participant.button_values.3 }})">
                    {{ participant.button_labels.3 }}
                </button>
            </div>
        </div>
        <input type="hidden" name="strategy_vote_0" id="id_strategy_vote_0" value="">
    </div>

    <br><br>

    <!-- Question 3: Governance -->
    <!-- Design decision: governance buttons use button-container (not button-container-row)
         to stay centred and compact — there are only two options and no quality score to show. -->
    <div class="question-section">
        <h4>{{C.QUESTIONS_TRIPLE.2}}</h4>
        <div class="button-section">
            <div class="button-container">
                <button type="button" class="button button2 governance-button" onclick="setGovernanceVote({{ participant.button_values_who.0 }})">{{ participant.button_labels_who.0  }}</button>
                <button type="button" class="button button2 governance-button" onclick="setGovernanceVote({{ participant.button_values_who.1 }})">{{ participant.button_labels_who.1 }}</button>
            </div>
        </div>
        <input type="hidden" name="representative_democracy" id="id_representative_democracy" value="">
    </div>

    <!-- Hidden field for reactivation -->
    <input type="hidden" name="resurrect_me" id="id_resurrect_me" value="">
</form>

<br>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('id_resurrect_me').value = 'False';

    const roundNum = {{ round_num }};
    const lastRound = {{ last_round }};
    const progress = (roundNum / lastRound) * 100;
    document.getElementById('progressBar').style.width = progress + '%';
});

/*
 * Each setter writes to its hidden field, highlights the clicked button
 * within its own question group (scoped by class), then calls maybeSubmit.
 * Pattern mirrors Voting_base.html for consistency.
 */
function setPersonalVote(value) {
    document.getElementById('id_strategy_vote_private').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_vote_0').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_representative_democracy').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_strategy_vote_private').value;
    const strategy   = document.getElementById('id_strategy_vote_0').value;
    const governance = document.getElementById('id_representative_democracy').value;
    if (personal !== '' && strategy !== '' && governance !== '') {
        document.querySelector('form').submit();
    }
}

function setResurrectMe() {
    document.getElementById('id_resurrect_me').value = 'True';
    const resurrectButton = document.getElementById('resurrect-button');
    resurrectButton.textContent = 'Reactivation Recorded';
    resurrectButton.style.backgroundColor = '#4CAF50';
    resurrectButton.style.borderColor = '#4CAF50';
    resurrectButton.disabled = true;
}
</script>

{{ if player.participant.active == 0 }}
<div class="inactive_box">
    <h1 class="inactive_text"> You have been marked inactive. <br> To rejoin the experiment on the next page, press this button. </h1>
    <button type="button" id="resurrect-button" class="button button2 inactive-button" onclick="setResurrectMe()"> Active</button>
</div>
{{ endif }}

{{ endblock }}

{{ block styles }}
<style>
.warning_box {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.warning_content { text-align: center; }
.warning_text    { color: #856404; margin-bottom: 10px; }
.warning_message { color: #856404; margin: 0; }

.inactive_box {
    height: 100%;
    width: 100%;
    background-color: #d3d3d3;
    opacity: 90%;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.inactive_text {
    color: #cc0000;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.inactive-button {
    font-size: 20px;
    padding: 15px 30px;
    margin-top: 10px;
}

.question-section {
    text-align: center;
    margin-bottom: 20px;
}

.question-section h4 {
    margin-bottom: 15px;
    color: #333;
}

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

/* Row container for the four robot buttons */
.button-container-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 15px auto 0;
    padding: 0 20px;
    max-width: 1000px;
}

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

.button {
    background-color: #3182bd;
    border: none;
    color: white;
    padding: 10px 24px;
    text-align: center;
    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;
}

/* Robot buttons: flex-column so label and quality score stack vertically */
.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 line: same size as button label text for easy reading */
.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;
}

/* Keep separator visible against 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;
}

/* Progress bar */
.progress-container {
    width: 100%;
    height: 30px;
    background-color: #e9ecef;
    border-radius: 15px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #008CBA;
    width: 0%;
    transition: width 0.5s ease;
    border-radius: 15px;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 14px;
    color: #666;
}

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