{{ block title }}Practice Rounds Complete!{{ endblock }}

{{ block content }}

<div class="card">
    <div class="card-body text-center">
        <h3><i class="fas fa-check-circle text-success"></i> Practice Complete!</h3>
        <p class="lead">Great job! You've completed the 3 practice rounds.</p>
    </div>
</div>

<div class="card mt-3">
    <div class="card-body">
        <h5>Your Practice Performance</h5>
        <div class="table-responsive">
            <table class="table">
                <thead class="thead-light">
                    <tr>
                        <th>Practice Round</th>
                        <th>Your Choice</th>
                        <th>Outcome</th>
                        <th>Tokens</th>
                    </tr>
                </thead>
                <tbody>
                    {{ for round in practice_history }}
                    <tr>
                        <td>{{ round.round }}</td>
                        <td>{{ round.choice }}</td>
                        <td>
                            {{ if framing == 'gain' }}
                                {{ if round.outcome }}
                                <span class="text-success">✓ Snow</span>
                                {{ else }}
                                <span class="text-danger">✗ No Snow</span>
                                {{ endif }}
                            {{ else }}
                                {{ if round.outcome }}
                                <span class="text-success">✓ No Loss</span>
                                {{ else }}
                                <span class="text-danger">✗ Loss</span>
                                {{ endif }}
                            {{ endif }}
                        </td>
                        <td><strong>{{ round.payoff }}</strong></td>
                    </tr>
                    {{ endfor }}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card mt-3 border-primary">
    <div class="card-body">
        <h5 class="text-primary"><i class="fas fa-exclamation-triangle"></i> Ready for Real Rounds</h5>
        <p>The practice rounds were just for learning and <strong>do not count toward your final score</strong>.</p>
        <p>Now you'll complete <strong>30 real rounds</strong>.</p>
        
        <!--<div class="alert alert-info">
            <strong><i class="fas fa-dollar-sign"></i> Remember:</strong> 
            3 of these 30 rounds will be randomly selected at the end for your payment.
        </div>-->
        
        <div class="text-center">
            {{ next_button text="Start Real Rounds" class="btn btn-lg btn-primary" }}
        </div>
    </div>
</div>

{{ endblock }}