{{ block title }}
Feedback for Round (Page will proceed automatically)
{{ endblock }}

{{ block content }}

<form method="post" id="feedback-form">
    <input type="hidden" name="resurrect_me" id="id_resurrect_me" value="False">

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

<!-- Voting Outcome Card -->
<div class="card">
    <h2 class="card-header">Voting outcome</h2>
    <div class="card-body voting-outcome-body">
        <p class="summary-text">
            {{ outcome }} <strong class="score-highlight">{{ winner_strategy }}</strong>.
        </p>
    </div>
</div>

<br>

<!-- VOTES VISUALIZATION - ICON ARRAY (Single Row) -->
<div class="card">
    <h2 class="card-header">Votes for each type of Robot</h2>
    <div class="card-body">
        <div id="vote-icon-array-container" class="icon-array-container-row">
            <!-- Icons will be dynamically inserted here -->
        </div>
        <div class="legend">
            <span class="legend-item">
                <span class="vote-icon">🧑‍🔬</span> Research Team Votes
            </span>
            <span class="legend-item" id="leader-legend-item">
                <span class="leader-icon">🎖️</span> Mission Commander
            </span>
        </div>
    </div>
</div>

<br>

<!-- Performance Summary -->
<div class="simplified-summary">
    <p class="summary-text">
        The Sample Quality was worth <strong class="score-highlight">{{ class_avg }} points</strong>{{ if speed_penalty == 0 }} and there was no revoting so no revoting penalty{{ else }}, but there was a revoting penalty worth <strong class="score-highlight">{{ speed_penalty }} points</strong>{{ endif }}.
        <br>
        As a result, you earned <strong class="score-highlight">{{ total_earned }} points</strong> for this round.
    </p>
</div>

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

</form>

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

const voteData    = {{ prior_vote }};
const leaderChoice = "{{ leader_choice }}";

// The authoritative winning strategy integer, always correct regardless of
// how the winner was determined (majority, leader, or random fallback).
// Requires winner_strategy_value to be passed from vars_for_template.
const winnerStrategyValue = {{ winner_strategy_value }};

const buttonValues = [
    {{ participant.button_values.0 }},
    {{ participant.button_values.1 }},
    {{ participant.button_values.2 }},
    {{ participant.button_values.3 }}
];

const optionLabels = [
    "{{ participant.button_labels.0 }}",
    "{{ participant.button_labels.1 }}",
    "{{ participant.button_labels.2 }}",
    "{{ participant.button_labels.3 }}"
];

const hasLeaderChoice = leaderChoice !== "no_leader_choice" && leaderChoice !== "random";

function drawIconArray() {
    const container = document.getElementById('vote-icon-array-container');
    container.innerHTML = '';

    for (let position = 0; position < 4; position++) {
        const strategyValue = buttonValues[position];
        const label         = optionLabels[position];
        const count         = voteData[strategyValue] || 0;

        const isLeaderChoice = hasLeaderChoice && strategyValue.toString() === leaderChoice.toString();
        // Use winnerStrategyValue directly — handles majority, leader, and random cases correctly.
        const isWinner       = strategyValue === winnerStrategyValue;

        const optionDiv = document.createElement('div');
        optionDiv.className = 'option-icon-group';
        if (isWinner) optionDiv.classList.add('winner-option');

        const labelEl = document.createElement('div');
        labelEl.className   = 'icon-label';
        labelEl.textContent = label;
        optionDiv.appendChild(labelEl);

        const iconsContainer = document.createElement('div');
        iconsContainer.className = 'icons';

        for (let i = 0; i < count; i++) {
            const icon       = document.createElement('span');
            icon.className   = 'vote-icon';
            icon.textContent = '🧑‍🔬';
            iconsContainer.appendChild(icon);
        }

        if (isLeaderChoice) {
            const leaderIcon       = document.createElement('span');
            leaderIcon.className   = 'leader-icon';
            leaderIcon.textContent = '🎖️';
            leaderIcon.title       = 'Mission Commander Choice';
            iconsContainer.appendChild(leaderIcon);
        }

        optionDiv.appendChild(iconsContainer);
        container.appendChild(optionDiv);
    }

    const leaderLegendItem = document.getElementById('leader-legend-item');
    leaderLegendItem.style.display = hasLeaderChoice ? 'flex' : 'none';
}

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

