{{ block title }}
Round {{ round_number }}/25
{{ endblock }}
{{ block content }}
<style>
  .top-stats { margin-bottom: 18px;  }
  .top-stats .line { margin: 4px 0; }
  .note { font-size: 0.95rem; margin-top: 8px; }

  .card-box {
    border: 2px solid #9aa7b0;
    border-radius: 3px;
    padding: 0;
    margin-top: 10px;
    background: #fff;
  }
  .card-header {
    padding: 10px 12px;
    font-size: 1.15rem;
    border-bottom: 1px solid #d8dde1;
    background: #f6f7f8;
  }
  .option-row {
    padding: 14px 12px;
    border-top: 1px solid #e6eaed;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
  }
  .option-row:first-of-type { border-top: none; }
  .option-row label { margin: 0; cursor: pointer; width: 100%; }

  .belief-wrap { margin-top: 18px; }
  .belief-help { margin-top: 6px; font-size: 0.95rem; }
  .belief-input { max-width: 220px; }
</style>

<div class="top-stats">
  <div class="line"><strong>Points gained so far:</strong> {{ points_gained_so_far }}</div>
  <div class="line"><strong>Possible bonus:</strong> £{{ possible_bonus }}</div>
  <div class="note">Points will be converted into bonus money after the final round (for green players only).</div>
</div>

<div class="card-box">
  <div class="card-header">
    Which of the two actions do you choose?
  </div>
    {{ formfield 'choice' }}

{% if player.round_number <= 28 %}
  <div class="belief-wrap card-box">
    <div class="card-header">
      Belief about next round
    </div>

    <div class="option-row" style="flex-direction: column; align-items: flex-start;">
      <div>
        In the first round, there are <strong>8</strong> Red players out of <strong>100</strong> players.
      </div>

      <div style="margin-top: 10px;">
        How many Red players do you think there will be in the <strong>next round</strong>
 out of 100?
      </div>

     {{ formfield 'belief' }}
    </div>
  </div>
{% endif %}


    <center><button class="btn btn-primary">Continue</button></center>

{{ endblock }}