<!DOCTYPE html>
<html>
    <head>
        <title>Hestia Web Portal</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="/main.css">
    </head>
    <body onload="refreshData()" class="container">
        <%- include('trial.html') -%>
        <div id="title" class="text-center mb-4">
            <a href='./'>Hestia Web Portal</a>
        </div>
        <div id="status" class="row">
            <!--
                | Auger     | rows[0].cells[1] | On Time  | rows[0].cells[3] |
                | Feed Rate | rows[1].cells[1] | Off Time | rows[1].cells[3] |
            -->

            <table id="status-table" class="table table-bordered col-sm-12 col-md-6">
                <tr>
                    <td>Auger</td>
                    <td></td>
                    <td>On Time</td>
                    <td></td>
                </tr>
                <tr>
                    <td>Feed Rate</td>
                    <td></td>
                    <td>Off Time</td>
                    <td></td>
                </tr>
            </table>            
        </div>
        
        
        
        <div class="controls-container">
            <form action="/" method="post">
                <!-- Start | Shutdown | Reload Settings -->
                <div class="button-container d-flex justify-content-between">
                    <input class="btn btn-outline-secondary" type="submit" id="ignite" value="Enable Auger" name="start">
                    <input class="btn btn-outline-secondary" type="submit" id="shutdown" value="Disable Auger" name="shutdown">
                </div>
                <!-- Set feed rates -->
                <div class="form-group">
                    <label for="feedRate">Feed Rate: </label>
                    <select name="feedRate" class="form-control">
                        <option value="600">Low</option>
                        <option value="800">Medium</option>
                        <option value="1000">High</option>
                    </select>
                </div>
                <div class="button-container d-flex justify-content-end">
                    <input class="btn btn-outline-secondary" type="submit" id="reload" value="Reload" name="reload">
                </div>
            </form>
        </div>
        <div class="text-center my-4">
            <img src="./dancing_jesus.gif" class="img-fluid">
        </div>
        <div id="log-container" class="row">
            <iframe id="log-area" src="log.txt" class="col-sm-12 col-md-6"></iframe>
        </div>
        <div class="controls-container">
            <form action="/" method="POST">
                <input class="btn btn-danger" type="submit" id="quit" value="Quit!!" name="quit" style="visibility: hidden;">
            </form>
        </div>
        <script src="./main.js"></script>
    </body>
</html>