window.addEventListener('load', drawIconArray);
</script>

{{ endblock }}

{{ block styles }}
<style>
.otree-timer { display: none; }

.warning_box { margin-bottom: 15px; width: 100%; }
.warning_content {
    background: linear-gradient(135deg, #ff6b6b, #ffd93d);
    border: 3px solid #ff4757; border-radius: 8px; padding: 15px;
    box-shadow: 0 4px 15px rgba(255,75,87,0.3); max-width: 600px; margin: 0 auto;
}
.warning_text { color: #2d3436; font-weight: bold; text-align: center; margin: 0 0 8px 0; font-size: 1.2rem; }
.warning_message { color: #2d3436; text-align: center; margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }

.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; z-index: 9999;
}
.inactive_text { color: #cc0000; font-weight: bold; text-align: center; margin-bottom: 20px; }
.inactive-button { font-size: 20px; padding: 15px 30px; margin-top: 10px; }

.button {
    background-color: #3182bd; border: none; color: white; padding: 10px 24px;
    text-align: center; text-decoration: none; display: inline-block;
    font-size: 18px; margin: 4px 2px; 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; }

.simplified-summary {
    background-color: #f8f9fa; border: 1px solid #dee2e6;
    border-radius: 6px; padding: 15px 20px; margin-bottom: 15px; text-align: center;
}
.summary-text { font-size: 1.05rem; line-height: 1.5; color: #333; margin: 0; }
.voting-outcome-body { text-align: center; }
.score-highlight {
    font-size: 1.15rem; font-weight: 600; color: #007bff;
    background-color: #e7f3ff; padding: 2px 6px;
    border-radius: 3px; border: 1px solid #007bff;
}

.card { border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 12px; }
.card-header {
    background-color: #4a90e2; color: white; padding: 0.6rem 1rem; margin: 0;
    font-size: 1.1rem; font-weight: 600; border-bottom: 1px solid #dee2e6; text-align: center;
}
.card-body { padding: 1rem; background-color: white; }

.icon-array-container-row {
    display: flex; justify-content: center; gap: 15px;
    padding: 10px; max-width: 900px; margin: 0 auto; flex-wrap: wrap;
}
.option-icon-group {
    background-color: #f8f9fa; border: 2px solid #e9ecef; border-radius: 8px;
    padding: 12px; text-align: center; min-height: 120px; display: flex;
    flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    flex: 1; min-width: 180px; max-width: 200px;
}
.winner-option {
    background-color: #fff3e0 !important; border: 3px solid #ff8c00 !important;
    box-shadow: 0 0 15px rgba(255,140,0,0.3) !important;
}
.winner-option .icon-label { color: #e65100; font-weight: bolder; border-bottom-color: #ff8c00; }
.winner-option .icons { border-color: #ff8c00; background-color: #fff8f0; }

.icon-label { font-weight: bold; margin-bottom: 10px; font-size: 14px; color: #333; border-bottom: 2px solid #e9ecef; padding-bottom: 6px; }
.icons {
    display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;
    gap: 5px; flex-grow: 1; min-height: 65px; background-color: #ffffff;
    border: 2px dashed #dee2e6; border-radius: 6px; padding: 10px; margin-top: 3px;
}
.vote-icon, .leader-icon { font-size: 24px; line-height: 1.2; }

.legend { display: flex; justify-content: center; gap: 15px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #ddd; }
.legend-item { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #666; }

@media (max-width: 768px) {
    .icon-array-container-row { flex-direction: column; align-items: center; gap: 10px; padding: 8px; }
    .option-icon-group { min-height: 100px; padding: 10px; max-width: 300px; width: 100%; }
    .icon-label { font-size: 13px; }
    .vote-icon, .leader-icon { font-size: 22px; }
    .summary-text { font-size: 0.95rem; }
    .score-highlight { font-size: 1rem; }
}
@media (max-width: 480px) {
    .icon-array-container-row { padding: 8px; gap: 8px; }
    .option-icon-group { min-height: 90px; padding: 10px; }
    .icons { padding: 8px; gap: 4px; }
    .summary-text { font-size: 0.9rem; }
    .score-highlight { font-size: 0.95rem; }
}
</style>
{{ endblock }}