{{ block title }}
    Round {{ player.round_number }} - Choose an option
{{ endblock }}

{{ block content }}
    <style>
        .payoff-formula {
            font-size: 0.9rem;
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #dee2e6;
        }
        /* Visualisierung der Klickbarkeit */
        .option-card {
            transition: transform 0.2s, border-color 0.2s;
            cursor: default;
        }
        .option-card:hover {
            border-color: #007bff;
            transform: translateY(-2px);
        }
    </style>
        {% if player.participant.in_phase_2 %}
            <p class="lead text-center mb-4 mt-4">   Since you are in <strong>Phase 2!</strong> Your earnings for this round are calculated as follows:</p>
        {% else %}
            <p class="lead text-center mb-4 mt-4"> Since you are in <strong>Phase 1!</strong> Your earnings for this round are calculated as follows:</p>
        {% endif %}


    <form method="post" id="decision-form">

        <div class="row">
            {% for val in choice_order %}
            <div class="col-md-6 mb-3">
                <div class="card h-100 option-card shadow-sm border-primary">
                    <div class="card-body text-center">
                        <h3 class="card-title text-primary">
                            Option <strong>{% if val == 1 %}{{ label_for_1 }}{% else %}{{ label_for_0 }}{% endif %}</strong>
                        </h3>
                        <hr>
                        <div class="payoff-formula mb-3">
                            <strong>{% if val == 1 %}{{ base_1 }}{% else %}{{ base_0 }}{% endif %}</strong> base points <br>
                            <span class="text-muted">+</span> <br>
                            (Number of matching <strong> neighbours</strong> / {{ num_neighbors }}) &times; <strong>{{ ep }}</strong>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <div class="card mt-4 border-primary">
            <div class="card-body bg-light">
                <h5 class="text-center mb-4">Your final choice for this round:</h5>

                <div class="d-flex justify-content-center align-items-center">
                    {% for val in choice_order %}
                        <div class="form-check form-check-inline mx-4">
                            <input class="form-check-input" type="radio" name="decision"
                                   id="opt{{ val }}" value="{{ val }}" required style="transform: scale(1.5);">
                            <label class="form-check-label h3 ms-2" for="opt{{ val }}">
                                {% if val == 1 %}{{ label_for_1 }}{% else %}{{ label_for_0 }}{% endif %}
                            </label>
                        </div>
                    {% endfor %}
                </div>

                <div class="text-center mt-4">
                    <button class="btn btn-primary btn-lg px-5 shadow otree-btn-next">Confirm selection</button>
                </div>
            </div>
        </div>

    </form>

    <div class="text-center mt-3">
        <span class="badge bg-info text-dark p-2">
            {% if player.participant.in_phase_2 %}
                <i class="bi bi-info-circle"></i> You are in Phase 2
            {% else %}
                <i class="bi bi-info-circle"></i> You are in Phase 1
            {% endif %}
        </span>
    </div>

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

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Wait 120 seconds (120000 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 }}