{% block title %}Verification{% endblock %}

{% block content %}
<script src="/static/global/page_tracker.js"></script>

<div class="col-md-6 offset-md-3">
    <div class="card">
        <div class="card-body text-center">
            <h5 class="card-title">Please wait while we verify your session</h5>
            <p class="text-muted">This should only take a moment.</p>

            <div id="captcha-status" style="margin: 20px 0;">
                <div id="captcha-loading">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="mt-2">Verifying...</p>
                </div>
                <div id="captcha-ready" style="display:none;">
                    <p class="text-success" style="font-size: 1.2em;">&#10003; Verified</p>
                </div>
                <div id="captcha-error" class="text-danger" style="display:none;">
                    Verification failed. Please refresh the page and try again.
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden fields -->
<input type="hidden" name="recaptcha_token" id="id_recaptcha_token">

<!-- Hidden next button — clicked programmatically after verification -->
<button class="otree-btn-next btn btn-primary" id="true_next_button" style="display:none;">Next</button>

<script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}"></script>
<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('{{ recaptcha_site_key }}', {action: 'captcha_page'}).then(function(token) {
            document.getElementById('id_recaptcha_token').value = token;
            document.getElementById('captcha-loading').style.display = 'none';
            document.getElementById('captcha-ready').style.display = 'block';
            setTimeout(function() {
                document.getElementById('true_next_button').click();
            }, 800);
        }).catch(function() {
            document.getElementById('captcha-loading').style.display = 'none';
            document.getElementById('captcha-error').style.display = 'block';
        });
    });
</script>

{% endblock %}