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

<center>

<div id="slides">
</div>

<div hx-get="/install/get-slide"
     hx-trigger="load, every 500ms"
     hx-target="#slides"
     hx-swap="innerHTML">
</div>

<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>
-->

<!--
<div hx-get="/install/status/percentage"
     hx-trigger="every 500ms"
     hx-target="#percentage">
</div>
-->

<div hx-get="/install/status/percentagediv"
     hx-trigger="load, every 200ms"
     hx-target="#percentagediv"
     hx-swap="outerHTML">
</div>

<div hx-get="/install/status/status_label"
     hx-trigger="every 400ms"
     hx-target="#status_label"
     hx-swap="innerHTML">
</div>

<div class="progress">
    <div id="progress-bar-outer" style="width: 100%;">
        <div class="progress-bar" id="percentagediv" style="width: 0%;"> &nbsp;</div>
    </div>
    <div class="install-label" id="status_label">
        <p>Initializing...</p>
    </div>
</div>

</div>
</div>

{% endblock %}