{% extends "layout.html" %}
{% block body %}

<center>
<p style="position: absolute: left: 45px; top: 10px;">
<big><big>
    Installing...
</big></big>
</p>

<br />

<img style="width: 400px; padding: 20px;" src="/static/slide1.png" /> <br />
<p>
    Installing system, the rest of the process is automated.
</p>

<p style="margin: 20px;">
<input style="background-color: #777777;" type="checkbox"
       id="reboot" name="reboot" value="reboot" checked>
<label for="reboot"> Reboot automatically when ready  </label></p><br>

<div id="output"></div>

<!-- Hidden input to track last line -->
<div id="last-line-container">
     <input type="hidden" id="last-line" name="last_line" value="0">
</div>

<!-- Poller -->
<div hx-get="/install/status"
     hx-trigger="load, every 1s"
     hx-include="#last-line"
     hx-swap-oob="true"
     hx-target="this"
     hx-ext="json-enc"
     hx-vars="{}">
</div>


</center>

<div style="position: absolute; padding: 10px; background-color: #26495e; left: 40px;
            right: 40px; bottom: 40px; height: text-align: middle;">
<center> Initializing... </center>
</div>

</div>
</div>
</div>

{% endblock %}