<html>
    <head>
        <link rel="icon" href="{{ url_for('static', filename='brightertrades_favicon.ico') }}" type="image/x-icon">

        <!-- Load style sheets and set the title -->
        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='brighterStyles.css') }}?v=2">
        <title>{{ title }}</title>
        <!-- Load lightweight charts -->
        <script src="{{ url_for('static', filename='lightweight-charts.standalone.production.js') }}"></script>
        <!-- Load Blockly -->
        <script src="{{ url_for('static', filename='blockly/blockly-develop/dist/blockly_compressed.js') }}"></script>
        <script src="{{ url_for('static', filename='blockly/blockly-develop/dist/blocks_compressed.js') }}"></script>
        <script src="{{ url_for('static', filename='blockly/blockly-develop/dist/python_compressed.js') }}"></script>
        <script src="https://cdn.socket.io/4.5.4/socket.io.min.js" crossorigin="anonymous"></script>

        <!-- The server passed initiation data to the HTML. This loads it into the DOM.  -->
        <script type="text/javascript">
            function get_init_data(vars) {return vars}
            bt_data = get_init_data({{js_data|tojson}});
        </script>
        <!-- Load javascript  -->
        <script src="{{ url_for('static', filename='exchanges.js') }}"></script>
        <script src="{{ url_for('static', filename='user.js') }}"></script>
        <script src="{{ url_for('static', filename='Alerts.js') }}"></script>
        <script src="{{ url_for('static', filename='Strategies.js') }}"></script>
        <script src="{{ url_for('static', filename='data.js') }}"></script>
        <script src="{{ url_for('static', filename='indicators.js') }}"></script>
        <script src="{{ url_for('static', filename='charts.js') }}"></script>
        <script src="{{ url_for('static', filename='communication.js') }}"></script>
        <script src="{{ url_for('static', filename='controls.js') }}"></script>
        <script src="{{ url_for('static', filename='signals.js') }}"></script>
        <script src="{{ url_for('static', filename='formation_overlay.js') }}"></script>
        <script src="{{ url_for('static', filename='formations.js') }}"></script>
        <script src="{{ url_for('static', filename='chart_analysis.js') }}?v=2"></script>
        <script src="{{ url_for('static', filename='trade.js') }}"></script>
        <script src="{{ url_for('static', filename='backtesting.js') }}"></script>
        <script src="{{ url_for('static', filename='Statistics.js') }}?v=1"></script>
        <script src="{{ url_for('static', filename='Account.js') }}"></script>
        <script src="{{ url_for('static', filename='general.js') }}"></script>
   </head>

    <body>
    <!-- Hidden Div elements containing markup for popup context and forms.-->
        {% include "backtest_popup.html" %}
        {% include "new_trade_popup.html" %}
        {% include "new_strategy_popup.html" %}
        {% include "ai_strategy_dialog.html" %}
        {% include "new_signal_popup.html" %}
        {% include "signal_type_popup.html" %}
        {% include "external_indicator_popup.html" %}
        {% include "new_indicator_popup.html" %}
        {% include "trade_details_popup.html" %}
        {% include "indicator_popup.html" %}
        {% include "edit_indicator_popup.html" %}
        {% include "exchange_config_popup.html" %}
        {% include "account_settings_dialog.html" %}
        <!-- Container for the whole user app -->
        <div id="master_panel" class="master_panel"
             style="width 1550px; height 800px;display: grid;
             grid-template-columns: 1000px 550px; grid-template-rows: 50px 500px 100px 100px 100px 100px;">
            <!-- Application Header -->
            <div id="app_header">
                <H1 id="app_title">{{ title }}</H1>
                {% include "login.html" %}
            </div><!-- end Application Header -->
            <!-- The Main price chart -->
            {% include "price_chart.html" %}
            <!-- Containers for Indicators that require their own charts. -->
            <div id="chart2"></div>
            <div id="chart3"></div>
            <div id="chart4"></div>
            <div id="chart5"></div> <!-- Candlestick Patterns chart -->
            <!-- This is the control panel on the right of the screen -->
            {% include "control_panel.html" %}
        </div><!-- End Master Panel --->

    </body>
</html>
