<!DOCTYPE html>
<html lang="en">
<head>
    <title>Panel-1.0.0 - Manage</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="cookie.js"></script>
</head>
<body>
    <div class="nav_bar">
        <div class="nav_bar_instance_list" id="nav_bar_instance_list">

        </div>
        <div class="nav_bar_user">
            <img style="width: 1.5vw;" src="img/user.png">
            <div style="display: flex; flex-direction: column;">
                <a class="navbar_user_name" id="navbar_user_name"></a>
                <a class="navbar_user_id" id="navbar_user_id"></a>
            </div>
            <img class="nav_bar_user_controls" src="img/settings.png">
            <img class="nav_bar_user_controls" src="img/logout.png">
        </div>
    </div>
    <div style="background-color: rgba(60, 60, 70, 1); width: 5px; height: 100vh;"></div>
    <div class="instance" id="instance">
        <div id="instance_panel" class="instance_panel">
            
            <div class="instance_console">
                <div id="console_text_div" class="console_text_div">
                    <a id="console_text"></a>
                </div>
                
                <div style="background-color: rgba(60, 60, 70, 1); width: 100%; height: 5px;"></div>
                
                <div class="console_text_input_div">
                    <input placeholder="Console command" type="text" id="console_text_input"></input>
                    <div style="background-color: rgba(60, 60, 70, 1); width: 5px; height: 100%;"></div>
                    <button onclick="console_ws_command(document.getElementById('console_text_input').value); document.getElementById('console_text_input').value = ''">Send</button>
                </div>
            </div>
        </div>
        <div id="instance_control" class="instance_control">
            <div class="instance_control_top">
                <div class="instance_info">
                    <img id="instance_icon" class="instance_info_icon">
                    <div class="instance_info_details">
                        <a id="instance_name"></a>
                        <a id="instance_type"></a>
                        <a id="instance_status"></a>
                    </div>
                </div>
    
    
                <div class="instance_settings">
                    <button id="button_main" >Main / Console</button>
                    <button id="button_settings" >Settings</button>
                </div>
            </div>

            <div class="instance_control_bottom">
                <div id="instance_custom_control" class="instance_custom_control">
                </div>
                
                <div class="instance_stat_cpu">
                    <img src="img/cpu.png">
                    <div>
                        <a id="cpu_info"></a>
                        <a id="cpu_type"></a>
                        <div class="stat_bar_border">
                            <div id="cpu_bar" style="background-color: #3db9d8;"></div>
                        </div>
                    </div>
                </div>
                
                <div class="instance_stat_ram">
                    <img src="img/ram.png">
                    <div>
                        <a id="ram_info"></a>
                        <a id="ram_type"></a>
                        <div class="stat_bar_border">
                            <div id="ram_bar" style="background-color: #d474e7;"></div>
                        </div>
                    </div>
                </div>
                
                <div class="instance_stat_storage">
                    <img src="img/storage.png">
                    <div>
                        <a id="storage_info"></a>
                        <a id="storage_type"></a>
                        <div class="stat_bar_border">
                            <div id="storage_bar" style="background-color: #3ae97d;"></div>
                        </div>
                    </div>
                </div>
    
                <div class="control_button_div">
                    <button class="control_button_1" style="border-color: #46C800;">Start</button>
                    <button class="control_button_1" style="border-color: #FF9614;">Restart</button>
                    <button class="control_button_1" style="border-color: #FF3232;">Shutdown</button>
                </div>
                <div class="control_button_div">
                    <button class="control_button_2" style="border-color: #B032FF;" >Force-Reset</button>
                    <button class="control_button_2" style="border-color: #B032FF;" >Force-Stop</button>
                </div>
            </div>
                
        </div>
    </div>
</body>
<script src="instance.js"></script>
<script src="user.js"></script>
<script src="ws.js"></script>
</html>