{{ block title }}Round {{ player.round_number }} - Results{{ endblock }}

{{ block content }}

<style>
        .payoff-formula {
            font-size: 0.9rem;
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #dee2e6;
        }
    </style>

    {% if player.timeout_happened %}
    <div class="alert alert-danger mb-4 shadow-sm" role="alert">
        <h4 class="alert-heading"><i class="bi bi-exclamation-triangle-fill"></i> No decision has been made!</h4>
        <p>As you did not make a choice within the time limit, you received <strong>0 points</strong> in this round.</p>
        <hr>
        <p class="mb-0">However, the information below shows you what your neighbours have decided.</p>
    </div>
    {% else %}
    <div class="card bg-light mb-4">
        <div class="card-body text-center">
            <h5 class="text-muted">Your decision in this round was:</h5>
            <h2 class="display-4"><strong>{{ my_symbol }}</strong></h2>
        </div>
    </div>


            <div class="card h-100 option-card shadow-sm mb-4">
                <div class="card-body text-center">
                    <h5 class="text-muted">Your points for this round:</h5>
                    <div class="row">
                        <div class="col">
                            <div class="card-body text-center">
                                <div class="payoff-formula mb-3">
                                     Because you selected <strong>{{ my_symbol }}</strong>, <br>
                                    you will receive <strong> {{ base_points_payoff }} </strong> base points. <br>
                                    <br>
                                    Because <strong>{{ matches }} of your {{ num_neighbors }}</strong> neighbours have also decided for <strong>{{ my_symbol }}</strong>,<br>
                                    you will receive <strong> {{ coordination_payoff }} </strong>bonus points </span>.

                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card-body text-center">
                                <div class="payoff-formula mb-3">
                                    <strong>{{ base_points_payoff }}</strong> <br>
                                    base points <br>
                                    <span class="text-muted">+</span> <br>
                                    [({{ matches }} / {{ num_neighbors }}) &times; {{ ep }}] = <strong>{{ coordination_payoff }}</strong> <br>
                                     bonus points

                                </div>
                            </div>
                        </div>
                        <span class="text-muted">=</span>
                                    <h4 class="text-success">
                                        <strong>Total: {{ total_payoff }} </strong>
                                    </h4>
                    </div>
                </div>
            </div>



    {% endif %}


    <div class="row mb-4">
        <div class="col-sm-6">
            <div class="card text-center {% if player.decision == 1 %}border-primary shadow-sm{% endif %}">
                <div class="card-body">
                    <h1 class="card-title">{{ count_1 }}</h1>
                    <p class="card-text">Neighbours chose <strong>{{ sym_1 }}</strong></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="card text-center {% if player.decision == 0 %}border-primary shadow-sm{% endif %}">
                <div class="card-body">
                    <h1 class="card-title">{{ count_0 }}</h1>
                    <p class="card-text">Neighbours chose <strong>{{ sym_0 }}</strong></p>
                </div>
            </div>
        </div>
    </div>
<!--
    <div class="card">
        <div class="card-header">Decisions of your neighbours</div>
        <div class="card-body p-0" style="max-height: 250px; overflow-y: auto;">
            <table class="table table-sm table-hover mb-0">
                <thead class="table-light sticky-top">
                    <tr>
                        <th class="ps-3">Player</th>

                        <th>Decision</th>
                    </tr>
                </thead>
                <tbody>
                    {% for n in neighbor_data %}
                    <tr {% if n.decision == player.decision %}class="table-success"{% endif %}>
                        <td class="ps-3">Player {{ n.node }}</td>
                        <td>
                            <strong>
                                {% if n.decision == 1 %}{{ sym_1 }}{% else %}{{ sym_0 }}{% endif %}
                            </strong>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    -->

    <div class="d-flex justify-content-center mt-5">
        {% next_button %}
    </div>

    <style>
        /* Hide the default oTree timer initially */
        .otree-timer {
            display: none;
        }
    </style>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Wait 20 seconds (20000 milliseconds)
            setTimeout(function() {
                // Find the oTree timer element and make it visible
                var timer = document.querySelector('.otree-timer');
                if (timer) {
                    timer.style.display = 'block';
                    // Optional: Change the text color to red to warn the user
                    timer.style.color = 'red';
                }
            }, 120000);
        });
    </script>

{{ endblock }}