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

{{ block content }}
<script>window.__pageTimeoutSeconds = {{ C.TIMEOUT_SECONDS }};</script>

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

.summary-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px;
    margin: 20px auto;
    width: fit-content;
}

.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 #dddddd;
    padding: 4px 8px;
    text-align: center;
}

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

.slot-drop-zone {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px dashed #bbb;
    margin: 0 auto; background: #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>
            {{ if r.filled }}
            <span class="island-badge" style="background-color:{{ r.bg }};color:{{ r.txt }}">{{ r.island }}</span>
            {{ else }}
            <div class="slot-drop-zone"></div>
            {{ endif }}
          </td>
        </tr>
        {{ endfor }}
      </tbody>
    </table>
  </div>

  <div class="summary-col">
    <b>Value</b>
    <table class="summary-table">
      <tbody>
        <tr><td style="min-width: 80px; padding: 6px 32px;">{{ expected_payoff }}</td></tr>
      </tbody>
    </table>
  </div>

  <div class="summary-col">
    <b>Probabilities of Being Assigned</b>
    <table class="summary-table">
      <thead><tr><th>Rank</th><th>Island</th><th>Probability (%)</th></tr></thead>
      <tbody>
        {{ for b in beliefs }}
        <tr>
          <td>{{ b.rank }}</td>
          <td>
            {{ if b.filled }}
            <span class="island-badge" style="background-color:{{ b.bg }};color:{{ b.txt }}">{{ b.island }}</span>
            {{ else }}
            <div class="slot-drop-zone"></div>
            {{ endif }}
          </td>
          <td>{{ if b.filled }}{{ b.belief }}%{{ endif }}</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 }}