<div id="info">
    <div style="background:url(images/network.png); background-size:32px; background-repeat:no-repeat; background-position: 20px center;">
        <center><h1>Datalogger Configuration</h1></center>
    </div>
</div>
<div>
    <b><br>
    <center>
        The datalogger functionality can be configured from here<br>
    </center><br>

    <div class="formLayoutfull">
        <form action="datalogger.lua" method="post">
            <h2>Surface Config</h2>
            <label for="mqttserver">Server IP Address:</label>
            <input type="text" name="mqttserver" value="{{mqtt_server}}"/>
            <br/>
            <hr/>
            <br/>
            <h2>Machine Config</h2>
            <label for="machinetype">Machine Type:</label>
            <input type="text" name="machinetype" value="{{machine_type}}"/>
            <br/>
            <label for="machineid">Machine Unique ID:</label>
            <input type="text" name="machineid" value="{{machine_id}}"/>
            <br/>
            <label for="dbcdata">Current DBC:</label>
            <input type="text" name="dbcdata" value="{{dbc_description}} : {{dbc_version}}" disabled/>
            <a href="config/cando.dbc" download="datalogger.dbc">
            <input type="button" value="Download DBC"/>
            </a>
            <br/>
            <hr/>
            <br/>
            {% if saved == true then %}
            <br><b><img src="images/ok.png"/> Changes saved, but may take a few seconds to take effect.</b><br><br>
            
            {% end %}
            <input type="Submit" name="submitButton" value="Save and Apply" {{buttonControl}}/>

        </form>
        <br/>
        <hr/>
        <br/>
        <form method="post" action="datalogger.lua" enctype="multipart/form-data">
            <label for="dbcfile">Choose DBC File</label>
            <input id="dbcfile" type="file" name="dbcfile"/>
            <button>Upload DBC</button>
            {% if dbc_saved == true then %}
            <br/><br/><b><img src="images/ok.png"/> DBC file updated. Changes may take a few seconds to take effect</b><br/><br/>
            {% end %}

        </form> 
    </div>

</div>