{{ extends 'global/IntroPage.html' }}
{{ block title }}Reminder: Payoffs{{ endblock }}

{{ block page_body }}

<style>
.info-table-container { overflow-x: auto; margin-bottom: 16px; }
.info-table { border-collapse: collapse; margin: 0 auto; }
.info-table th, .info-table td { border: 1px solid #ddd; padding: 6px 14px; text-align: center; }
.info-table th.row-label { text-align: left; font-weight: bold; background-color: #f5f5f5; min-width: 150px; }
.info-table th[data-island], .info-table td[data-island] { min-width: 62px; }
.island-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-weight: bold; font-size: 13px;
}
.number-line-section { margin: 6px auto; text-align: center; }
.number-line-section:last-child { margin-bottom: 0; }
.number-line-label { font-weight: bold; margin-bottom: 2px; font-size: 14px; }
.number-line-svg { display: block; margin: 0 auto; max-width: 100%; }
.box {
    border: 2px solid #aaa;
    border-radius: 8px;
    padding: 16px;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    min-height: 380px;
}
.pf-intro-text { min-height: 6.5em; }
.indented { margin-left: 2.5em; }

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 16px;
    overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: #fff;
    border-radius: 8px;
    padding: 28px 32px;
    max-width: 680px;
    width: 100%;
    position: relative;
}
.modal-title { font-size: 20px; font-weight: bold; margin-bottom: 16px; }
.modal-close {
    position: absolute;
    top: 12px; right: 16px;
    background: none; border: none;
    font-size: 22px; cursor: pointer;
    color: #666; line-height: 1;
}
.modal-close:hover { color: #000; }
.detail-btn {
    display: block;
    margin: 8px auto 16px auto;
    padding: 10px 22px;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #bbb;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
}
.detail-btn:hover { background-color: #e0e0e0; }
</style>

<div class="pf-intro-text">
<p>Your payoff depends on which island you get sent to.</p>
<p>You will see a list with points for each island (<b>{{ pts_per_dollar }} points = $1.00</b>).</p>
<p>If you are not sent to any island, you will receive <b>no points</b>.</p>
</div>

<p>Click below to review how payoffs are drawn.</p>
<button type="button" class="detail-btn" onclick="openModal('modal-payoffs', this)">How Payoffs Are Drawn</button>

<div class="box">
    {{ pf_graph }}
</div>

<!-- Modal: How Payoffs Are Drawn -->
<div class="modal-overlay" id="modal-payoffs">
    <div class="modal-box">
        <button type="button" class="modal-close" onclick="closeModal('modal-payoffs')" aria-label="Close">&times;</button>
        <div class="modal-title">How Payoffs Are Drawn</div>
        <p>Islands <span style="color:rgb(21, 96, 130); font-weight:bold">A</span> and <span style="color:rgb(233, 113, 50); font-weight:bold">B</span> are <b>top islands</b>, and their points will be randomly drawn between <b>{{ C.MID_PTS }} and {{ C.MAX_PTS }}</b>:</p>
        <p class="indented">One top island, chosen at random, is worth {{ C.MAX_PTS }} points.</p>
        <p class="indented">The points for the other top island will be randomly chosen from this list:</p>
        <p style="text-align: center;">{{ top_step_list }}</p>
        <p>The other islands are <b>regular islands</b>, and their points will be randomly drawn between <b>{{ C.MIN_PTS }} and {{ reg_max }}</b>:</p>
        <p class="indented">One regular island, chosen at random, is worth {{ C.MIN_PTS }} points.</p>
        <p class="indented">The points for the other three islands are randomly chosen from this list:</p>
        <p style="text-align: center;">{{ reg_step_list }}</p>
        <p class="indented">All islands are worth a different number of points.</p>
        <p></p>
        <p><b>Other travelers' points are assigned in the same way: randomly, like yours.</b></p>
        <p>This means <b>their points may differ from yours.</b></p>
        <p>You will <b>not observe</b> others' points.</p>
        <p>The other travelers will also receive points according to the island they are sent to.</p>
        <p><u>Note that <b>all travelers</b> have higher payoffs from Islands <span style="color:rgb(21, 96, 130); font-weight:bold">A</span> and <span style="color:rgb(233, 113, 50); font-weight:bold">B</span> than the other islands.</u></p>
    </div>
</div>

<p></p>
<div class="otree-nav-buttons">{{ back_button }} {{ next_button }}</div>

<script>
var _modalOpener = null;
function openModal(id, triggerEl) {
    _modalOpener = triggerEl || null;
    var overlay = document.getElementById(id);
    overlay.classList.add('open');
    document.body.style.overflow = 'hidden';
    var closeBtn = overlay.querySelector('.modal-close');
    if (closeBtn) closeBtn.focus();
}
function closeModal(id) {
    document.getElementById(id).classList.remove('open');
    document.body.style.overflow = '';
    if (_modalOpener) { _modalOpener.focus(); _modalOpener = null; }
}
document.querySelectorAll('.modal-overlay').forEach(function(overlay) {
    overlay.addEventListener('click', function(e) {
        if (e.target === overlay) closeModal(overlay.id);
    });
});
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('.modal-overlay.open').forEach(function(m) {
            closeModal(m.id);
        });
    }
});
</script>

{{ endblock }}