<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
        <div class="card bg-dark border-success">
            <div class="card-header bg-success text-white">
                <h3 class="mb-0">Account Activation</h3>
            </div>
            <div class="card-body text-center">
                <div id="loading" class="mb-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-3">Verifying your activation code...</p>
                </div>
                
                <div id="success" class="d-none">
                    <i class="fas fa-check-circle text-success fa-5x mb-3"></i>
                    <h4 class="mb-3">Account Successfully Activated!</h4>
                    <p>Your API key has been generated and sent to your email address.</p>
                    <div class="alert alert-info mt-4">
                        <p class="mb-0"><strong>Important:</strong> Keep your API key secure and do not share it with others.</p>
                    </div>
                    <a href="/api-docs" class="btn btn-primary mt-3">View API Documentation</a>
                </div>
                
                <div id="error" class="d-none">
                    <i class="fas fa-times-circle text-danger fa-5x mb-3"></i>
                    <h4 class="mb-3">Activation Failed</h4>
                    <p>The activation link is invalid or has expired.</p>
                    <a href="/auth/register" class="btn btn-primary mt-3">Register Again</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Simulate activation process
    document.addEventListener('DOMContentLoaded', function() {
        // Get activation token from URL
        const urlParams = new URLSearchParams(window.location.search);
        const token = urlParams.get('token');
        
        // This would be replaced with an actual API call
        setTimeout(() => {
            document.getElementById('loading').classList.add('d-none');
            
            if (token) {
                document.getElementById('success').classList.remove('d-none');
            } else {
                document.getElementById('error').classList.remove('d-none');
            }
        }, 2000);
    });
</script>
