{{ block title }}Experiment Complete!{{ endblock }}

{{ block content }}

<div class="card">
    <div class="card-body text-center">
        <h2><i class="fas fa-trophy text-warning"></i> Congratulations!</h2>
        <h4>You've completed the experiment.</h4>
		<h3>Your confirmation code is {{ conf_num }}<br>WRITE THIS DOWN.<br></h3>
		<h5>Then, return to the Qualtrics page that linked to the experiment and mark that you have finished the experiment so you can get credit.
</h5>
    </div>
</div>
<!--
<div class="card mt-3">
    <div class="card-body">
        <h4>Your Payment Calculation</h4>
        
        <p>We randomly selected <strong>3 rounds</strong> for payment:</p>
        
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead class="thead-light">
                    <tr>
                        <th>Selected Round</th>
                        <th>Your Choice</th>
                        <th>Outcome</th>
                        <th>Tokens Earned</th>
                    </tr>
                </thead>
                <tbody>
                    {{ for round_data in selected_rounds_data }}
                    <tr>
                        <td><strong>Round {{ round_data.round }}</strong></td>
                        <td>{{ round_data.choice }}</td>
                        <td>
                            {{ if framing == 'gain' }}
                                {{ if round_data.outcome }}
                                <span class="text-success">Success</span>
                                {{ else }}
                                <span class="text-danger">Failure</span>
                                {{ endif }}
                            {{ else }}
                                {{ if round_data.outcome }}
                                <span class="text-success">No Loss</span>
                                {{ else }}
                                <span class="text-danger">Loss</span>
                                {{ endif }}
                            {{ endif }}
                        </td>
                        <td><strong>{{ round_data.payoff }}</strong></td>
                    </tr>
                    {{ endfor }}
                </tbody>
                <tfoot class="font-weight-bold">
                    <tr class="table-primary">
                        <td colspan="3" class="text-right">Total Tokens:</td>
                        <td><h5 class="mb-0">{{ total_tokens }}</h5></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        
        <div class="card bg-success text-white mt-3">
            <div class="card-body text-center">
                <h4 class="mb-2">Your Bonus Payment</h4>
                <h2 class="mb-0">${{ final_payment }}</h2>
                <p class="mb-0"><small>({{ total_tokens }} tokens × $0.01)</small></p>
            </div>
        </div>
    </div>
</div>

<div class="card mt-3">
    <div class="card-body">
        <h5>Complete Performance Summary</h5>
        
        <div class="row">
            <div class="col-md-3">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <small class="text-muted">Total Rounds</small>
                        <h5>30</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <small class="text-muted">
                            {{ if framing == 'gain' }}Successes{{ else }}No Loss{{ endif }}
                        </small>
                        <h5>{{ total_successes }}</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <small class="text-muted">Avg. Choice</small>
                        <h5>{{ average_choice }}</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <small class="text-muted">Avg. Tokens</small>
                        <h5>{{ average_tokens }}</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="alert alert-info mt-3">
    <h5><i class="fas fa-clipboard-check"></i> Next Steps</h5>
    <p class="mb-0">
        Please click the button below to return to the survey platform and receive your payment code.
    </p>
</div>

<div class="text-center mt-4">
    {{ next_button text="Complete Experiment" class="btn btn-lg btn-success" }}
</div>
-->
{{ endblock }}