{{ extends 'global/Page.html' }}
{{ block title }}Practice Round: Results{{ endblock }}

{{ block content }}

<style>
.row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 10px;
}

.column {
  float: left;
  padding: 10px;
}

.column-left {
  width: 60%;
  min-width: 400px;
}

.column-right {
  width: 40%;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box {
  border: 2px solid black;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.rank-table {
  border-collapse: collapse;
  margin: 8px auto 0 auto;
}

.rank-table th,
.rank-table td {
  border: 1px solid #dddddd;
  padding: 4px 8px;
  text-align: center;
}

.rank-table th {
  font-weight: bold;
}

.island-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 13px;
}

.info-table-container { overflow-x: auto; }
.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; }

.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: 100px;
}
.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;
}
.slot-drop-zone {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px dashed #bbb;
  margin: 0 auto; background: #f5f5f5;
}
</style>

<div class="row">

  <!-- Left column: feedback text -->
  <div class="column column-left">
    <p>You ranked Island <b>{{ rank1 }}</b> first{{ if rank2 }} and Island <b>{{ rank2 }}</b> second{{ endif }}.</p>
    <p>The other traveler ranked Island <b>{{ other_rank1 }}</b> first and Island <b>{{ other_rank2 }}</b> second.</p>
    {{ if unassigned }}
    <p>Because the other traveler had higher priority at Island <b>{{ first_choice }}</b>, you were not sent to any island.</p>
    <p>You receive <b>0 points</b>.</p>
    {{ else }}
    <p>Because the other traveler had higher priority at Island <b>{{ first_choice }}</b>, you were sent to Island <b>{{ assigned }}</b>.</p>
    <p>You receive <b>{{ points }} points</b>.</p>
    {{ endif }}
  </div>

  <!-- Right column: completed ranking box + info table box -->
  <div class="column column-right">

    <!-- Box 1: completed ranking (read-only) -->
    <div class="box">
      <p>Your ranking:</p>
      <!-- Pool: empty when both islands ranked; shows leftover island when only 1 ranked -->
      <div class="dnd-pool">
        {{ for icon in pool_islands }}
        <div class="island-icon" style="background-color:{{ icon.bg }};color:{{ icon.txt }}">{{ icon.island }}</div>
        {{ endfor }}
      </div>
      <!-- Always 2 rows; second row shows empty slot when unsubmitted -->
      <table class="rank-table">
        <thead><tr><th>Rank</th><th>Island</th></tr></thead>
        <tbody>
          {{ for row in ranking_rows }}
          <tr>
            <td>{{ row.rank }}{{ if row.rank == 1 }}<br><span style="font-size:11px;color:#aaa;">(Highest)</span>{{ endif }}</td>
            <td>
              {{ if row.island }}
              <span class="island-badge" style="background-color:{{ row.bg }};color:{{ row.txt }}">{{ row.island }}</span>
              {{ else }}
              <div class="slot-drop-zone"></div>
              {{ endif }}
            </td>
          </tr>
          {{ endfor }}
        </tbody>
      </table>
    </div>

    <!-- Box 2: payoff/priority table only -->
    <div class="box">
      {{ prac_table }}
    </div>

  </div>
</div>

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

{{ endblock }}