{{ extends 'global/IntroPage.html' }}
{{ block title }}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; }
.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; }
.info-table th.row-label { min-width: 150px; }
.info-table th[data-island],
.info-table td[data-island] { min-width: 62px; }
</style>

<div class="pf-intro-text">
<p>Your payoff depends on which island you're sent to.</p>
<p>You will see a list of points for each island (<b>{{ pts_per_dollar }} points = $1.00</b>). An example is shown below.</p>
<p>Below the list, the points for each island will also be displayed graphically.</p>
</div>

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

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

{{ endblock }}