{% extends "whm/base.html" %}
{% block title %} Dashboard {% endblock title%}
{% block content %}
{% if update_available %}
    
        <div class="alert alert-primary alert-icon">
            ⚠️ A new version ({{ latest_version }}) is available! Please update.
          <a href="{% url 'update_check' %}" class="mb-1 btn btn-pill btn-success">Update now</a>
        </div>
   
{% endif %}
<div class="row mb-3">
    <div class="col-12 d-flex justify-content-end">
        <div class="form-group mb-0" style="width: 250px;">
		<input type="search" id="search" name="lookup_q" class="form-control bg-white" placeholder="Search for option..." autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">

        </div>
    </div>
</div>

<div class="row">
                  <div class="col-xl-6">
                    
                      <!-- Sessions By Device -->
                      <div class="card card-default">
                        <div class="card-header border-bottom">
                          <h2 class="mdi mdi-desktop-mac">Resource</h2>
                        </div>
                        <div class="card-body pt-6">
                         
							
                             
							 <div class="bar">
            <div class="label">CPU</div>
            <div class="bar-inner">
                <div class="bar-fill"  id="cpu" style="width: 0%; background-color: #4CAF50;">
                    <span id="cpup" class="bar-value">0%</span>
                </div>
				
				
				
            </div>
			  
        </div>
        <div class="bar">
            <div class="label">RAM</div>
            <div class="bar-inner">
                <div class="bar-fill" id="ram" style="width: 0%; background-color: #4CAF50;">
                    <span id="ramp" class="bar-value">0%</span>
                </div>
            </div>
        </div>
		
		 <div class="bar">
            <div class="label">DISK</div>
            <div class="bar-inner">
                <div class="bar-fill" id="disk" style="width: 0%; background-color: #4CAF50;">
                    <span id="diskp" class="bar-value">0%</span>
                </div>
            </div>
        </div>
         
                           <div class="bottom-border_right">
                          <div class="infotitle">Hostname</div>
                         <div class="infovalue">
    {{ host_name }}
    <a href="{% url 'change_hostname' %}" style="color:#ef6d19; margin-left: 8px;">
        <i class="mdi mdi-square-edit-outline"></i> change
    </a>
</div>

                          </div>
   
                         
                        </div>
                      </div>

                  </div>

                  <!-- Sessions by Device -->
                  <div class="col-xl-6">
                    
                      <!-- Sessions By Device -->
                      <div class="card card-default">
                        <div class="card-header border-bottom">
                          <h2 class="mdi mdi-desktop-mac">Statics</h2>
                        </div>
                        
                         	<div class="bottom-border_right">
                            <div class="infovalue">Server ip: <span>{{ip}}</span></div>
							</div>
						 <div class="bottom-border_right">
                            <div class="infovalue">Server time: <span>{{time}}</span></div>
							</div>
							 <div class="bottom-border_right">
                            <div class="infovalue">Server uptime: <span>{{uptime}}</span></div>
							</div>
						 	<div class="bottom-border_right">
                            <div class="infovalue">Open litespeed: <span>{{lite}}</span></div>
							</div>
							<div class="bottom-border_right">
                            <div class="infovalue">Load avg: <span id="xload">{{load}}</span></div>
							</div>
							
							<div class="bottom-border_right">
						    <div class="infovalue">OS: <span>{{osz}}</span></div>
                           </div>
                            
                        
                      </div>

                  </div>
                </div>



