{% extends "base.html" %}

{% block title %}Installing… · Furtka Installer{% endblock %}
{% block head_extra %}
{# Fallback for users with JS disabled — otherwise the JS below takes over
   and updates in-place so the log <details> doesn't re-collapse. #}
<noscript>
{% if progress.status == "running" %}<meta http-equiv="refresh" content="3">{% endif %}
</noscript>
{% endblock %}
{% block step_indicator %}<span class="step-indicator">Installing</span>{% endblock %}

{% block content %}
<h1 id="install-heading">
{% if progress.status == "done" %}Furtka is ready
{% elif progress.status == "error" %}Installation hit a snag
{% else %}Installing Furtka{% endif %}
</h1>
<p class="lede" id="install-lede">
{% if progress.status == "done" %}Installation finished. Two more steps and Furtka is running from its own disk.
{% elif progress.status == "error" %}Something went wrong. Open the details below and share them so we can help.
{% else %}This takes a few minutes. Don't close this page or power off the machine.{% endif %}
</p>

{% if progress.status == "done" %}
{# The USB-stick step has to be read *before* the click: the machine reboots
   3 s after it, and most BIOSes boot the stick before the disk — so the
   installer would just come back. Seen on the first hardware bench. #}
<ol class="next-steps">
    <li><strong>Pull out the USB stick</strong> (or eject the installer ISO in your VM).
        If it stays in, the computer will start this installer again instead of Furtka.</li>
    <li>Click the button below. The computer restarts and comes back as
        <strong>http://{{ hostname }}.local</strong> in about a minute.</li>
</ol>
<form method="post" action="{{ url_for('install_reboot') }}"
      onsubmit="return confirm('USB stick removed? Click OK to restart the computer.');">
    <div class="actions">
        <button type="submit" class="btn btn-primary">USB stick is out — restart now</button>
    </div>
</form>
{% endif %}

<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ progress.percent }}">
    <div id="progress-bar" class="progress-bar{% if progress.status == 'error' %} progress-bar-error{% endif %}{% if progress.status == 'done' %} progress-bar-done{% endif %}" style="width: {{ progress.percent }}%;"></div>
</div>
<p class="progress-phase"><span id="progress-phase">{{ progress.phase }}</span> · <span id="progress-percent">{{ progress.percent }}</span>%</p>

<details class="log-details">
    <summary>Show details</summary>
    <pre id="install-log" class="log">{{ log or "(waiting for install to start)" }}</pre>
</details>

<script>
(function () {
    var initialStatus = {{ progress.status | tojson }};
    if (initialStatus !== 'running') return;

    var bar = document.getElementById('progress-bar');
    var phaseEl = document.getElementById('progress-phase');
    var percentEl = document.getElementById('progress-percent');
    var logEl = document.getElementById('install-log');
    var headingEl = document.getElementById('install-heading');
    var ledeEl = document.getElementById('install-lede');

    var HEADINGS = {
        done: 'Furtka is ready',
        error: 'Installation hit a snag',
    };
    var LEDES = {
        done: 'Installation finished. Remove the USB / eject the installer image, then reboot.',
        error: 'Something went wrong. Open the details below and share them so we can help.',
    };

    function tick() {
        fetch('{{ url_for("install_log_json") }}', { cache: 'no-store' })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                var p = data.progress;
                bar.style.width = p.percent + '%';
                phaseEl.textContent = p.phase;
                percentEl.textContent = p.percent;
                if (logEl.textContent !== data.log) {
                    var atBottom = logEl.scrollTop + logEl.clientHeight >= logEl.scrollHeight - 8;
                    logEl.textContent = data.log || '(waiting for install to start)';
                    if (atBottom) logEl.scrollTop = logEl.scrollHeight;
                }
                if (p.status === 'done') {
                    // Reload so the server-rendered Done state (with the
                    // Reboot button) replaces the running-state markup.
                    window.location.reload();
                    return;
                }
                if (p.status === 'error') {
                    bar.classList.add('progress-bar-error');
                    headingEl.textContent = HEADINGS.error;
                    ledeEl.textContent = LEDES.error;
                    return;
                }
                setTimeout(tick, 3000);
            })
            .catch(function () { setTimeout(tick, 3000); });
    }
    setTimeout(tick, 3000);
})();
</script>
{% endblock %}