{{ block title }}
    Step 2: Your Final Guess
{{ endblock }}

{{ block content }}
    <div class="alert alert-danger text-center mb-4 border-danger shadow-sm">
        <h4 class="mb-0 text-danger fw-bold">
            ⏱️ Time remaining: <span id="time-left">60</span> seconds
        </h4>
    </div>

    {{ if practice }}
        <div class="alert alert-warning text-center"><strong>PRACTICE ROUND</strong></div>
    {{ endif }}

    <div class="text-center mb-4">
        <img src="{{ static image_path }}" style="max-height: 400px; max-width: 100%; border: 2px solid #ccc; border-radius: 8px;">
    </div>

    <div class="alert alert-info text-center m-3">
        <p class="mb-1">Your Initial Guess: <strong>{{ initial }}%</strong> OVER 21</p>
        <p class="mb-0">AI's Guess: <strong>{{ ai_prob_pct }}%</strong> OVER 21</p>
    </div>

    <div class="card bg-light m-3 border-primary">
        <div class="card-body">
            <label class="form-label fw-bold">
                What is your FINAL probability (0-100%) that this person is OVER 21 years old?
            </label>
            
            <div class="d-flex justify-content-between text-muted mb-2">
                <span>0% (Definitely UNDER 21)</span>
                <span>100% (Definitely OVER 21)</span>
            </div>
            
            <input type="range" class="form-range" min="0" max="100" step="1" id="probSlider" name="final_belief" value="50" oninput="updateSliderText()">
            
            <div class="text-center mt-4">
                <h4 class="text-primary">
                    Selected: <span id="overText" class="fw-bold">50</span>% probability OVER 21
                </h4>
                <p class="text-secondary mb-0">
                    (<span id="underText">50</span>% probability UNDER 21)
                </p>
            </div>
        </div>
    </div>

    <div class="text-center mt-4">
        <button class="btn btn-primary btn-lg" id="submit-btn">Submit Final Decision</button>
    </div>

    <script>
        // 滑动条数值联动
        function updateSliderText() {
            let sliderVal = document.getElementById("probSlider").value;
            document.getElementById("overText").innerText = sliderVal;
            document.getElementById("underText").innerText = 100 - sliderVal;
        }
        window.onload = updateSliderText;

        // 核心：60秒倒计时与自动提交
        let timeLeft = 60;
        let timerDisplay = document.getElementById("time-left");
        
        let countdown = setInterval(function() {
            timeLeft--;
            timerDisplay.innerText = timeLeft;
            
            if (timeLeft <= 0) {
                clearInterval(countdown);
                // 时间到！强行触发提交表单，完美保留滑块的当前值
                document.getElementById("form").submit();
            }
        }, 1000);
    </script>
{{ endblock }}