{{ block title }}Payment{{ endblock }}
{{ block content }}

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Experiment Completed</h5>
        <p class="card-text">
            Thank you for your participation.
        </p>
        <hr>
        <h5 class="mb-3">Your Payment Details:</h5>
        <p class="card-text mb-2">
            A random round was selected for payment: <strong>Round {{ pr }}</strong>.
            Your payoff below comes from that round only.
        </p>
        <ul class="list-group list-group-flush mb-3">
            <li class="list-group-item d-flex justify-content-between align-items-center">
                Bonus from paying round (round {{ final.pr }})
                <span class="badge badge-primary badge-pill" style="font-size: 1.1em;">{{ final.bonus_pay }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                Participation Fee
                <span class="badge badge-secondary badge-pill" style="font-size: 1.1em;">{{ final.participation_fee }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <strong>Total Payment</strong>
                <span class="badge badge-success badge-pill" style="font-size: 1.2em;">{{ final.total_pay }}</span>
            </li>
        </ul>
    </div>
</div>

{{ endblock }}