<html>
	<head>
		<title>3DPrinterOS Client</title>
		<link rel="stylesheet" type="text/css" href="/static/styles/style.css">
	</head>
	<body bgcolor=#003333>
        <script src="/static/scripts/parse_query.js"></script>
        <script>
        var ip = "";
        var backURL="/"
        document.addEventListener('DOMContentLoaded', function() {
            const queryParams = parseQuery(window.location.search);
            if ('ip' in queryParams) {
                ip = queryParams.ip;
            }
            if ('back' in queryParams) {
                backURL = queryParams.back;
            }
            var printerTypeSelect = document.querySelector('select[name="printer_type"]');
            var passwordInput = document.querySelector('input[name="password"]');
            var sshPasswordInput = document.querySelector('input[name="ssh_password"]');
            var forcedSNRInput = document.querySelector('input[name="serial_number"]');
            var printerIPInput = document.querySelector('input[name="printer_ip"]');

            printerTypeSelect.addEventListener('change', function() {
              var selectedOption = this.options[this.selectedIndex];
              var requiredFields = selectedOption.getAttribute('required_fields');

              if (requiredFields && requiredFields.includes('password')) {
                passwordInput.style.display = 'block';
              } else {
                passwordInput.style.display = 'none';
              }

              if (requiredFields && requiredFields.includes('ssh_password')) {
                sshPasswordInput.style.display = 'block';
              } else {
                sshPasswordInput.style.display = 'none';
              }

              if (requiredFields && (requiredFields.includes('forced_SNR') || requiredFields.includes('serial_number'))) {
                forcedSNRInput.style.display = 'block';
                //detectSerialNumberDiv.style.display = 'none';
              } else {
                forcedSNRInput.style.display = 'none';
                //detectSerialNumberDiv.style.display = 'block';
              }
              if (ip) {
                  printerIPInput.value = ip;
              }
            });

            printerTypeSelect.dispatchEvent(new Event('change'))
        });
        </script>
		<div id='host_version' align='right' style='align: right; color: #006666'>!!!URL!!! !!!VERSION!!!</div>
		<div class="block1">
			<div class="block2">
				3DPrinterOS Client
			</div>
			<center>
				<div class="block3">
					<p>
						Enter the printer's IP address and select its model.
					</p>
					<form action="/process_network_printer" method="post" style='display: inline' id="printer_type">
                        <div>
                            <input type="text" name="printer_ip" maxlength="128" placeholder="Enter the printer's IP address and select its model." class="text_field">
                        </div>
                        <div>
                            <input type="text" name="printer_port" maxlength="16" placeholder="Printer port (leave empty for auto-detect)." class="text_field">
                        </div>
                        <div>
                            <input type="text" name="password" maxlength="32" placeholder="Printer password" class="text_field" tooltip="Required for some printers (e.g. Bambu Lab access code, Klipper admin password). Leave empty if your printer has no authentication." style="display:none">
                        </div>
                        <div>
                            <input type="text" name="serial_number" maxlength="64" placeholder="Printer serial number" class="text_field" tooltip="Required for some printers (e.g. Bambu Lab). You can usually find it on the printer's label or in the manufacturer's slicer software." style="display:none">
                        </div>
                        <div>
                            <input type="text" name="ssh_password" maxlength="64" placeholder="Printer SSH password" class="text_field" style="display:none">
                        </div>
                        <div>
                            <font>
                                !!!TYPE_SELECT!!!
                            </font>
                        </div>
                        <!--<div id="detect_serial">-->
                        <!--    <label>Detect serial number</label>-->
                        <!--    <input type="checkbox" name="run_detector" id="run_detector" class="checkbox">-->
                        <!--</div>-->
                        <div>
                            <input type="button" onClick="location.href=backURL" value="Back" style="" class="big_button">
                            <input type="submit" value="Connect" style="background: #ff9900" class="big_button">
                        </div>
					</form>
				</div>
			</center>
		</div>
	</body>
</html>
