{{ block title }}Final Payment{{ endblock }}
{{ block content }}
<div class="card shadow-sm p-4" style="max-width: 540px; margin: 0 auto; text-align: center;">

  <h3 class="mb-1">Final Payment Summary</h3>
  <p class="text-muted mb-4">You are the <strong>{{ role }}</strong>.</p>

  <!-- Total lab points -->
  <div style="
    background: #f0fdf4;
    border: 3px solid #198754;
    border-radius: 16px;
    padding: 20px 40px;
    margin-bottom: 24px;
  ">
    <div style="font-size: 0.85rem; font-weight: 600; color: #198754; margin-bottom: 4px;">
      Total lab points earned (15 rounds):
    </div>
    <div style="font-size: 3rem; font-weight: 800; color: #198754;">
      {{ total_pts }}
    </div>
  </div>

  <!-- Payment breakdown -->
  <table class="table table-borderless mb-4" style="max-width: 380px; margin: 0 auto; text-align: left;">
    <tbody>
      <tr>
        <td class="text-muted">Lab points earned</td>
        <td class="fw-bold text-end">{{ total_pts }} pts</td>
      </tr>
      {% if role == 'Appraiser' %}
      <tr>
        <td class="text-muted">Conversion rate</td>
        <td class="fw-bold text-end">5 pts = $1.25</td>
      </tr>
      {% else %}
      <tr>
        <td class="text-muted">Conversion rate</td>
        <td class="fw-bold text-end">100 pts = $0.60</td>
      </tr>
      {% endif %}
      <tr>
        <td class="text-muted">Experiment earnings</td>
        <td class="fw-bold text-end">${{ cash }}</td>
      </tr>
      <tr>
        <td class="text-muted">
          Knowledge check bonus
          <span class="text-muted" style="font-size:0.8rem;">({{ knowledge_correct }}/6 correct × $0.30)</span>
        </td>
        <td class="fw-bold text-end">${{ knowledge_bonus_cash }}</td>
      </tr>
      <tr>
        <td class="text-muted">Show-up fee</td>
        <td class="fw-bold text-end">${{ show_up_fee }}</td>
      </tr>
      <tr style="border-top: 2px solid #dee2e6;">
        <td class="fw-bold">Total payment</td>
        <td class="fw-bold text-end text-success" style="font-size: 1.2rem;">${{ total_cash }}</td>
      </tr>
    </tbody>
  </table>

  <div class="alert alert-info">
    Please remain seated. The experimenter will come to you with your payment shortly.
  </div>

  {{ next_button }}

</div>
{{ endblock }}