<!DOCTYPE html>
<html lang="en" class="noVNC_loading">
<head>
    <title>Console: {{ hostname }}</title>

    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='novnc/app/images/icons/novnc.ico') }}">
    <meta name="theme-color" content="#313131">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="stylesheet" href="{{ url_for('static', filename='novnc/app/styles/constants.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='novnc/app/styles/base.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='novnc/app/styles/input.css') }}">

    <link rel="preload" as="image" href="{{ url_for('static', filename='novnc/app/images/info.svg') }}">
    <link rel="preload" as="image" href="{{ url_for('static', filename='novnc/app/images/error.svg') }}">
    <link rel="preload" as="image" href="{{ url_for('static', filename='novnc/app/images/warning.svg') }}">

    <script type="module" crossorigin="anonymous" src="{{ url_for('static', filename='novnc/app/error-handler.js') }}"></script>

    <script type="module">
        // Use absolute import paths for Flask's static serving
        const base = "{{ url_for('static', filename='novnc/') }}";

        // Dynamic import with the correct base URL
        const UI = (await import(base + "app/ui.js")).default;

        const mandatory = {
            host: window.location.hostname,
            port: window.location.port || (window.location.protocol === "https:" ? 443 : 80),
            path: "websockify?token={{ token }}",
            encrypt: window.location.protocol === "https:",
            autoconnect: true,
            resize: "scale",
            password: "{{ vnc_password }}",
        };

        let defaults = {};
        try {
            const resp = await fetch(base + "defaults.json");
            if (resp.ok) defaults = await resp.json();
        } catch (e) { /* use empty defaults */ }

        UI.start({ settings: { defaults: defaults, mandatory: mandatory } });

        const KeyTable = (await import(base + "core/input/keysym.js")).default;

        document.getElementById("noVNC_clipboard_send_button")
            .addEventListener("click", async function() {
                if (!UI.rfb) return;
                const btn = this;
                const text = document.getElementById("noVNC_clipboard_text").value;
                if (!text) return;
                btn.disabled = true;
                const total = text.length;
                btn.value = "Sending 0%";
                for (let i = 0; i < total; i++) {
                    const ch = text.charAt(i);
                    if (ch === "\n" || ch === "\r") {
                        UI.rfb.sendKey(KeyTable.XK_Return, "Enter");
                    } else if (ch === "\t") {
                        UI.rfb.sendKey(KeyTable.XK_Tab, "Tab");
                    } else {
                        UI.rfb.sendKey(ch.charCodeAt(0), "Unidentified");
                    }
                    if (i % 20 === 19) {
                        btn.value = "Sending " + Math.round(((i + 1) / total) * 100) + "%";
                        await new Promise(r => setTimeout(r, 10));
                    }
                }
                document.getElementById("noVNC_clipboard_text").value = "";
                btn.value = "Send";
                btn.disabled = false;
            });
    </script>
</head>

