{{ extends "../layouts/base" }}

{{ block title() }}Debug Template Variables{{ end }}

{{ block body() }}
<div class="container mt-4">
    <h1>Template Variables Debug</h1>
    <div class="card">
        <div class="card-header">
            <h5>Available Variables</h5>
        </div>
        <div class="card-body">
            <pre id="debug-output">{{ dump(.) }}</pre>
        </div>
    </div>
</div>
{{ end }}

{{ block scripts() }}
<script>
    // Format the JSON for better readability
    document.addEventListener('DOMContentLoaded', function() {
        try {
            const debugOutput = document.getElementById('debug-output');
            const content = debugOutput.textContent;
            const obj = JSON.parse(content);
            debugOutput.textContent = JSON.stringify(obj, null, 2);
        } catch (e) {
            console.error('Failed to parse JSON:', e);
        }
    });
</script>
{{ end }}