{{ extends 'global/Page.html' }}
{{ block title }}Quiz – Interface{{ 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-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;
    text-align: center;
    min-height: 380px;
}
hr.section-divider { border: none; border-top: 4px solid #999; margin: 20px 0; }
.indented { margin-left: 2.5em; }
/* Two-column layout matching main_nocap/Ranks.html */
.row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px;
}
.column { float: left; padding: 10px; }
.column-left  { width: 70%; min-width: 500px; align-items: center; }
.column-right {
    width: 30%;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.q-box {
    border: 2px solid #aaa;
    border-radius: 8px;
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}
.q-box p { margin: 0 0 12px 0; }
.q-box p:last-child { margin-bottom: 0; }
select.quiz-select {
    display: block;
    width: 100%;
    font-size: 15px;
    padding: 4px 8px;
    margin-top: 4px;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-sizing: border-box;
}
/* Q5 layout */
.q5-row {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.q5-checks { flex: 1; min-width: 220px; }
.q5-checks ul { list-style: disc; padding-left: 2em; margin: 4px 0; }
.q5-checks li { margin: 4px 0; }
/* Static ranking widget */
.rank-box {
    border: 2px solid #aaa;
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
    min-width: 180px;
    max-width: 220px;
}
.dnd-pool {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    min-height: 54px; padding: 6px;
    border: 2px dashed #aaa; border-radius: 8px;
    margin: 0 auto 12px auto; background: #f9f9f9;
    max-width: 160px;
}
.island-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 15px;
    user-select: none; margin: 3px; flex-shrink: 0;
    cursor: default;
}
.rank-table { border-collapse: collapse; margin: 0 auto; }
.rank-table th, .rank-table td { border: 1px solid #ddd; padding: 4px 8px; text-align: center; }
.rank-table th { font-weight: bold; }
.slot-drop-zone {
    width: 42px; height: 42px; border-radius: 50%;
    border: 2px solid #888; display: flex;
    align-items: center; justify-content: center;
    margin: 0 auto; background: transparent;
}

.hint-toggle-btn {
    display: block;
    margin: 24px auto 0 auto;
    padding: 10px 24px;
    background-color: #e0e0e0;
    color: #333;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
}
.hint-toggle-btn:hover {
    background-color: #d0d0d0;
}

.hint-box {
    display: none;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 16px 24px;
    margin: 16px auto;
    max-width: 760px;
}
</style>

<p>Consider the following points and priorities.</p>

<div class="row">
    <div class="column column-left">
        <div class="box">
            {{ pf_graph }}
            <p>Each island has room for <b>{{ C.NUM_QUOTA }}</b> travelers. There are <b>{{ C.NUM_PLAYERS }}</b> travelers.</p>
        </div>
    </div>
    <div class="column column-right">
        <div class="q-box">
            <p>1) What would your payoff be if you were sent to
               <b><span style="color:rgb(15,158,213)">Island D</span></b>?
               <select name="quiz_q1" class="quiz-select">
                   <option value="" disabled selected>Select…</option>
                   <option value="100 points">100 points</option>
                   <option value="180 points">180 points</option>
                   <option value="220 points">220 points</option>
                   <option value="300 points">300 points</option>
               </select>
            </p>
            <p>2) What would your payoff be if you were sent to
               <b><span style="color:rgb(21,96,130)">Island A</span></b>?
               <select name="quiz_q2" class="quiz-select">
                   <option value="" disabled selected>Select…</option>
                   <option value="100 points">100 points</option>
                   <option value="180 points">180 points</option>
                   <option value="220 points">220 points</option>
                   <option value="300 points">300 points</option>
               </select>
            </p>
            <p>3) What is your priority score at
               <b><span style="color:rgb(160,43,147)">Island E</span></b>?
               <select name="quiz_q3" class="quiz-select">
                   <option value="" disabled selected>Select…</option>
                   <option value="1">1</option>
                   <option value="25">25</option>
                   <option value="124">124</option>
                   <option value="150">150</option>
               </select>
            </p>
        </div>
    </div>
</div>

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

{{ endblock }}