{{ extends 'global/Page.html' }}
{{ block title }}Priority Scores{{ endblock }}

{{ block content }}

<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-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;
}
</style>

<p>Each island ranks the {{ C.NUM_PLAYERS }} travelers in order of priority. Your priority score will be a number between 1 and {{ C.NUM_PLAYERS }}.</p>
<p><b>A <u>higher priority score</u> at an island gives you a <u>higher chance</u> of being assigned there when you "apply."</b></p>
<p>We explain how these "applications" work shortly.</p>

<div class="box">
    <div class="info-table-container">
        <table class="info-table">
            <tr>
                <th class="row-label">Island</th>
                <th data-island="A"><span class="island-badge" style="background-color:rgb(21,96,130);color:white">A</span></th>
                <th data-island="B"><span class="island-badge" style="background-color:rgb(233,113,50);color:white">B</span></th>
                <th data-island="C"><span class="island-badge" style="background-color:rgb(25,107,36);color:white">C</span></th>
                <th data-island="D"><span class="island-badge" style="background-color:rgb(15,158,213);color:white">D</span></th>
                <th data-island="E"><span class="island-badge" style="background-color:rgb(160,43,147);color:white">E</span></th>
                <th data-island="F"><span class="island-badge" style="background-color:rgb(209,209,209);color:#222">F</span></th>
            </tr>
            <tr style="opacity:0.3">
                <th class="row-label">Points</th>
                <td data-island="A">{{ payoff_a }}</td>
                <td data-island="B">{{ payoff_b }}</td>
                <td data-island="C">{{ payoff_c }}</td>
                <td data-island="D">{{ payoff_d }}</td>
                <td data-island="E">{{ payoff_e }}</td>
                <td data-island="F">{{ payoff_f }}</td>
            </tr>
            <tr>
                <th class="row-label">Priority Score</th>
                <td data-island="A"></td>
                <td data-island="B"></td>
                <td data-island="C"></td>
                <td data-island="D"></td>
                <td data-island="E"></td>
                <td data-island="F"></td>
            </tr>
        </table>
    </div>

    <!-- Points number line (grayed) -->
    <div style="opacity:0.3">
        <div class="number-line-section">
            <div class="number-line-label">Points</div>
            <svg width="600" height="50" class="number-line-svg" overflow="visible">
                <line x1="50" y1="17" x2="550" y2="17" stroke="#888" stroke-width="2"/>
                <line x1="50" y1="12" x2="50" y2="22" stroke="#888" stroke-width="2"/>
                <text x="40" y="22" text-anchor="end" font-size="16" fill="#444">{{ C.MIN_PTS }}</text>
                <text x="40" y="35" text-anchor="end" font-size="11" fill="#bbb">(Lowest)</text>
                <line x1="550" y1="12" x2="550" y2="22" stroke="#888" stroke-width="2"/>
                <text x="560" y="22" text-anchor="start" font-size="16" fill="#444">{{ C.MAX_PTS }}</text>
                <text x="560" y="35" text-anchor="start" font-size="11" fill="#bbb">(Highest)</text>
                <circle cx="{{ cx_e }}" cy="17" r="9" fill="rgb(160,43,147)" stroke="white" stroke-width="1"/>
                <text x="{{ cx_e }}" y="21" text-anchor="middle" font-size="13" font-weight="bold" fill="white">E</text>
                <circle cx="{{ cx_f }}" cy="17" r="9" fill="rgb(209,209,209)" stroke="white" stroke-width="1"/>
                <text x="{{ cx_f }}" y="21" text-anchor="middle" font-size="13" font-weight="bold" fill="#222">F</text>
                <circle cx="{{ cx_c }}" cy="17" r="9" fill="rgb(25,107,36)" stroke="white" stroke-width="1"/>
                <text x="{{ cx_c }}" y="21" text-anchor="middle" font-size="13" font-weight="bold" fill="white">C</text>
                <circle cx="{{ cx_d }}" cy="17" r="9" fill="rgb(15,158,213)" stroke="white" stroke-width="1"/>
                <text x="{{ cx_d }}" y="21" text-anchor="middle" font-size="13" font-weight="bold" fill="white">D</text>
                <circle cx="{{ cx_b }}" cy="17" r="9" fill="rgb(233,113,50)" stroke="white" stroke-width="1"/>
                <text x="{{ cx_b }}" y="21" text-anchor="middle" font-size="13" font-weight="bold" fill="white">B</text>
                <circle cx="{{ cx_a }}" cy="17" r="9" fill="rgb(21,96,130)" stroke="white" stroke-width="1"/>
                <text x="{{ cx_a }}" y="21" text-anchor="middle" font-size="13" font-weight="bold" fill="white">A</text>
            </svg>
        </div>
    </div>

    <!-- Priority Scores number line -->
    <div class="number-line-section">
        <div class="number-line-label">Priority Scores</div>
        <svg width="600" height="80" class="number-line-svg" overflow="visible">
            <line x1="50" y1="17" x2="550" y2="17" stroke="#1a2a4a" stroke-width="3"/>
            <line x1="50" y1="12" x2="50" y2="22" stroke="#888" stroke-width="2"/>
            <text x="40" y="22" text-anchor="end" font-size="16" fill="#444">1</text>
            <text x="40" y="35" text-anchor="end" font-size="11" fill="#bbb">(Lowest)</text>
            <line x1="550" y1="12" x2="550" y2="22" stroke="#888" stroke-width="2"/>
            <text x="560" y="22" text-anchor="start" font-size="16" fill="#444">{{ C.NUM_PLAYERS }}</text>
            <text x="560" y="35" text-anchor="start" font-size="11" fill="#bbb">(Highest)</text>
            <!-- Increasing Priority Score label and rightward arrow -->
            <defs>
                <marker id="arrowhead-ps" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
                    <polygon points="0 0, 8 3, 0 6" fill="#2a9d48"/>
                </marker>
            </defs>
            <line x1="150" y1="30" x2="490" y2="30" stroke="#2a9d48" stroke-width="1.5" marker-end="url(#arrowhead-ps)"/>
            <text x="300" y="55" text-anchor="middle" font-size="13" fill="#2a9d48">Increasing Priority Score</text>
        </svg>
    </div>
</div>

<p></p>
{{ next_button }}

{{ endblock }}