{{ extends 'global/Page.html' }}
{{ block title }}API Connection Test{{ endblock }}

{{ block content }}

<h3>API Connection Test Results</h3>

{# This will NEVER crash - uses guaranteed variables #}
{{ if has_error }}
<div class="alert alert-danger">
    <h4>Error</h4>
    {{ error_message }}
</div>
{{ else }}
<div class="test-results">
    <p><strong>API Status Code:</strong> {{ api_status }}</p>
    <p><strong>API Response:</strong></p>
    <pre>{{ api_response|json }}</pre>
    <p><strong>Participant Variables:</strong></p>
    <pre>{{ participant_vars|json }}</pre>
</div>
{{ endif }}

{{ next_button }}

<style>
    .test-results {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
    }
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
</style>

{{ endblock }}