{% block title %}Comprehension Check{% endblock %}
{% block content %}

<!-- Params card -->
<div class="card info-card">
  <div class="card__header">
    <h4>Reminder</h4>
  </div>
  <div class="card__body">
    <div class="info-grid two-col">
      <!-- Left column -->
      <div class="col">
        <div class="info-kv">
          <div class="info-key">Endowment</div>
          <div class="info-val"><span class="badge badge-neutral">{{ endowment }}</span></div>
        </div>

        <div class="info-kv">
          <div class="info-key">Group Size</div>
          <div class="info-val"><span class="badge badge-neutral">{{ players_per_group }}</span></div>
        </div>

        <div class="info-kv">
          <div class="info-key">Threshold A Requirement</div>
          <div class="info-val"><span class="badge badge-neutral">{{ threshold }}</span></div>
        </div>

        <div class="info-kv">
          <div class="info-key">Threshold B Requirement</div>
          <div class="info-val"><span class="badge badge-neutral">{{ threshold }}</span></div>
        </div>
      </div>

      <!-- Right column -->
      <div class="col">
        <div class="info-kv">
          <div class="info-key">Threshold A Gain</div>
          <div class="info-val"><span class="badge badge-neutral">{{ public_good }}</span></div>
        </div>

        <div class="info-kv">
          <div class="info-key">Threshold B Gain</div>
          <div class="info-val"><span class="badge badge-neutral">{{ public_good }}</span></div>
        </div>

        <div class="info-kv">
          <div class="info-key">Cost if you play A</div>
          <div class="info-val"><span class="badge badge-neutral">{{ cost_one }}</span></div>
        </div>

        <div class="info-kv">
          <div class="info-key">Cost if you play B</div>
          <div class="info-val"><span class="badge badge-neutral">{{ cost_zero }}</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- The actual comprehension prompt -->
<div class="card info-card">
  <div class="card__header">
    <h4>Calculate your Payoff</h4>
  </div>
  <div class="card__body">
    <p>Suppose you selected your probability of action A as <strong>{{ displayed_p }}</strong> and your realized action was <strong>{{ your_realized }}</strong>.</p>
    <p>The<strong> realized actions</strong> of the other group members are: {{ others_actions }}</p>

    <p style="margin-top:10px;">What is your payoff?</p>
    {{ form.cq_payoff_calc }}
  </div>
</div>

<div class="next-wrap">
  {{ next_button }}
</div>

<style>
  /* ===== Card shell (matches your other pages) ===== */
  .card{
    max-width: 900px;
    margin: 16px auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
  }
  .card__header{
    padding: 14px 18px 10px 18px;
    border-bottom: 1px solid #f0f2f5;
    background: #fafafa;
    border-radius: 10px 10px 0 0;
  }
  .card__header h4{ margin:0; font-weight:600; font-size:18px; }
  .card__subtitle{ margin-top:4px; color:#6b7280; font-size:13px; }
  .card__body{ padding:16px 18px 18px 18px; }

  /* ===== Next button row ===== */
  .next-wrap{
    max-width: 900px;
    margin: 10px auto 0 auto;
    display: flex;
    justify-content: flex-end;
  }
  .next-wrap .btn,
  .otree-btn-next,
  button[type="submit"].btn{
    border-radius:8px;
    padding:10px 18px;
    font-weight:600;
    border:1px solid #dbe2f3;
    background:linear-gradient(180deg,#f4f7ff 0%,#e9efff 100%);
    color:#1e3a8a;
    box-shadow:0 4px 10px rgba(30,91,255,.08);
    transition:transform .04s ease,box-shadow .15s ease,background .15s ease;
  }
  .next-wrap .btn:hover,
  .otree-btn-next:hover,
  button[type="submit"].btn:hover{
    background:linear-gradient(180deg,#eaf0ff 0%,#dee7ff 100%);
    box-shadow:0 6px 14px rgba(30,91,255,.12);
  }

  /* ===== Info grid (two columns with key/value rows) ===== */
  .info-grid{
    display:grid;
    grid-template-columns: 1fr; /* default 1-col, becomes 2 on wider screens */
    gap: 12px 18px;
  }
  .info-grid.two-col{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .info-grid .col{ display:grid; gap:10px; }

  .info-kv{
    display:grid;
    grid-template-columns: 1fr auto;  /* key grows, value on right */
    align-items:center;
  }
  .info-key{
    color:#6b7280;
    font-size:13px;
  }
  .info-val{
    font-variant-numeric: tabular-nums;
  }

  /* Badges */
  .badge{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    line-height:1.1;
    font-weight:600;
    font-size:13px;
  }
  .badge-neutral{
    background:#f5f7fb;
    border:1px solid #e2e8f0;
    color:#111827;
  }

  /* Responsive: stack columns on small screens */
  @media (max-width: 640px){
    .info-grid.two-col{ grid-template-columns: 1fr; }
  }

  /* Title bar — align with card content */
  .otree-title{
  max-width: 900px;
  margin: 6px auto 14px auto !important;

  /* match .card__header / .card__body horizontal padding */
  padding-left: 2px !important;
  padding-right: 2px !important;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;

  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  color: #111827;
  border: 0;
}

</style>

{% endblock %}