<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Security Verification</title>
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                         Helvetica, Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 400px;
        }
        h1 {
            margin-top: 0;
            color: #333;
            font-size: 1.5rem;
        }
        p {
            color: #666;
            margin-bottom: 1.5rem;
        }
        .error {
            background-color: #fee;
            color: #c00;
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
        }
        .turnstile-container {
            display: flex;
            justify-content: center;
            margin-bottom: 1rem;
        }
        button[type="submit"] {
            background-color: #0066cc;
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
        }
        button[type="submit"]:hover {
            background-color: #0055aa;
        }
        button[type="submit"]:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Security Verification</h1>
        <p>Please complete the verification below to continue.</p>

        {% if error %}
        <div class="error">
            Verification failed. Please try again.
            {% if error == "missing_token" %}
                (No verification token received)
            {% elif error == "timeout-or-duplicate" %}
                (Token expired, please try again)
            {% endif %}
        </div>
        {% endif %}

        <form method="POST" action="{{ verify_url }}">
            <input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
            <input type="hidden" name="next" value="{{ next_url }}">

            <div class="turnstile-container">
                <div
                    class="cf-turnstile"
                    data-sitekey="{{ site_key }}"
                    data-callback="onTurnstileSuccess"
                ></div>
            </div>

            <button type="submit" id="submit-btn" disabled>Continue</button>
        </form>
    </div>

    <script>
        function onTurnstileSuccess(token) {
            document.getElementById('submit-btn').disabled = false;
        }
    </script>
</body>
</html>