<div class="row">
                    <div class="col-xl-3 col-sm-6">
                      <div class="card card-default">
                        <div class="card-header">
                          <h2>{{total_user}}</h2>
                         
                          <div class="sub-title">
                            <span class="mr-1">Total User</span>
                            
                           
                          </div>
                        </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-sm-6">
                      <div class="card card-default">
                        <div class="card-header">
                          <h2>{{total_db}}</h2>
                          
                          <div class="sub-title">
                            <span class="mr-1">Total Database</span> 
                            
                          </div>
                        </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-sm-6">
                      <div class="card card-default">
                        <div class="card-header">
                          <h2>{{total_pkg}}</h2>
                         
                          <div class="sub-title">
                            <span class="mr-1">Total Pkg</span> 
                            
                          </div>
                        </div>
                       
                      </div>
                    </div>
                    <div class="col-xl-3 col-sm-6">
                      <div class="card card-default">
                        <div class="card-header">
                          <h2>{{total_domain}}</h2>
                          
                          <div class="sub-title">
                            <span class="mr-1">Total Domain</span> 
                            
                          </div>
                        </div>
                         </div>
                    </div>
                  </div>












     <div class="row" id="search_here">
                  <div class="col-md-12 col-xl-12">
                      
					  <div class="card card-default">
                      <div class="has-sub">
                          <div class="card-header border-bottom">
                            <h3><img src="/media/icon/user.svg" width="28px" height="28px" style="margin-right: 10px;" />  Users</h3>
                            <a class="" href="javascript:void(0)" data-toggle="collapse" data-target="#user-manu" aria-expanded="true" aria-controls="user-manu"><b class="caret"></b></a>
                          </div>
                          
                      </div>  
                      <div class="collapse show"  id="domain-manu" data-parent="">
                          <div class="card-body sub-menu ptop-6">
                        <div class="row">
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'user_list_all' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/users.svg" style="margin-right: 10px;" /> <span>List users</span></div></a></div>
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'add_user_all' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/person_add.svg" style="margin-right: 10px;" />  <span>Add User</span></div></a></div>
							
							 <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'package_list' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/package.svg" style="margin-right: 10px;" />  <span>Package</span></div></a></div>
                           
                        </div>
                      </div>
                      </div>
                    </div>
					  
					   <div class="card card-default">
                      <div class="has-sub">
                          <div class="card-header border-bottom">
                           <h3><img src="/media/icon/database.svg" width="28px" height="28px" style="margin-right: 10px;" />  Database</h3>
                            <a class="" href="javascript:void(0)" data-toggle="collapse" data-target="#database-manu" aria-expanded="true" aria-controls="database-manu"><b class="caret"></b></a>
                          </div>
                          
                      </div>  
                      <div class="collapse show"  id="database-manu" data-parent="">
                          <div class="card-body sub-menu ptop-6">
                        <div class="row">
                                  <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'phpmyadmins' %}" target="_blank"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/user.svg" style="margin-right: 10px;" /><span>PhpMyAdmin</span></div></a></div>
                           
                           
                        </div>
                      </div>
                      </div>
                    </div>
                    
					  
					  
                    <!-- manu -->
                    <div class="card card-default">
                      <div class="has-sub">
                          <div class="card-header border-bottom">
                            <h3><img src="/media/icon/domain.svg" width="28px" height="28px" style="margin-right: 10px;" />  Domains</h3>
                            <a class="" href="javascript:void(0)" data-toggle="collapse" data-target="#domain-manu" aria-expanded="true" aria-controls="domain-manu"><b class="caret"></b></a>
                          </div>
                          
                      </div>  
                      <div class="collapse show"  id="domain-manu" data-parent="">
                          <div class="card-body sub-menu ptop-6">
                        <div class="row">
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'domain_list_all' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/domain.svg" style="margin-right: 10px;" /> <span>Domains</span></div></a></div>
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'dns_all' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/dns.svg" style="margin-right: 10px;" />  <span>DNS</span></div></a></div>
                           
                        </div>
                      </div>
                      </div>
                    </div>
                    
                    <div class="card card-default">
                      <div class="has-sub">
                          <div class="card-header border-bottom">
                           <h3><img src="/media/icon/folder.svg" width="28px" height="28px" style="margin-right: 10px;" />  Files</h3>
                            <a class="" href="javascript:void(0)" data-toggle="collapse" data-target="#file-manu" aria-expanded="true" aria-controls="file-manu"><b class="caret"></b></a>
                          </div>
                          
                      </div>  
                      <div class="collapse show"  id="file-manu" data-parent="">
                          <div class="card-body sub-menu ptop-6">
                        <div class="row">
                           
                              <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'backup_whm' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/backup.svg" style="margin-right: 10px;" />  <span>Backup</span></div></a></div>
							<div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'backup_restore' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/backup.svg" style="margin-right: 10px;" />  <span>Backup Restore</span></div></a></div>
                           
                        </div>
                      </div>
                      </div>
                    </div>
                    
                    
                     <div class="card card-default">
                      <div class="has-sub">
                          <div class="card-header border-bottom">
                           <h3><img src="/media/icon/ssl.svg" width="28px" height="28px" style="margin-right: 10px;" />  Security</h3>
                            <a class="" href="javascript:void(0)" data-toggle="collapse" data-target="#security-manu" aria-expanded="true" aria-controls="security-manu"><b class="caret"></b></a>
                          </div>
                          
                      </div>  
                      <div class="collapse show"  id="security-manu" data-parent="">
                          <div class="card-body sub-menu ptop-6">
                        <div class="row">
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'domain_list_ssl_all' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/ssl.svg" style="margin-right: 10px;" /> <span>SSL</span></div></a></div>
							 <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'configserver' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/fire.svg?id=2" style="margin-right: 10px;" /><span>CSF (Firewall)</span></div></a></div>
							  <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'ufw' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/fire.svg?id=2" style="margin-right: 10px;" /><span>UFW (Firewall)</span></div></a></div>
						
							 <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'firewall_port' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/port.svg?id=2" style="margin-right: 10px;" /><span>Port (Firewall)</span></div></a></div>
							 <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'mode_sec' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/modes.svg?id=2" style="margin-right: 10px;" /><span>Modsecurity</span></div></a></div>
							  <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'panel_port' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/admin_panel.svg?id=2" style="margin-right: 10px;" /><span>Panel Port</span></div></a></div>
							  
							  <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'ssh_port' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/ssh.svg?id=2" style="margin-right: 10px;" /><span>SSH Port</span></div></a></div>
							   <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'panel_ssl' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/ssl.svg?id=2" style="margin-right: 10px;" /><span>Panel SSL</span></div></a></div>
							<div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'imunifyfav_whm' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/imunifyfav.png" style="margin-right: 10px;" /><span>Imunifyav antivirus</span></div></a></div>
							
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'whm_password_change' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/password.svg" style="margin-right: 10px;" /><span>password</span></div></a></div>
							
							
                           
                           
                        </div>
                      </div>
                      </div>
                    </div>
                    
                   
                   
                     <div class="card card-default">
                      <div class="has-sub">
                          <div class="card-header border-bottom">
                           <h3><img src="/media/icon/pc.svg" width="28px" height="28px" style="margin-right: 10px;" />  Server</h3>
                            <a class="" href="javascript:void(0)" data-toggle="collapse" data-target="#database-manu" aria-expanded="true" aria-controls="database-manu"><b class="caret"></b></a>
                          </div>
                          
                      </div>  
                      <div class="collapse show"  id="database-manu" data-parent="">
                          <div class="card-body sub-menu ptop-6">
                        <div class="row">
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'services' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/pc.svg" style="margin-right: 10px;" /> <span>Sevices</span></div></a></div>
                              <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'process_manager' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/memory.svg" style="margin-right: 10px;" /> <span>Process Manager</span></div></a></div>
							   <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'time_zone' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/timezone.svg" style="margin-right: 10px;" /><span>Time Zone</span></div></a></div>
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'reboot_server' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/reboot.svg" style="margin-right: 10px;" /><span>Restart</span></div></a></div>
							<div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'change_hostname' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/domain.svg" style="margin-right: 10px;" /><span>Change Hostname</span></div></a></div>
							<div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'system_status_view' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/memory.svg" style="margin-right: 10px;" /> <span>System Statistics</span></div></a></div>
							 
							
                           
                           
                        </div>
                      </div>
                      </div>
                    </div>
                    
                   
                    
                    
                    
                      <div class="card card-default">
                      <div class="has-sub">
                          <div class="card-header border-bottom">
                           <h3><img src="/media/icon/mail.svg" width="28px" height="28px" style="margin-right: 10px;" />  Email</h3>
                            <a class="" href="javascript:void(0)" data-toggle="collapse" data-target="#email-manu" aria-expanded="true" aria-controls="email-manu"><b class="caret"></b></a>
                          </div>
                          
                      </div>  
                      <div class="collapse show"  id="email-manu" data-parent="">
                          <div class="card-body sub-menu ptop-6">
                        <div class="row">
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'email_queue' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/mail.svg" style="margin-right: 10px;" /> <span>Email Queue </span></div></a></div>
                           
                           
                           
                        </div>
                      </div>
                      </div>
                    </div>
                    
                   
                   
                    
                   
                   
                           
                     <div class="card card-default">
                      <div class="has-sub">
                          <div class="card-header border-bottom">
                           <h3><img src="/media/icon/php.svg" width="28px" height="28px" style="margin-right: 10px;" />  PHP</h3>
                            <a class="" href="javascript:void(0)" data-toggle="collapse" data-target="#php-manu" aria-expanded="true" aria-controls="php-manu"><b class="caret"></b></a>
                          </div>
                          
                      </div>  
                      <div class="collapse show"  id="php-manu" data-parent="">
                          <div class="card-body sub-menu ptop-6">
                        <div class="row">
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'multi_php_ini' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/php.svg" style="margin-right: 10px;" /> <span>MultiPHP INI Editor</span></div></a></div>
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'multi_php_manager_all' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/php.svg" style="margin-right: 10px;" /><span>MultiPHP Manager</span></div></a></div>
                              <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'php_ext' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/php.svg" style="margin-right: 10px;" /><span>PHP Extenstion</span></div></a></div>
                         
                           <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'php_versions' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/version.svg" style="margin-right: 10px;" /><span>PHP Version</span></div></a></div>
						   
						     
                           
                        </div>
                      </div>
                      </div>
                    </div>
                    
                   
				   
				   
				    <div class="card card-default">
                      <div class="has-sub">
                          <div class="card-header border-bottom">
                           <h3><img src="/media/icon/node.svg" width="28px" height="28px" style="margin-right: 10px;" />  Node JS</h3>
                            <a class="" href="javascript:void(0)" data-toggle="collapse" data-target="#node-manu" aria-expanded="true" aria-controls="node-manu"><b class="caret"></b></a>
                          </div>
                          
                      </div>  
                      <div class="collapse show"  id="node-manu" data-parent="">
                          <div class="card-body sub-menu ptop-6">
                        <div class="row">
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'node_versions' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/version.svg" style="margin-right: 10px;" /> <span>Node JS Versions</span></div></a></div>
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'node_module_manage' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/node.svg" style="margin-right: 10px;" /><span>Node JS Modules</span></div></a></div>
                              
						     
                           
                        </div>
                      </div>
                      </div>
                    </div>
                    
				   
				    <div class="card card-default">
                      <div class="has-sub">
                          <div class="card-header border-bottom">
                           <h3><img src="/media/icon/settings.svg" width="28px" height="28px" style="margin-right: 10px;" />  Advance</h3>
                            <a class="" href="javascript:void(0)" data-toggle="collapse" data-target="#advance-manu" aria-expanded="true" aria-controls="advance-manu"><b class="caret"></b></a>
                          </div>
                          
                      </div>  
                      <div class="collapse show"  id="advance-manu" data-parent="">
                          <div class="card-body sub-menu ptop-6">
                        <div class="row">
                              <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'olsapp_whm' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/softaculous.png" style="margin-right: 10px;" /><span>OlsApp</span></div></a></div>
						   <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'composer_whm' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/composer.png" style="margin-right: 10px;" /><span>Composer</span></div></a></div>
						   
						     
                           
                        </div>
                      </div>
                      </div>
                    </div>
                    
				   
				   
			
                    
                    <div class="card card-default">
                      <div class="has-sub">
                          <div class="card-header border-bottom">
                           <h3><img src="/media/icon/conf.svg" width="28px" height="28px" style="margin-right: 10px;" />  Configuration</h3>
                            <a class="" href="javascript:void(0)" data-toggle="collapse" data-target="#configuration-manu" aria-expanded="true" aria-controls="configuration-manu"><b class="caret"></b></a>
                          </div>
                          
                      </div>  
                      <div class="collapse show"  id="configuration-manu" data-parent="">
                          <div class="card-body sub-menu ptop-6">
                        <div class="row">
						<div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'settings' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/settings.svg" style="margin-right: 10px;" /> <span>Settings</span></div></a></div>
                        
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'litespeed_conf' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/tune.svg" style="margin-right: 10px;" /> <span>LiteSpeed Tuning</span></div></a></div>
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'php_tune' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/php.svg" style="margin-right: 10px;" /><span>PHP Limit</span></div></a></div>
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'php_error_whm' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/error.svg" style="margin-right: 10px;" /><span>Error logs</span></div></a></div>
                          
						     
                           
                        </div>
                      </div>
                      </div>
                    </div>
                   
                    <div class="card card-default">
                      <div class="has-sub">
                          <div class="card-header border-bottom">
                           <h3><img src="/media/icon/account.svg" width="28px" height="28px" style="margin-right: 10px;" />  Account</h3>
                            <a class="" href="javascript:void(0)" data-toggle="collapse" data-target="#account-manu" aria-expanded="true" aria-controls="account-manu"><b class="caret"></b></a>
                          </div>
                          
                      </div>  
                      <div class="collapse show"  id="account-manu" data-parent="">
                          <div class="card-body sub-menu ptop-6">
                        <div class="row">
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'whm-profile' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/user.svg" style="margin-right: 10px;" /> <span>Profile</span></div></a></div>
                            <div class="col-sm-9 col-md-3 col-lg-3"><a href="{% url 'whm_logout' %}"><div class="d-flex justify-content-start align-items-center"><img src="/media/icon/logout.svg" style="margin-right: 10px;" /><span>Logout</span></div></a></div>
                            
                           
                           
                        </div>
                      </div>
                      </div>
                    </div>
                    
                    
                   


                  </div>
                 </div>
				
				
				

 <script>
  // Function to update the bar