<body>

    <div id="noVNC_fallback_error" class="noVNC_center">
        <div>
            <div>noVNC encountered an error:</div>
            <br>
            <div id="noVNC_fallback_errormsg"></div>
        </div>
    </div>

    <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">

        <div id="noVNC_control_bar">
            <div id="noVNC_control_bar_handle" title="Hide/Show the control bar"><div></div></div>

            <div class="noVNC_scroll">

            <h1 class="noVNC_logo" translate="no"><span>no</span><br>VNC</h1>

            <hr>

            <input type="image" alt="Drag" src="{{ url_for('static', filename='novnc/app/images/drag.svg') }}"
                id="noVNC_view_drag_button" class="noVNC_button noVNC_hidden"
                title="Move/Drag viewport">

            <div id="noVNC_mobile_buttons">
                <input type="image" alt="Keyboard" src="{{ url_for('static', filename='novnc/app/images/keyboard.svg') }}"
                    id="noVNC_keyboard_button" class="noVNC_button" title="Show keyboard">
            </div>

            <input type="image" alt="Extra keys" src="{{ url_for('static', filename='novnc/app/images/toggleextrakeys.svg') }}"
                id="noVNC_toggle_extra_keys_button" class="noVNC_button"
                title="Show extra keys">
            <div class="noVNC_vcenter">
            <div id="noVNC_modifiers" class="noVNC_panel">
                <input type="image" alt="Ctrl" src="{{ url_for('static', filename='novnc/app/images/ctrl.svg') }}"
                    id="noVNC_toggle_ctrl_button" class="noVNC_button"
                    title="Toggle Ctrl">
                <input type="image" alt="Alt" src="{{ url_for('static', filename='novnc/app/images/alt.svg') }}"
                    id="noVNC_toggle_alt_button" class="noVNC_button"
                    title="Toggle Alt">
                <input type="image" alt="Windows" src="{{ url_for('static', filename='novnc/app/images/windows.svg') }}"
                    id="noVNC_toggle_windows_button" class="noVNC_button"
                    title="Toggle Windows">
                <input type="image" alt="Tab" src="{{ url_for('static', filename='novnc/app/images/tab.svg') }}"
                    id="noVNC_send_tab_button" class="noVNC_button"
                    title="Send Tab">
                <input type="image" alt="Esc" src="{{ url_for('static', filename='novnc/app/images/esc.svg') }}"
                    id="noVNC_send_esc_button" class="noVNC_button"
                    title="Send Escape">
                <input type="image" alt="Ctrl+Alt+Del" src="{{ url_for('static', filename='novnc/app/images/ctrlaltdel.svg') }}"
                    id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
                    title="Send Ctrl-Alt-Del">
            </div>
            </div>

            <input type="image" alt="Shutdown/Reboot" src="{{ url_for('static', filename='novnc/app/images/power.svg') }}"
                id="noVNC_power_button" class="noVNC_button"
                title="Shutdown/Reboot...">
            <div class="noVNC_vcenter">
            <div id="noVNC_power" class="noVNC_panel">
                <div class="noVNC_heading">
                    <img alt="" src="{{ url_for('static', filename='novnc/app/images/power.svg') }}"> Power
                </div>
                <input type="button" id="noVNC_shutdown_button" value="Shutdown">
                <input type="button" id="noVNC_reboot_button" value="Reboot">
                <input type="button" id="noVNC_reset_button" value="Reset">
            </div>
            </div>

            <input type="image" alt="Clipboard" src="{{ url_for('static', filename='novnc/app/images/clipboard.svg') }}"
                id="noVNC_clipboard_button" class="noVNC_button"
                title="Clipboard">
            <div class="noVNC_vcenter">
            <div id="noVNC_clipboard" class="noVNC_panel">
                <div class="noVNC_heading">
                    <img alt="" src="{{ url_for('static', filename='novnc/app/images/clipboard.svg') }}"> Clipboard
                </div>
                <p class="noVNC_subheading">
                    Paste text below and click Send to type it into the console.
                </p>
                <textarea id="noVNC_clipboard_text" rows=5></textarea>
                <input type="button" id="noVNC_clipboard_send_button" value="Send"
                    style="margin-top: 4px; width: 100%;">
            </div>
            </div>

            <input type="image" alt="Full screen" src="{{ url_for('static', filename='novnc/app/images/fullscreen.svg') }}"
                id="noVNC_fullscreen_button" class="noVNC_button noVNC_hidden"
                title="Full screen">

            <input type="image" alt="Settings" src="{{ url_for('static', filename='novnc/app/images/settings.svg') }}"
                id="noVNC_settings_button" class="noVNC_button"
                title="Settings">
            <div class="noVNC_vcenter">
            <div id="noVNC_settings" class="noVNC_panel">
                <div class="noVNC_heading">
                    <img alt="" src="{{ url_for('static', filename='novnc/app/images/settings.svg') }}"> Settings
                </div>
                <ul>
                    <li>
                        <label>
                            <input id="noVNC_setting_shared" type="checkbox"
                                   class="toggle">
                            Shared mode
                        </label>
                    </li>
                    <li>
                        <label>
                            <input id="noVNC_setting_view_only" type="checkbox"
                                   class="toggle">
                            View only
                        </label>
                    </li>
                    <li><hr></li>
                    <li>
                        <label>
                            <input id="noVNC_setting_view_clip" type="checkbox"
                                   class="toggle">
                            Clip to window
                        </label>
                    </li>
                    <li>
                        <label for="noVNC_setting_resize">Scaling mode:</label>
                        <select id="noVNC_setting_resize" name="vncResize">
                            <option value="off">None</option>
                            <option value="scale">Local scaling</option>
                            <option value="remote">Remote resizing</option>
                        </select>
                    </li>
                    <li><hr></li>
                    <li>
                        <div class="noVNC_expander">Advanced</div>
                        <div><ul>
                            <li>
                                <label for="noVNC_setting_quality">Quality:</label>
                                <input id="noVNC_setting_quality" type="range" min="0" max="9" value="6">
                            </li>
                            <li>
                                <label for="noVNC_setting_compression">Compression level:</label>
                                <input id="noVNC_setting_compression" type="range" min="0" max="9" value="2">
                            </li>
                            <li><hr></li>
                            <li>
                                <label for="noVNC_setting_repeaterID">Repeater ID:</label>
                                <input id="noVNC_setting_repeaterID" type="text" value="">
                            </li>
                            <li>
                                <div class="noVNC_expander">WebSocket</div>
                                <div><ul>
                                    <li>
                                        <label>
                                            <input id="noVNC_setting_encrypt" type="checkbox"
                                                   class="toggle">
                                            Encrypt
                                        </label>
                                    </li>
                                    <li>
                                        <label for="noVNC_setting_host">Host:</label>
                                        <input id="noVNC_setting_host">
                                    </li>
                                    <li>
                                        <label for="noVNC_setting_port">Port:</label>
                                        <input id="noVNC_setting_port" type="number">
                                    </li>
                                    <li>
                                        <label for="noVNC_setting_path">Path:</label>
                                        <input id="noVNC_setting_path" type="text" value="websockify">
                                    </li>
                                </ul></div>
                            </li>
                            <li><hr></li>
                            <li>
                                <label>
                                    <input id="noVNC_setting_reconnect" type="checkbox"
                                           class="toggle">
                                    Automatic reconnect
                                </label>
                            </li>
                            <li>
                                <label for="noVNC_setting_reconnect_delay">Reconnect delay (ms):</label>
                                <input id="noVNC_setting_reconnect_delay" type="number">
                            </li>
                            <li><hr></li>
                            <li>
                                <label>
                                    <input id="noVNC_setting_show_dot" type="checkbox"
                                           class="toggle">
                                    Show dot when no cursor
                                </label>
                            </li>
                            <li><hr></li>
                            <li>
                                <label>Logging:
                                    <select id="noVNC_setting_logging" name="vncLogging">
                                    </select>
                                </label>
                            </li>
                        </ul></div>
                    </li>
                    <li class="noVNC_version_separator"><hr></li>
                    <li class="noVNC_version_wrapper">
                        <span>Version:</span>
                        <span class="noVNC_version"></span>
                    </li>
                </ul>
            </div>
            </div>

            <input type="image" alt="Disconnect" src="{{ url_for('static', filename='novnc/app/images/disconnect.svg') }}"
                id="noVNC_disconnect_button" class="noVNC_button"
                title="Disconnect">

            </div>
        </div>

    </div>

    <div id="noVNC_hint_anchor" class="noVNC_vcenter">
        <div id="noVNC_control_bar_hint">
        </div>
    </div>

    <div id="noVNC_status"></div>

    <div class="noVNC_center">
        <div id="noVNC_connect_dlg">
            <p class="noVNC_logo" translate="no"><span>no</span>VNC</p>
            <div>
                <button id="noVNC_connect_button">
                    <img alt="" src="{{ url_for('static', filename='novnc/app/images/connect.svg') }}"> Connect
                </button>
            </div>
        </div>
    </div>

    <div class="noVNC_center noVNC_connect_layer">
    <div id="noVNC_verify_server_dlg" class="noVNC_panel"><form>
        <div class="noVNC_heading">
            Server identity
        </div>
        <div>
            The server has provided the following identifying information:
        </div>
        <div id="noVNC_fingerprint_block">
            Fingerprint:
            <span id="noVNC_fingerprint"></span>
        </div>
        <div>
            Please verify that the information is correct and press
            "Approve". Otherwise press "Reject".
        </div>
        <div class="button_row">
            <input id="noVNC_approve_server_button" type="submit" value="Approve">
            <input id="noVNC_reject_server_button" type="button" value="Reject">
        </div>
    </form></div>
    </div>

    <div class="noVNC_center noVNC_connect_layer">
    <div id="noVNC_credentials_dlg" class="noVNC_panel"><form>
        <div class="noVNC_heading">
            Credentials
        </div>
        <div id="noVNC_username_block">
            <label for="noVNC_username_input">Username:</label>
            <input id="noVNC_username_input">
        </div>
        <div id="noVNC_password_block">
            <label for="noVNC_password_input">Password:</label>
            <input id="noVNC_password_input" type="password">
        </div>
        <div class="button_row">
            <input id="noVNC_credentials_button" type="submit" value="Send credentials">
        </div>
    </form></div>
    </div>

    <div id="noVNC_transition">
        <div id="noVNC_transition_text"></div>
        <div>
        <input type="button" id="noVNC_cancel_reconnect_button" value="Cancel">
        </div>
        <div class="noVNC_spinner"></div>
    </div>

    <div id="noVNC_container">
        <textarea id="noVNC_keyboardinput" autocapitalize="off"
            autocomplete="off" spellcheck="false" tabindex="-1"></textarea>
    </div>

    <audio id="noVNC_bell">
        <source src="{{ url_for('static', filename='novnc/app/sounds/bell.oga') }}" type="audio/ogg">
        <source src="{{ url_for('static', filename='novnc/app/sounds/bell.mp3') }}" type="audio/mpeg">
    </audio>
</body>
</html>
