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

{% block title %}
    <div style="display: flex; justify-content: center;">
    <span>Expected levels of Disapproval</span>
</div>
{% endblock %}

{% block content %}
<style>
.scale-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scale-row {
    display: flex;
    align-items: center;
}

.scale-labels, .scale-inputs {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.scale-label {
    width: 59.5px;
    text-align: center;
    font-weight: bold;
    display: flex;
    justify-content: center;  /* center horizontally */
    align-items: flex-start;  /* anchor to top */
    padding-top: 0;           /* remove old padding */
}

.scale-input {
    width: 60px;
    justify-content: center;
}

.scale-input input {
    width: 90%;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
}

.scale-labels-container {
    margin-right: 10px;
}
</style>

<br>
<div>
        <p>
           Recall that you have an endowment of {% if Ana_Endowment == 30 %} 30 {% elif Ana_Endowment == 15 %} 15 {% endif %} ECUs
            (<a href="#" onclick="document.getElementById('endowmentPopup').style.display='block'; return false;">Click here to see how it was assigned</a>).
        </p>
    <!-- Popup -->
    <div id="endowmentPopup" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;">
        <div style="position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:30px; border-radius:8px; z-index:1001; width:400px;">
        <p>
            The high endowment (30 ECUs) above was assigned to the one who
            {% if Ana_RankingType == 1 %}
             grabbed the <u>least</u> number of tokens in the Token Grabbing Task among your three group members.
            {% elif Ana_RankingType == 2 %}
             grabbed the <u>most</u> number of tokens in the Token Grabbing Task among your three group members.
            {% elif Ana_RankingType == 3 %}
             had the <u>most</u> heads flipped in the Coin Flipping Task among your three group members.
            {% elif Ana_RankingType == 4 %}
             had the <u>least</u> heads flipped in the Coin Flipping Task among your three group members.
    {% endif %}

        </p>
   <div style="text-align: right;">
        <button type="button" class="btn btn-primary" onclick="document.getElementById('endowmentPopup').style.display='none'">Close</button>
       </div>
        </div>
    </div>
        <p>
            For each possible contribution level below, please indicate the <b>total disapproval points(0-20)</b> you <u>expect</u> to receive from the other two players combined.
        </p>
    <p>
     <i>Remember: Each player can assign a minimum of 0 and a maximum of 10 disapproval points. So the total disapproval points you can receive ranges from 0 to 20.</i>
    </p>
</div>
<!-- High Endowment Scenario (30 ECUs) -->
{% if Ana_Endowment == 30 %}
<div>
        <div class="scale-container">
            <div class="scale-labels">
                <div class="scale-label">0-3</div>
                <div class="scale-label">4-6</div>
                <div class="scale-label">7-9</div>
                <div class="scale-label">10-12</div>
                <div class="scale-label">13-15</div>
                <div class="scale-label">16-18</div>
                <div class="scale-label">19-21</div>
                <div class="scale-label">22-24</div>
                <div class="scale-label">25-27</div>
                <div class="scale-label">28-30</div>
            </div>
            <div class="scale-row" style="margin-top: -20px;">
                <div class="scale-inputs">
                    <div class="scale-input">{% formfield player.Ana_belief_high_3 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_high_6 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_high_9 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_high_12 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_high_15 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_high_18 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_high_21 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_high_24 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_high_27 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_high_30 %}</div>
                </div>
            </div>
        </div>
</div>

<!-- Low Endowment Scenario (15 ECUs) -->
{% elif Ana_Endowment == 15 %}
<div>
        <div class="scale-container">
            <div class="scale-labels">
                <div class="scale-label">0-3</div>
                <div class="scale-label">4-6</div>
                <div class="scale-label">7-9</div>
                <div class="scale-label">10-12</div>
                <div class="scale-label">13-15</div>
            </div>
            <div class="scale-row" style="margin-top: -20px;">
                <div class="scale-inputs">
                    <div class="scale-input">{% formfield player.Ana_belief_low_3 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_low_6 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_low_9 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_low_12 %}</div>
                    <div class="scale-input">{% formfield player.Ana_belief_low_15 %}</div>
                </div>
            </div>
        </div>
</div>
{% endif %}
<div style = " display: flex; justify-content: right; align-items: right;  ">
        <button class="btn btn-primary">Submit</button>
    </div>
{% endblock %}