{{ extends 'global/Page.html' }}
{{ block title }}Round {{ player.round_number }}: Summary{{ endblock }}

{{ block content }}

<style>
.otree-timer { display: none; }
.summary-intro, .summary-footer {
    text-align: center;
    margin: 14px 0;
}

.summary-columns {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    margin: 20px auto;
}

.summary-col h3 {
    text-align: center;
    margin-bottom: 10px;
}

.summary-col > b {
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

.summary-table {
    border-collapse: collapse;
    margin: 0 auto;
}

.summary-table th,
.summary-table td {
    border: 1px solid #ddd;
    padding: 6px 16px;
    text-align: center;
}

.summary-table th {
    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;
}
</style>

<p class="summary-intro">You submitted the following for Round {{ player.round_number }}:</p>

<div class="summary-columns">

  <div class="summary-col">
    <b>Rankings</b>
    <table class="summary-table">
      <thead><tr><th>Rank</th><th>Island</th></tr></thead>
      <tbody>
        {{ for r in ranks }}
        <tr>
          <td>{{ r.rank }}</td>
          <td><span class="island-badge" style="background-color:{{ r.bg }};color:{{ r.txt }}">{{ r.island }}</span></td>
        </tr>
        {{ endfor }}
      </tbody>
    </table>
  </div>

  <div class="summary-col">
    <b>Probabilities of Being Assigned if Ranked First</b>
    <table class="summary-table">
      <thead><tr><th>Island</th><th>Probability (%)</th></tr></thead>
      <tbody>
        {{ for b in beliefs }}
        <tr>
          <td><span class="island-badge" style="background-color:{{ b.bg }};color:{{ b.txt }}">{{ b.island }}</span></td>
          <td>{{ b.belief }}%</td>
        </tr>
        {{ endfor }}
      </tbody>
    </table>
  </div>

</div>

<p class="summary-footer">Click next to continue with the study.</p>

<div style="text-align:center;">{{ next_button }}</div>

{{ endblock }}