{{ block title }}{{ endblock }}

{{ block content }}
<link rel="stylesheet" href="{{ static 'css/css.css' }}">
<link rel="stylesheet" href="{{ static 'css/modal.css' }}">
<script type="text/javascript" src="{{ static 'js/Script_modal.js' }}"></script>

<style>
    .pgg2-display {
        text-align: center;
        font-size: 2em;
        font-weight: bold;
        color: var(--primary, #4CAF50);
        margin: 16px 0 4px;
    }
    .pgg2-sub {
        text-align: center;
        font-size: 0.9em;
        color: #666;
        margin-bottom: 12px;
    }
    .pgg2-slider {
        -webkit-appearance: none; appearance: none;
        width: 100%; height: 10px; border-radius: 5px;
        background: #d3d3d3; outline: none; cursor: pointer;
    }
    .pgg2-slider::-webkit-slider-thumb {
        -webkit-appearance: none; width: 26px; height: 26px;
        border-radius: 50%; background: var(--primary, #4CAF50);
        cursor: pointer; border: 2px solid #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,.25);
    }
    .pgg2-labels {
        display: flex; justify-content: space-between;
        font-size: .82em; color: #777; margin-top: 4px;
    }
</style>

<div class="content-box box-neutral">
    <h2 class="section-title">Game 5: Your Decision</h2>
    <hr class="section-divider">

    <!-- <p style="text-align:center; color:#555;">
        You have <strong>{{ pgg2_commons }} ECs</strong>. You are matched with 2 anonymous participants.
        Decide how much to invest in the common pool (any amount from 0 to {{ pgg2_commons }} ECs).
    </p> -->

    <!-- Hidden oTree form field -->
    <div style="display:none">
        {% for field in form %}
            {{ formfield field.name }}
        {% endfor %}
    </div>

    <div class="section-box box-calm" style="margin-top:24px;">
        <div class="section-header">
            <div class="icon">&#128188;</div>
            <h3>Your Investment Decision</h3>
        </div>

        <div class="pgg2-display" id="pgg2-display">50 ECs</div>
        <div class="pgg2-sub" id="pgg2-sub">
            You invest: 50 ECs &nbsp;|&nbsp; You keep: 50 ECs
        </div>

        <input type="range" id="pgg2-slider" class="pgg2-slider"
               min="0" max="{{ pgg2_commons }}" step="1" value="50">
        <div class="pgg2-labels">
            <span>Invest 0 (keep all)</span>
            <span>Invest {{ pgg2_commons }} (invest all)</span>
        </div>

        <p style="margin-top:14px; font-size:0.88em; color:#666;">
            Your earnings = ECs kept + (total pool &times; 1.5 &divide; 3)
        </p>
    </div>

    <div class="buttons-container" style="margin-top:30px;">
        <div class="Instructions">
            <a onclick="open_modal(1)" class="btn btn-info">&#128216; Game Instructions</a>
        </div>
        <button id="NextButton" class="btn btn-primary">Confirm Investment &rarr;</button>
    </div>
</div>

<div id="myModal1" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2><span class="icon">&#128216;</span> Game Instructions</h2>
            <span class="close" onclick="span_click(1)">&times;</span>
        </div>
        <div class="modal-body">
            {{ include C.Instructions_pgg2_path }}
        </div>
    </div>
</div>

<script>
(function () {
    var pgg2Max = {{ pgg2_commons }};
    var slider  = document.getElementById('pgg2-slider');
    var display = document.getElementById('pgg2-display');
    var sub     = document.getElementById('pgg2-sub');
    var hidden  = document.querySelector('input[name="pgg2_contribution"]');

    function sync(val) {
        var invest = parseInt(val);
        var keep   = pgg2Max - invest;
        display.textContent = invest + ' ECs';
        sub.textContent = 'You invest: ' + invest + ' ECs\u00a0|\u00a0You keep: ' + keep + ' ECs';
        if (hidden) hidden.value = invest;
    }

    sync(slider.value);
    slider.addEventListener('input', function () { sync(this.value); });
})();
</script>

{{ endblock }}