<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title><%= t("setup.title") %></title>

    <style>
        .lds-ring {
            display: inline-block;
            position: relative;
            width: 60px;
            height: 60px;
        }
        .lds-ring div {
            box-sizing: border-box;
            display: block;
            position: absolute;
            width: 48px;
            height: 48px;
            margin: 8px;
            border: 6px solid black;
            border-radius: 50%;
            animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
            border-color: black transparent transparent transparent;
        }
        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }
        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }
        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }
        @keyframes lds-ring {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<noscript><%= t("javascript-required") %></noscript>
<div class="container">
    <div id="setup-dialog" class="col-md-12 col-lg-8 col-xl-6 mx-auto" style="padding-top: 25px; font-size: larger; display: none;">
        <h1><%= t("setup.heading") %></h1>

        <div class="alert alert-warning" id="alert" style="display: none;">
        </div>

        <div id="setup-type" data-bind="visible: step() == 'setup-type'" style="margin-top: 20px;">
            <div class="radio" style="margin-bottom: 15px;">
                <label><input type="radio" name="setup-type" value="new-document" data-bind="checked: setupType">
                    <%= t("setup.new-document") %></label>
            </div>
            <div class="radio" style="margin-bottom: 15px;">
                <label><input type="radio" name="setup-type" value="sync-from-desktop" data-bind="checked: setupType">
                    <%= t("setup.sync-from-desktop") %></label>
            </div>
            <div class="radio" style="margin-bottom: 15px;">
                <label><input type="radio" name="setup-type" value="sync-from-server" data-bind="checked: setupType">
                    <%= t("setup.sync-from-server") %></label>
            </div>

            <button type="button" data-bind="disable: !setupTypeSelected(), click: selectSetupType" class="btn btn-primary"><%= t("setup.next") %></button>
        </div>

        <div data-bind="visible: step() == 'new-document-in-progress'">
            <h2><%= t("setup.init-in-progress") %></h2>

            <div style="display: flex; justify-content: flex-start; margin-top: 20px;">
                <div class="lds-ring" style="margin-right: 20px;">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>

                <div style="line-height: 60px;">
                    <p><%= t("setup.redirecting") %></p>
                </div>
            </div>
        </div>

        <div data-bind="visible: step() == 'sync-from-desktop'">
            <h2><%= t("setup_sync-from-desktop.heading") %></h2>

            <p><%= t("setup_sync-from-desktop.description") %></p>

            <ol>
                <li><%= t("setup_sync-from-desktop.step1") %></li>
                <li><%= t("setup_sync-from-desktop.step2") %></li>
                <li><%= t("setup_sync-from-desktop.step3") %></li>
                <li><%- t("setup_sync-from-desktop.step4", { host: '<span id="current-host"></span>'}) %></li>
                <li><%= t("setup_sync-from-desktop.step5") %></li>
                <li><%- t("setup_sync-from-desktop.step6", { link: `<a href="/">${t("setup_sync-from-desktop.step6-here")}</a>` }) %></li>
            </ol>

            <button type="button" data-bind="click: back" class="btn btn-secondary">Back</button>
        </div>

        <div data-bind="visible: step() == 'sync-from-server'">
            <h2><%= t("setup_sync-from-server.heading") %></h2>

            <p><%= t("setup_sync-from-server.instructions") %></p>

            <div class="form-group">
                <label for="sync-server-host"><%= t("setup_sync-from-server.server-host") %></label>
                <input type="text" id="syncServerHost" class="form-control" data-bind="value: syncServerHost" placeholder="<%= t("setup_sync-from-server.server-host-placeholder") %>">
            </div>
            <div class="form-group">
                <label for="sync-proxy"><%= t("setup_sync-from-server.proxy-server") %></label>
                <input type="text" id="sync-proxy" class="form-control" data-bind="value: syncProxy" placeholder="<%= t("setup_sync-from-server.proxy-server-placeholder") %>">

                <p><strong><%= t("setup_sync-from-server.note") %></strong> <%= t("setup_sync-from-server.proxy-instruction") %></p>
            </div>
            <div class="form-group">
                <label for="password"><%= t("setup_sync-from-server.password") %></label>
                <input type="password" id="password" class="form-control" data-bind="value: password" placeholder="<%= t("setup_sync-from-server.password-placeholder") %>">
            </div>

            <button type="button" data-bind="click: back" class="btn btn-secondary"><%= t("setup_sync-from-server.back") %></button>

            &nbsp;

            <button type="button" data-bind="click: finish" class="btn btn-primary"><%= t("setup_sync-from-server.finish-setup") %></button>
        </div>

        <div data-bind="visible: step() == 'sync-in-progress'">
            <h2><%= t("setup_sync-in-progress.heading") %></h2>

            <div class="alert alert-success"><%= t("setup_sync-in-progress.successful") %></div>

            <div><%= t("setup_sync-in-progress.outstanding-items") %> <strong id="outstanding-syncs"><%= t("setup_sync-in-progress.outstanding-items-default") %></strong></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */

    window.glob = {
        componentId: ''
    };

    window.syncInProgress = <%= syncInProgress ? 'true' : 'false' %>;
</script>

<!-- Required for correct loading of scripts in Electron -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<script src="<%= assetPath %>/node_modules/jquery/dist/jquery.min.js"></script>
<script src="<%= assetPath %>/node_modules/jquery-hotkeys/jquery-hotkeys.js"></script>

<link href="<%= assetPath %>/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="<%= assetPath %>/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<script src="<%= assetPath %>/node_modules/knockout/build/output/knockout-latest.js"></script>

<script src="<%= appPath %>/setup.js" crossorigin type="module"></script>
<link href="<%= assetPath %>/stylesheets/theme-light.css" rel="stylesheet" />
<link href="<%= assetPath %>/stylesheets/theme-next.css" rel="stylesheet" />
<link href="<%= assetPath %>/stylesheets/style.css" rel="stylesheet">
</body>
</html>
