<!-- Right Control Panel -->
<div id="right_panel">
    <!-- Each section has a clickable label that expands the view area. -->
    <!-- followed by a div to be displayed in that view area. -->
    <button class="collapsible bg_red" id="alerts_btn">Alerts</button>
    {% include "alerts_hud.html" %}
    <button class="collapsible bg_blue">Exchange Info</button>
    {% include "exchange_info_hud.html" %}
    <button class="collapsible bg_blue">Indicators</button>
    {% include "indicators_hud.html" %}
    <button class="collapsible bg_blue">Signals</button>
    {% include "signals_hud.html" %}
    <button class="collapsible bg_blue">Formations</button>
    {% include "formations_hud.html" %}
    <button class="collapsible bg_blue">Strategies</button>
    {% include "strategies_hud.html" %}
    <button class="collapsible bg_blue">Statistics</button>
    {% include "statistics_hud.html" %}
    <button class="collapsible bg_blue">Backtesting</button>
    {% include "backtesting_hud.html" %}
    <button class="collapsible bg_blue">Trade</button>
    {% include "trading_hud.html" %}

    <!-- Here is the code that controls the behavior to the view areas.-->
    <script>
        var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i++) {
            coll[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var content = this.nextElementSibling;
                if (this.classList.contains("active")) {
                    // Expand to full content height (max 400px from CSS)
                    content.style.maxHeight = Math.min(content.scrollHeight, 400) + "px";
                } else {
                    // Collapse to preview height (60px from CSS)
                    content.style.maxHeight = null;
                }
            });
        }
    </script>

</div> <!-- End Right Control Panel -->
