{{ block title }}{{if is_practice}} Practice {{ endif }}Round {{ round_num }} - Outcome{{ endblock }}

{{ block content }}

<div class="card mb-3">
    <div class="card-body">
        <h4>{{if is_practice}} Practice {{ endif }} Round {{ round_num }} Results</h4>
        
        <div class="row mb-3">
            <div class="col-md-6">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h6 class="text-muted">Your Choice</h6>
                        <h3 class="text-primary mb-0">{{ choice }} tokens</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <h6 class="text-muted">Tokens earned</h6>
                        <h3 class="text-success mb-0">{{ payoff_tokens }} tokens</h3>
                    </div>
                </div>
            </div>
        </div>
        
        {{ if framing == 'gain' }}
            {{ if outcome }}
            <div class="alert alert-success">
                <h5>Heavy snow.</h5>
                <p class="mb-0">
                    You got back <strong>{{ choice_multiply_2 }} tokens</strong> 
                    for the {{ choice }} tokens you spent.
                </p>
            </div>
            {{ else }}
            <div class="alert alert-danger">
                <h5>No heavy snow.</h5>
                <p class="mb-0">
                    You lost the <strong>{{ choice }} tokens</strong> you spent.
                </p>
            </div>
            {{ endif }}
            
            <div class="card bg-light">
                <div class="card-body">
                    <h6>Calculation:</h6>
                    {{ if outcome }}
                    <p class="mb-0">
                        Kept: {{ endowment_subtract_choice }} tokens + 
                        return on spent: {{ choice_multiply_2 }} tokens = 
                        <strong>{{ payoff_tokens }} tokens</strong>
                    </p>
                    {{ else }}
                    <p class="mb-0">
                        Kept: {{ endowment_subtract_choice }} tokens + no return on spent tokens = 
                        <strong>{{ payoff_tokens }} tokens</strong>
                    </p>
                    {{ endif }}
                </div>
            </div>
            
        {{ else }}
            {{ if outcome }}
            <div class="alert alert-success">
                <h5>No heavy rain.</h5>
                <p class="mb-0">
                    No heavy rain occurred this round. You paid <strong>{{ choice_multiply_insurance_cost }} tokens</strong> 
                    for insurance coverage of {{ choice }} tokens.
                </p>
            </div>
            {{ else }}
            <div class="alert alert-danger">
                <h5>Heavy rain.</h5>
                <p class="mb-0">
                    Heavy rain occurred. Your protective measures resulted in <strong>{{ choice }} tokens</strong>. 
                    You lost {{ endowment_subtract_choice }} unspent tokens.
                </p>
            </div>
            {{ endif }}
            
            <div class="card bg-light">
                <div class="card-body">
                    <h6>Calculation:</h6>
                    {{ if outcome }}
                    <p class="mb-0">
                        Started with: {{ endowment }} tokens - 
                        protection cost: {{ choice_multiply_insurance_cost }} tokens = 
                        <strong>{{ payoff_tokens }} tokens</strong>
                    </p>
                    {{ else }}
                    <p class="mb-0">
                        Started with: {{ endowment }} tokens - 
                        protection cost: {{ choice_multiply_insurance_cost }} tokens - 
                        Unspent tokens loss: {{ endowment_subtract_choice }} tokens = 
                        <strong>{{ payoff_tokens }} tokens</strong>
                    </p>
                    {{ endif }}
                </div>
            </div>
        {{ endif }}
    </div>
</div>

{{ if history }}
<div class="card">
    <div class="card-body">
        <h5><i class="fas fa-history"></i> Your History</h5>
        <div class="table-responsive">
            <table class="table table-sm table-hover">
                <thead class="thead-light">
                    <tr>
                        <th>Round</th>
                        <th>You spent</th>
                        <th>Outcome</th>
                        <th>Tokens earned</th>
                    </tr>
                </thead>
                <tbody>
                    {{ for round in history }}
                    <tr>
                        <td>{{ if round.is_practice }}Practice - {{endif}}{{ round.round }}</td>
                        <td>{{ round.choice }}</td>
                        <td>
                            {{ if framing == 'gain' }}
                                {{ if round.outcome }}
                                <span class="text-success"><i class="fas fa-check"></i> Snow</span>
                                {{ else }}
                                <span class="text-danger"><i class="fas fa-times"></i> No Snow</span>
                                {{ endif }}
                            {{ else }}
                                {{ if round.outcome }}
                                <span class="text-success"><i class="fas fa-check"></i> No Loss</span>
                                {{ else }}
                                <span class="text-danger"><i class="fas fa-times"></i> Loss</span>
                                {{ endif }}
                            {{ endif }}
                        </td>
                        <td><strong>{{ round.payoff }}</strong></td>
                    </tr>
                    {{ endfor }}
                </tbody>
            </table>
        </div>
        
        <div class="row mt-3">
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center py-2">
                        <small class="text-muted">Total Rounds</small>
                        <h6 class="mb-0">{{ history|length }}</h6>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center py-2">
                        <small class="text-muted">
                            {{ if framing == 'gain' }}Snow occured{{ else }}No snow{{ endif }}
                        </small>
                        <h6 class="mb-0">{{ success_count }}/{{ history|length }}</h6>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center py-2">
                        <small class="text-muted">Average tokens</small>
                        <h6 class="mb-0">{{ average_payoff }}</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{ endif }}

<div class="text-center mt-3">
    {{ next_button }}
</div>

{{ endblock }}