<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org" id = "html" theme = "light" enableFog = "true" backgroundColor = "default">
    <head>
        <meta charset = "UTF-8">
        <title>Welcome</title>
        <link rel = "shortcut icon" type = "image/x-icon" th:href = "@{/img/ico/favicon.ico}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/assets/bootstrap.min.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/assets/dhtmlx.light.min.css}" title = "light" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/assets/dhtmlx.dark.min.css}" title = "dark" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/animations.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/colors.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/dimensions.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/fonts.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/gradients.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/layout.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/shadows.css}" />
        <link rel = "stylesheet" type = "text/css" th:href = "@{/css/themes.css}" />
        <script type = "text/javascript" th:src = "@{/js/assets/dhtmlx.min.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/assets/three.min.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/assets/vanta.min.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/background.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/globals.js}"></script>
        <script type = "text/javascript" th:src = "@{/js/setup.js}"></script>
        <script type = "text/javascript" th:inline = "javascript"> globalsInitialization(); </script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var input = document.getElementById('port');
                input.addEventListener('input', function() {
                    this.value = this.value.replace(/[^0-9]/g, '');  // Remove all non-numeric characters
                    if (this.value.length > 5) {
                        this.value = this.value.slice(0, 5);  // Limit to 5 digits
                    }
                });
            });
        </script>
    </head>
    <body id = "background">
        <script type = "text/javascript" th:inline = "javascript"> backgroundInitialization(); </script>
        <div class = "container setup">
            <div class = "setup-div">
                <div class = "logo">WARD</div>
                <div class = "logo-description">SERVER DASHBOARD</div>
                <div class = "clouds">
                    <img class = "first" th:src = @{/img/logo/clouds/left.png} />
                    <img class = "second" th:src = @{/img/logo/clouds/right.png} />
                </div>
                <img class = "background" th:src = @{/img/logo/background.png} />
                <div class = "form">
                    <div class = "form-squares-grid">
                        <div class = "first"></div>
                        <div class = "second"></div>
                        <div class = "third"></div>
                    </div>
                    <div class = "label-main-settings">MAIN SETTINGS</div>
                    <div class = "main-settings">
                        <input id = "server-name" type = "text" maxlength = "10" placeholder = "Server Name" />
                        <div class = "main-settings-underline first"></div>
                    </div>
                    <div class = "label-additional-settings">ADDITIONAL SETTINGS</div>
                    <div class = "additional-settings">
                        <div class = "button-squares-grid">
                            <div id = "light-theme-square" class = "first"></div>
                            <div id = "dark-theme-square" class = "second"></div>
                        </div>
                        <div class = "theme-buttons">
                            <input id = "light-theme" class = "first" type = "button" value = "LIGHT THEME" />
                            <input id = "dark-theme" class = "second" type = "button" value = "DARK THEME" />
                        </div>
                        <label class = "label-additional-settings"><span>ENABLE BACKGROUND FOG</span><input id = "fog-toggle" class = "fog-toggle" type = "checkbox" name = "enableFog" checked></label>
                        <label class = "label-additional-settings" title="Disable Fog to select"><span>SELECT BACKGROUND COLOR</span><input id = "color-selector" class = "color-selector" type = "color" value="#e5e5e5" disabled></label>
                        <input id = "port" class = "port" type = "text" maxlength = "5" placeholder = "Application Port" />
                    </div>
                    <input id = "submit" class = "submit" type = "button" value = "LAUNCH" />
                </div>
            </div>
        </div>
        <script type = "text/javascript" th:inline = "javascript"> setupInitialization(); </script>
    </body>
</html>