function updateBar(elementId, percentage, spanId) {
    var barElement = document.getElementById(elementId);
    var spanElement = document.getElementById(spanId);
    
    // Update width of the bar
    barElement.style.width = percentage + "%";
    spanElement.textContent = percentage + "%";
    
    // Change color based on the percentage
    if (percentage > 80) {
        barElement.style.backgroundColor = '#F44336'; // Red for high usage
    } else if (percentage > 50) {
        barElement.style.backgroundColor = '#af3793'; // Yellow for moderate usage
    } else {
        barElement.style.backgroundColor = '#4CAF50'; // Green for normal usage
    }
}



function fetchSystemStatus() {
   
    // Make the response container visible
    setTimeout(function() {
      
        // Call the URL (replace '/your-url' with your actual URL)
        fetch('{% url 'system_status' %}', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok: ' + response.statusText);
            }
            return response.json(); // Parse response as JSON
        })
        .then(data => {
            // Ensure the data contains the required fields
            if (data.cpu_percent && data.ram_percent && data.disk_percent) {
                // Update the bars with the data from the response
                updateBar("cpu", data.cpu_percent, "cpup");
                updateBar("ram", data.ram_percent, "ramp");
                updateBar("disk", data.disk_percent, "diskp");
				var spanload = document.getElementById("xload");
				var loadAvg = data.load_avg; // Example: [0.01171875, 0.0224609375, 0.0]
if (Array.isArray(loadAvg)) {
    // Display load averages as "1 min: x, 5 min: y, 15 min: z"
    spanload.textContent = ` ${loadAvg[0].toFixed(2)}, ${loadAvg[1].toFixed(2)},  ${loadAvg[2].toFixed(2)}`;
} 
            } else {
                //console.error("Missing data in response:", data);
            }
        })
        .catch(error => {
           // console.error('Error:', error);
        });
    }, 0); // Call immediately (no delay)
}
    
