{% block title %}
  <span class="title-left">Payment</span>
  <span class="title-right">
    <span class="round-chip">Selected Round: {{ paying_round }}</span>
  </span>
{% endblock %}

{% block content %}

<!-- ===== Payment Summary ===== -->
<div class="card">
  <div class="card__header">
    <h4>Payment Summary</h4>
    <div class="card__subtitle">Details of your selected round</div>
  </div>

  <div class="card__body">
    <div class="kv-list">
      <div class="kv">
        <div class="k">Randomly selected round</div>
        <div class="v"><span class="badge badge-neutral">{{ paying_round }}</span></div>
      </div>
      <div class="kv">
        <div class="k">Earnings from selected round</div>
        <div class="v"><span class="badge badge-neutral">{{ paying_round_payoff }}</span></div>
      </div>
      <div class="kv">
        <div class="k">Quiz bonus (first-try correct × {{ quiz_correct_count }})</div>
        <div class="v"><span class="badge badge-neutral">{{ quiz_bonus_amount }}</span></div>
      </div>
      <div class="kv">
        <div class="k">Total earnings</div>
        <div class="v"><span class="badge badge-neutral">{{ total_payoff_display }}</span></div>
      </div>
    </div>
  </div>
</div>

<!-- ===== How it was chosen (reminder) ===== -->
<div class="card">
  <div class="card__header">
    <h4>How It Was Chosen</h4>
    <div class="card__subtitle">Payment rule used in this session</div>
  </div>

  <div class="card__body">
    <div class="formula-box">
      One round from the session was selected at random. Your total earnings equals the earnings from that round.
    </div>
    <ul class="formula-notes">
      <li>The selected round was drawn uniformly from all rounds.</li>
      <li>Your earnings for that round followed the game’s earnings formula shown on the results page.</li>
    </ul>
  </div>
</div>

<!-- ===== Sticky note reminder ===== -->
<div class="card">
  <div class="card__header">
    <h4>Before You Continue</h4>
    <div class="card__subtitle">Please complete this step before moving on</div>
  </div>

  <div class="card__body">
    <div class="formula-box">
      Please write down the <strong>“Total earnings”</strong> (in points) you have in the experiment on the sticky note on the desk.
      We will come by and collect these soon. The next button will appear momentarily and take you to the questionnaire.
      Thank you for your patience.
    </div>
  </div>
</div>

<div class="next-wrap" id="next-wrap" style="display:none;">
  {{ next_button }}
</div>

<style>
  /* Title bar with right-aligned chip */
  .otree-title{
    max-width:900px; margin:6px auto 14px auto !important; padding:6px 2px 0 2px;
    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;
  }
  .title-right{ display:inline-flex; align-items:center; gap:10px; }
  .round-chip{
    display:inline-block; padding:4px 10px; border-radius:999px;
    background:#f3f6ff; border:1px solid #dbe2f3; color:#1e3a8a; font-weight:700; font-size:12px;
  }

  /* Card shell */
  .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; }

  /* Key-value list */
  .kv-list{ display:grid; grid-template-columns:1fr; gap:10px; }
  .kv{
    display:grid; grid-template-columns: 1fr auto; align-items:center;
    padding:8px 0; border-bottom:1px dashed #eef2f7;
  }
  .kv:last-child{ border-bottom:0; }
  .k{ color:#374151; font-size:14px; }
  .v{ 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; }

  /* Explanation */
  .formula-box{
    padding:12px 14px; border:1px dashed #dbe2f3; border-radius:10px; background:#f9fbff;
    color:#1f2937; font-size:14px; margin-bottom:10px;
  }
  .formula-notes{ margin:0; padding-left:18px; color:#6b7280; font-size:13px; }
  .formula-notes li{ margin:4px 0; }

  /* 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);
  }
  .next-wrap .btn:active,
  .otree-btn-next:active,
  button[type="submit"].btn:active{ transform: translateY(1px); }

  @media (max-width:640px){
    .otree-title{ flex-direction:column; align-items:flex-start; gap:6px; }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    setTimeout(function () {
      const nextWrap = document.getElementById("next-wrap");
      if (nextWrap) {
        nextWrap.style.display = "flex";
      }
    }, 30000);
  });
</script>

{% endblock %}