{extends file='layouts/layout-content-only.tpl'}

{block name='content'}
<div class="bot-protection-container">
    <div class="bot-protection-box">
        <div class="icon-shield">🛡️</div>
        
        <h3>{l s='Security Check' mod='botlimiter'}</h3>
        
        <p>
            {l s='We are checking your browser to ensure you are not a bot.' mod='botlimiter'}
            <br>
            {l s='This helps us keep prices low and the server fast for real humans.' mod='botlimiter'}
        </p>

        <form id="bot-form" action="{$return_url|escape:'html':'UTF-8'}" method="GET">
            <button type="submit" class="btn btn-primary" id="manual-btn" style="display:none;">
                {l s='I am human (Click to continue)' mod='botlimiter'}
            </button>
        </form>

        <div id="loader">
            <div class="spinner"></div>
            <span>{l s='Verifying...' mod='botlimiter'}</span>
        </div>
    </div>
</div>

<style>
    body { background-color: #f4f4f4; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }
    .bot-protection-box { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; max-width: 400px; width: 100%; }
    .icon-shield { font-size: 48px; margin-bottom: 20px; }
    .btn-primary { background: #2fb5d2; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; margin-top: 20px; }
    .spinner { border: 4px solid #f3f3f3; border-top: 4px solid #2fb5d2; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 20px auto; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
</style>

<script type="text/javascript">
    var targetUrl = "{$return_url|escape:'javascript':'UTF-8'}";
    var separator = targetUrl.indexOf('?') !== -1 ? '&' : '?';
    var finalUrl = targetUrl + separator + "bot_token=" + "{$bot_token|escape:'javascript':'UTF-8'}";
    
    // 1. Auto-redirect for normal users (JS enabled)
    setTimeout(function() {
        window.location.href = finalUrl;
    }, 800); 

    // 2. Show manual button after 3 seconds (in case redirect fails or human wants control)
    setTimeout(function() {
        document.getElementById('loader').style.display = 'none';
        var btn = document.getElementById('manual-btn');
        btn.style.display = 'inline-block';
        // Update form action to include token for manual click
        document.getElementById('bot-form').action = finalUrl;
    }, 3000);
</script>

<noscript>
    <style>#loader { display: none; }</style>
    <div style="color: #d63031; border: 1px solid #d63031; padding: 10px; margin-top: 20px; border-radius: 4px;">
        <strong>{l s='JavaScript is required.' mod='botlimiter'}</strong><br>
        {l s='Please enable JavaScript or turn off your VPN/AdBlocker to access the site filters.' mod='botlimiter'}
    </div>
</noscript>
{/block}