const interval = setInterval(function() {
  fetchSystemStatus();
 }, 3000);





  document.getElementById('search').addEventListener('input', function() {
    const filter = this.value.toLowerCase();
    const container = document.getElementById('search_here');
    const cards = container.querySelectorAll('.card.card-default');

    cards.forEach(card => {
      // Get all visible text inside the card
      const text = card.textContent.toLowerCase();
      // Show or hide card depending on match
      if (text.includes(filter)) {
        card.style.display = '';
      } else {
        card.style.display = 'none';
      }
    });
  });




</script>

  
 <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .chart {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }

        .bar {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .label {
            
            text-align: right;
            padding-right: 10px;
            font-weight: bold;
        }

        .bar-inner {
            flex-grow: 1;
            height: 30px;
            background-color: #f0f0f0;
            position: relative;
            border-radius: 5px;
            overflow: hidden;
        }

        .bar-fill {
            height: 100%;
            background-color: #4CAF50;
            width: 0;
            transition: width 0.5s ease-in-out;
        }

        .bar-value {
            position: absolute;
            right: 10px;
            top: 0;
            bottom: 0;
            line-height: 30px;
            color: #000;
            font-weight: bold;
        }

        h2 {
            text-align: center;
        }
    </style>  
				
				
{% include "whm/footer.html" %}
{% endblock content %}