{# Scripts component for experiment builder #}
{% if instrument and use_llm %}
    <script>
        const buttonIds = {{ ['generate'] | tojson }};
    </script>
    <script src="{{ url_for('static', filename='js/overlay.js') }}"></script>
{% endif %}

<script>
    const updateListUrl = "{{ url_for('design.update_list') }}";

    // Toggle visibility of line numbers
    function toggleLineNumbers(save = true) {
        const show = document.getElementById('toggleLineNumbers').checked;
        document.querySelectorAll('.line-number').forEach(el => {
            el.classList.toggle('d-none', !show);
        });

        if (save) {
            localStorage.setItem('showLineNumbers', show ? 'true' : 'false');
        }
    }

    function toggleCodeOverlay() {
        const overlay = document.getElementById("pythonCodeOverlay");
        const toggleBtn = document.getElementById("codeToggleBtn");
        overlay.classList.toggle("show");

        // Change arrow icon
        const icon = toggleBtn.querySelector("i");
        icon.classList.toggle("bi-chevron-left");
        icon.classList.toggle("bi-chevron-right");
    }

    // Restore state on page load
    document.addEventListener('DOMContentLoaded', () => {
        const savedState = localStorage.getItem('showLineNumbers');
        const checkbox = document.getElementById('toggleLineNumbers');

        if (savedState === 'true') {
            checkbox.checked = true;
        }

        toggleLineNumbers(false);  // don't overwrite localStorage on load

        checkbox.addEventListener('change', () => toggleLineNumbers());
    });
</script>

<script src="{{ url_for('static', filename='js/sortable_design.js') }}"></script> 