{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    Final Bonus Summary
{% endblock %}

{% block content %}
<div class="card border-dark shadow-sm">
    <div class="card-header bg-dark text-white text-center">
        <h5 class="mb-0">Summary of Your Earnings</h5>
    </div>
    <div class="card-body">
        <table class="table table-bordered mt-3">
    <thead class="table-light">
        <tr>
            <th>Description</th>
            <th class="text-end">Amount (USD)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Participation Fee (Show-up Fee)</td>
            <td class="text-end">${{ Constants.showup_fee }}</td>
        </tr>
        <tr>
            <td>Part II Bonus (Risk Task)</td>
            <td class="text-end">${{ player.hl_won_prize }}</td>
        </tr>
        <tr>
            <td>Part III Bonus (Lottery Task)</td>
            <td class="text-end">${{ p3_bonus_clean }}</td>
        </tr>
    </tbody>
    <tfoot>
        <tr class="table-warning" style="font-size: 1.25rem; font-weight: bold; border-top: 2px solid #333;">
            <td>Total Compensation</td>
            <td class="text-end">$ {{ total_amount_all }}</td>
        </tr>
    </tfoot>
</table>

        <div class="alert alert-info mt-4">
            Thank you for your participation. Please enter your completion code. We will send you the bonus in 72 hours.
        </div>
    </div>
</div>

<div class="text-center mt-4">
    <button class="otree-btn-next btn btn-success px-5">Finish</button>
</div>
{% endblock %}