{% extends "global/Page.html" %}
{% load otree %}

{% block title %}Your Rank Estimate{% endblock %}

{% block content %}
<div class="card bg-light m-3">
    <div class="card-body">
        <p>Based on your performance in the {% if is_control %}guessing{% else %}memory{% endif %} task, what do you think your rank is among the 250 participants?</p>
        <p>Please select <strong>one</strong> option below.</p>

        <div style="display:flex; flex-direction:column; gap:10px; margin-top:20px;">
            {% for rank, low, high in ranks %}
            <label style="cursor:pointer; border:2px solid #ccc; border-radius:8px; padding:12px 20px;
                          display:flex; align-items:center; gap:15px; background:#fff;"
                   class="rank-option">
                <input type="radio" name="rank_estimate" value="{{ rank }}"
                       style="width:18px; height:18px;">
                <span>
                    {% if low == 0 %}
                        <strong>Rank {{ rank }}</strong> &mdash; top {{ high }}% (0% &lt; rank &le; {{ high }}%)
                    {% else %}
                        <strong>Rank {{ rank }}</strong> &mdash; rank between {{ low }}% and {{ high }}% ({{ low }}% &lt; rank &le; {{ high }}%)
                    {% endif %}
                </span>
            </label>
            {% endfor %}
        </div>

        {{ formfield_errors 'rank_estimate' }}
    </div>
</div>

<div style="margin-top:20px; text-align:center;">
    {% next_button %}
</div>

<script>
    /* Highlight selected option */
    document.querySelectorAll('input[name="rank_estimate"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            document.querySelectorAll('.rank-option').forEach(function(label) {
                label.style.border = '2px solid #ccc';
                label.style.background = '#fff';
            });
            this.parentElement.style.border = '2px solid #2c3e50';
            this.parentElement.style.background = '#eaf0fb';
        });
    });
</script>
{% endblock %}