{{ block content }}
<div style="overflow: hidden">
    <button id="Button" style="float: right; margin-right: 10px" class="popup-button" type="button">
        <img src="{{ static 'images/rrr.png' }}">
    </button><h2>Penalty Decision.</h2><br>

<p> In addition to the audit policy, you will now make a second decision.
    If a player is audited and misreporting is detected, the player will receive a <b>penalty</b>.<br><br>
    The penalty will <b>reduce the player's points.</b>
    The deducted points will be added to the Common Fund and redistributed among the players below the threshold.<br><br>

    You are now asked to decide <b>how many points should be deducted as a penalty when misreporting is detected</b>.
    You can click the Recap button in the top-right corner of the page and review
    the players' study and the sample diagram to have a reference regarding the points.
    <br><br>
    Please use the slider below to select the <b>penalty amount</b>.<br>
</p>

<div style="width:480px; position:relative; margin-top:40px;">

    <!-- floating value -->
    <div id="sliderValue"
         style="
         position:absolute;
         top:-28px;
         left:50%;
         transform:translateX(-50%);
         font-weight:bold;
         background:#f0f0f0;
         padding:3px 6px;
         border-radius:6px;">
         10 points
    </div>

    <!-- slider -->
    <input type="range"
           id="penaltySlider"
           name="penalty"
           min="10"
           max="100"
           value="10"
           step="1"
           style="width:100%;"
           oninput="updateSlider(this)">

    <!-- scale marks -->
    <div style="
        display:flex;
        justify-content:space-between;
        font-size:13px;
        margin-top:8px;
        padding:0 4px;">
        <span>10</span>
        <span>20</span>
        <span>30</span>
        <span>40</span>
        <span>50</span>
        <span>60</span>
        <span>70</span>
        <span>80</span>
        <span>90</span>
        <span>100</span>
    </div>

</div>

<script>
function updateSlider(slider) {

    const value = slider.value;
    const min = slider.min;
    const max = slider.max;

    const percent = (value - min) / (max - min);

    const sliderWidth = slider.offsetWidth;
    const label = document.getElementById("sliderValue");

    const labelWidth = label.offsetWidth;

    // Base offset relative to slider
    let offset = percent * sliderWidth;

    // Make sure the label stays fully inside the slider
    if (offset < labelWidth / 2) offset = labelWidth / 2;
    if (offset > sliderWidth - labelWidth / 2) offset = sliderWidth - labelWidth / 2;

    // Apply position
    label.style.left = offset + "px";

    // Update value
    label.textContent = value + " points";
}

// Initialize on page load
window.onload = function() {
    updateSlider(document.getElementById("penaltySlider"));
}
</script>

<br>
<button class="otree-btn-next btn btn-primary">Next</button>

<style>
    .popup-button {
            float: right;
            margin-right: 10px;
            background: transparent;
            border: none;
            cursor: pointer;
        }
    .popup-button img {
            width: 70px;
            height: 55px;
        }
    .popup-content {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
    .popup-content .content {
            background-color: white;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888888;
            width: 70%;
            font-weight: normal;
            position: relative;
            max-height: 90%;
            overflow-y: auto;
        }
    .show {
        display: block;
    }

    .sliderValue {
    white-space: nowrap;    /* prevent wrapping */
    padding: 3px 6px;       /* adjust padding if needed */
    font-size: 14px;
    }
</style>
<div id="Popup" class="popup-content">
    <div class="content">
    <p>
        Players were assigned to three-player groups and performed a task to earn points <b>(1 point = £0.01)</b>.
    In each group, one randomly selected player could earn more points than the other two.
</p>
<p> After the task, players <b>reported their points</b>. Those who fell <b>below a certain threshold</b> were
    eligible to receive additional points from a <b>Common Fund</b> for their group.
</p>
<p> <b>Some players who were above the threshold reported having less</b> to appear eligible
    for additional points, which reduced the shares received by the other group players.
    <br>
    Below you see an example, where players below the threshold are shown in <span style="color: limegreen; font-weight: bold">green</span>.<br>
</p>
<p> The <b>panel on the left</b> shows what happens if <b>all three players report their points truthfully</b>.
    The <b>panel on the right</b> shows what happens if <b>the blue player falsely reports their points
        below the threshold.</b>
</p>
<div style="text-align: center">
    <img src="{{ static 'images/comp_points.png' }}" style="width:80%; max-width:800px; height:auto" alt="Image"/>
</div>


        <button id="closePopup" type="button">Close</button>

    </div>
</div>
<script>
    const button = document.getElementById("Button");
    const popup = document.getElementById("Popup");
    const closePopup = document.getElementById("closePopup");

        button.addEventListener("click", function () {
            popup.classList.add("show");
        });
        closePopup.addEventListener("click", function () {
            popup.classList.remove("show");
        });
        window.addEventListener("click", function (event) {
            if (event.target == Popup) {
                popup.classList.remove("show");
            }
        });
</script>

{{ endblock }}