{{ block title }}Payment Summary{{ endblock }}

{{ block styles }}
<link rel="stylesheet" href="{{ static 'global/experiment.css' }}">
{{ endblock }}

{{ block content }}
<div class="platform-shell narrow-shell">
    <section class="panel hero-panel">
        <div class="eyebrow">Study Complete</div>
        <h1 class="page-heading">Your Bonus Summary</h1>
        <p class="lead">
            Below is a summary of how your {{ bonus_endowment }} bonus was allocated.
        </p>
    </section>

    <section class="panel">
        <div class="section-header">
            <h2>Donation Breakdown</h2>
        </div>
        <div class="summary-list">
            {{ for allocation in allocations }}
                <div class="summary-row">
                    <div>
                        <strong>{{ allocation.name }}</strong>
                    </div>
                    <strong>{{ allocation.amount }}</strong>
                </div>
            {{ endfor }}
        </div>
    </section>

    <section class="panel totals-panel">
        <div class="totals-row">
            <span>Total bonus endowment</span>
            <strong>{{ bonus_endowment }}</strong>
        </div>
        <div class="totals-row">
            <span>Total donated</span>
            <strong>{{ total_donated }}</strong>
        </div>
        <div class="totals-row emphasis-row">
            <span>Amount kept / payoff</span>
            <strong>{{ payoff }}</strong>
        </div>
    </section>

    <div class="action-row">
        {{ next_button }}
    </div>
</div>
{{ endblock }}