<!DOCTYPE html>
<html>
    <head>
        <title>SMARTBOILER: Energy Management Optimization for Home Assistant</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="{{ basename }}/static/style.css">
    </head>
    <body>
        <center>
            <h2 style="font-family: Helvetica;color: darkblue;">SMARTBOILER: Energy Management Optimization for Home Assistant</h2>
        </center>
        <div class="center">
            <div align="center" class="form">
                <form action="" method="get">
                    <h4 style="font-family: Helvetica;color: darkblue;">Use the buttons below to manually  launch different optimization tasks</h4>
                    <button type="button" id="perfect-optim" class="button button1" >Perfect Optimization</button>
                    <button type="button" id="dayahead-optim" class="button button2" >Day-ahead Optimization</button>
                    <h4 style="font-family: Helvetica;color: darkblue;">Use the button below to publish the optimized variables at the current timestamp</h4>
                    <button type="button" id="publish-data" class="button button1" >Publish Optimization Results</button>
                    <h4 style="font-family: Helvetica;color: darkblue;">Use the buttons below to fit, predict and tune a machine learning model for testing</h4>
                    <button type="button" id="forecast-model-fit" class="button button1" >ML forecast model fit</button>
                    <button type="button" id="forecast-model-predict" class="button button2" >ML forecast model predict</button>
                    <button type="button" id="forecast-model-tune" class="button button3" >ML forecast model tune</button>
                    <!-- h4 style="font-family: Helvetica;color: darkblue;">Pass any needed data dictionary here</h4>
                    <div class="input-group">
                      <textarea id="runtimeparams" name="runtimeparams" rows="6" cols="65"></textarea>
                    </div> -->
                    <br>
                </form>
                <br><br>
            </div>
        </div>
        {% for plot in injection_dict %}
            <div align="center">
                {{injection_dict[plot]}}
            </div> 
        {% endfor %}
        <footer class="footer">
            <center>
                <p style="font-family: Helvetica;color: darkblue;">&copy; MIT License | Copyright (c) 2021-2023 David HERNANDEZ</p>
            </center>
        </footer>
    </body>
    <script>
        async function performAction(action) {
            await fetch(`{{ basename }}/action/${action}`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: "{}",
            });
        }

        [
            "dayahead-optim",
            "forecast-model-fit",
            "forecast-model-predict",
            "forecast-model-tune",
            "perfect-optim",
            "publish-data",
        ].forEach((id) => document.getElementById(id).addEventListener('click', () => performAction(id)));
    </script>
</html>