{% extends 'base.html.twig' %}
{% block body %}
    <script>
const setup_commands = [
    for {{ cmd in setup_commands }}; do
    { "url":{{ cmd.url }}, "output": {{ cmd.output }} },
    {{ endfor }}
];

redirect_error="{{ setup_url }}";


function endCommands(success) {
    element = document.getElementById("setup-command");
    p = document.createElement("p");
    if (success) {
        p.innerText = "Commands executed successfully!";
    } else {
        p.innerText = "Executing commands failed!";
    }
    element.appendChild(p);
}

function appendCommand(n) {
    element = document.getElementById("setup-command");
    p = document.createElement("p");
    span = document.createElement("span");
    span.innerText = setup_commands[n]["output"];
    iframe = document.createElement("iframe");
    iframe.setAttribute("id","setup-command-" + n);
    iframe.setAttribute("onload","onCommandLoaded(n);");
    iframe.setAttribute("src",setup_commands[n]["url"]);
    p.appendChild(span);
    p.appendChild(iframe);
}

function onCommandLoaded(n) {
    let element = document.getElementById("setup-command");
    let cmd_iframe = document.getElementById("setup-command-" + n);
    let cmd_result = iframe.contentWindow.document.getElementById("command-result");
    if (cmd_result === "SUCCESS") {
        next = n + 1;
        if (n < setup_commands.length) {
            appendCommand(next);
        } else {
            endCommands(true);
            document.getElementById("commands-finished-button").removeAttribute("disabled");
        }
    } else {
        endCommands(false);
        let button = document.getElementById("commands-finished-button");
        button.innerText("Return to setup");
        button.removeAttribute("disabled");
    }
}
function onCommandInit()
{
    if (setup_commands.length > 0) {
        appendCommand(0);
    } else {
        endCommands(true);
    }
}
    </script>
    <h1>Running Setup</h1>
    <div class="command-output">
        <code id="setup-commands" onload="">
            <p id="null-command">Running commands...</p>
        </code>
    </div>
    <button id="commands-finished-button" onclick="window.replace(\"{{ success_url }}\")" disabled>Finish</button>
{% endblock %}