{% extends "main.html" %}

{% block header %}
  <div class="row mb-2">
    <div class="col-sm-6">
      <h1>{{ page_title | safe }} <span id="instance_title"></span></h1>
    </div>
    <div class="col-sm-6">
      <a class="btn btn-outline-primary dropdown-toggle float-sm-right ml-2 mr-4" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Actions">
        Instance Actions
      </a>
      <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
        <!--<div class="dropdown-header">Options:</div>-->
        <a class="dropdown-item text-primary" style="display: none;" onclick="changeItemState(instance, 'start')" id="startLink"><i class="fas fa-play fa-sm fa-fw mr-2"></i>Start</a>
        <a class="dropdown-item text-primary" style="display: none;" onclick="changeItemState(instance, 'stop')" id="stopLink"><i class="fas fa-stop fa-sm fa-fw mr-2"></i>Stop</a>
        <a class="dropdown-item text-primary" style="display: none;" onclick="changeItemState(instance, 'unfreeze')" id="unfreezeLink"><i class="fas fa-pause fa-sm fa-fw mr-2"></i>UnFreeze</a>
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item" onclick="editInstance()" id="editInstanceOption"><i class="fas fa-edit fa-sm fa-fw mr-2"></i>Edit</a>
        <a class="dropdown-item" onclick="changeItemState(instance, 'restart')" id="restartInstanceOption"><i class="fas fa-redo fa-sm fa-fw mr-2"></i>Restart</a>
        <a class="dropdown-item" onclick="changeItemState(instance, 'stop', true)" id="stopInstanceForcefullyOption"><i class="fas fa-plug fa-sm fa-fw mr-2"></i>Force Stop</a>
        <a class="dropdown-item" onclick="changeItemState(instance, 'freeze')" id="freezeInstanceOption"><i class="fas fa-pause fa-sm fa-fw mr-2"></i>Freeze</a>
        <a class="dropdown-item" href="#" data-toggle="modal" data-target="#createSnapshotModal" id="snapshotInstanceOption"><i class="fas fa-clone fa-sm fa-fw mr-2"></i>Snapshot</a>
        <a class="dropdown-item" onclick="loadAttachProfileModal()" id="attachProfileOption"><i class="fas fa-address-card fa-sm fa-fw mr-2"></i>Attach Profile</a>
        <a class="dropdown-item" onclick="loadDetachProfileModal()" id="detachProfileOption"><i class="fas fa-address-card fa-sm fa-fw mr-2"></i>Detach Profile</a>
        <a class="dropdown-item" href="#" data-toggle="modal" data-target="#renameInstanceModal" id="renameInstanceOption"><i class="fas fa-edit fa-sm fa-fw mr-2"></i>Rename</a>
        <a class="dropdown-item" href="#" data-toggle="modal" data-target="#copyInstanceModal" id="copyInstanceOption"><i class="fas fa-copy fa-sm fa-fw mr-2"></i>Copy</a>
        <a class="dropdown-item" onclick="loadMigrateInstanceModal()" id="migrateInstanceOption"><i class="fas fa-suitcase fa-sm fa-fw mr-2"></i>Migrate</a>
        <a class="dropdown-item text-primary" href="#" data-toggle="modal" data-target="#backupInstanceModal" id="backupInstanceOption"><i class="fas fa-save fa-sm fa-fw mr-2"></i>Backup</a>
        <a class="dropdown-item" href="#" data-toggle="modal" data-target="#publishInstanceModal" id="publishInstanceOption"><i class="fas fa-box-open fa-sm fa-fw mr-2"></i>Publish</a>
        <a class="dropdown-item" onclick="deleteInstance()" id="deleteInstanceOption"><i class="fas fa-trash-alt fa-sm fa-fw mr-2"></i>Delete</a>
      </div>

      <a class="btn btn-outline-primary float-sm-right" href="#" role="button" id="startLinkButton" onclick="changeItemState(instance, 'start')" style="display:none;" title="Start">
        <i class="fas fa-play fa-fw"></i>
      </a>
      <a class="btn btn-outline-primary float-sm-right" href="#" role="button" id="stopLinkButton" onclick="changeItemState(instance, 'stop')" style="display:none;" title="Stop">
        <i class="fas fa-stop fa-fw"></i>
      </a>
      <a class="btn btn-outline-primary float-sm-right" href="#" role="button" id="unfreezeLinkButton" onclick="changeItemState(instance, 'unfreeze')" style="display:none;" title="UnFreeze">
        <i class="fas fa-pause fa-fw"></i>
      </a>

    </div>
  </div>
{% endblock header %}

{% block content %}
  <div class="col-12">
    <nav>
      <div class="nav nav-tabs" id="nav-page-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
        <a class="nav-item nav-link" id="nav-console-tab" data-toggle="tab" href="#nav-console" role="tab" aria-controls="nav-console" aria-selected="false">Console</a>
        <a class="nav-item nav-link" id="nav-exec-tab" data-toggle="tab" href="#nav-exec" role="tab" aria-controls="nav-exec" aria-selected="false">Exec</a>
      </div>
    </nav>
    <div class="tab-content" id="nav-page-content">
      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
        <br />
        <div class="row">
          <div class="col-9">
      
            <!-- Interfaces Card-->
            <div class="card" id="interfacesCard">
              <div class="card-header">
                <h3 class="card-title text-primary" data-card-widget="collapse">
                    Interfaces
                </h3>
                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                </div>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover" id="interfaceTableList" width="100%" cellspacing="0">
                  </table>
                </div>
              </div>
            </div>
    
            <!-- Snapshots Card-->
            <div class="card" id="snapshotsCard">
              <div class="card-header">
                <h3 class="card-title text-primary" data-card-widget="collapse">
                  Snapshots
                </h3>
                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                  <button type="button" class="btn btn-tool" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-bars"></i>
                  </button>
                  <div class="dropdown-menu dropdown-menu-right">
                    <a href="#" class="dropdown-item" data-toggle="modal" data-target="#createSnapshotModal" title="Create Snapshot">Create Snapshot</a>
                  </div>
                </div>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover" id="snapshotTableList" width="100%" cellspacing="0">
                  </table>
                </div>
              </div>
            </div>
    
            <!-- Backups Card-->
            <div class="card" id="backupsCard">
              <div class="card-header">
                <h3 class="card-title text-primary" data-card-widget="collapse">
                  Backups
                </h3>
                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  <button type="button" class="btn btn-tool" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-bars"></i>
                  </button>
                  <div class="dropdown-menu dropdown-menu-right">
                    <a href="#" class="dropdown-item" data-toggle="modal" data-target="#backupInstanceModal" title="Create Backup">Create Backup</a>
                  </div>
                </div>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover" id="backupTableList" width="100%" cellspacing="0">
                  </table>
                </div>
              </div>
            </div>

            <!-- Network Devices Card-->
            <div class="card collapsed-card" id="networkDevicesCard">
              <div class="card-header">
                <h3 class="card-title text-primary" data-card-widget="collapse">
                  Network Devices
                </h3>
                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  <button type="button" class="btn btn-tool" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-bars"></i>
                  </button>
                  <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" onclick="loadAddNetworkDeviceModal()" title="Add Network Device">Add Network Device</a>
                  </div>
                </div>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover" id="networkDeviceTableList" width="100%" cellspacing="0">
                  </table>
                </div>
              </div>
            </div>
    
            <!-- Disk Devices Card-->
            <div class="card collapsed-card" id="diskDevicesCard">
              <div class="card-header">
                <h3 class="card-title text-primary" data-card-widget="collapse">
                  Disk Devices
                </h3>
                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  <button type="button" class="btn btn-tool" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-bars"></i>
                  </button>
                  <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" onclick="loadAddDiskDeviceModal()" title="Add Disk Device">Add Disk Device</a>
                  </div>
                </div>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover" id="diskDeviceTableList" width="100%" cellspacing="0">
                  </table>
                </div>
              </div>
            </div>

            <!-- GPU Devices Card-->
            <div class="card collapsed-card" id="gpuDevicesCard">
              <div class="card-header">
                <h3 class="card-title text-primary" data-card-widget="collapse">
                  GPU Devices
                </h3>
                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  <button type="button" class="btn btn-tool" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-bars"></i>
                  </button>
                  <div class="dropdown-menu dropdown-menu-right">
                    <a href="#" class="dropdown-item" data-toggle="modal" data-target="#addGPUDeviceModal" title="Add GPU Device">Add GPU Device</a>
                  </div>
                </div>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover" id="gpuDeviceTableList" width="100%" cellspacing="0">
                  </table>
                </div>
              </div>
            </div>
    
            <!-- Proxy Devices Card-->
            <div class="card collapsed-card" id="proxyDevicesCard">
              <div class="card-header">
                <h3 class="card-title text-primary" data-card-widget="collapse">
                  Proxy Devices
                </h3>
                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  <button type="button" class="btn btn-tool" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-bars"></i>
                  </button>
                  <div class="dropdown-menu dropdown-menu-right">
                    <a href="#" class="dropdown-item" data-toggle="modal" data-target="#addProxyDeviceModal" title="Add Proxy Device">Add Proxy Device</a>
                  </div>
                </div>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover" id="proxyDeviceTableList" width="100%" cellspacing="0">
                  </table>
                </div>
              </div>
            </div>
    
            <!-- USB Devices Card-->
            <div class="card collapsed-card" id="usbDevicesCard">
              <div class="card-header">
                <h3 class="card-title text-primary" data-card-widget="collapse">
                  USB Devices
                </h3>
                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  <button type="button" class="btn btn-tool" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-bars"></i>
                  </button>
                  <div class="dropdown-menu dropdown-menu-right">
                    <a href="#" class="dropdown-item" data-toggle="modal" data-target="#addUSBDeviceModal" title="Add USB Device">Add USB Device</a>
                  </div>
                </div>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover" id="usbDeviceTableList" width="100%" cellspacing="0">
                  </table>
                </div>
              </div>
            </div>
        
            <!-- Logs Card-->
            <div class="card collapsed-card" id="logsCard">
              <div class="card-header">
                <h3 class="card-title text-primary" data-card-widget="collapse">
                  Logs
                </h3>
                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                </div>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-hover" id="logTableList" width="100%" cellspacing="0">
                  </table>
                </div>
              </div>
            </div>
    
          </div>

          <div class="col-3">
      
            <div class="accordion" id="accordionExample">
      
              <!-- General Data Card-->
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title text-primary" data-card-widget="collapse">
                    General Data
                  </h3>
                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                  </div>
                </div>
                <div class="card-body">
                  <div class="d-flex justify-content-between">
                    <div>CPU</div>
                    <div><span id="cpuPercentage">0</span>%</div>
                  </div>
                  <div class="progress">
                    <div class="progress-bar bg-primary" id="cpuPercentageBar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                  <br />
                  <div class="d-flex justify-content-between">
                    <div>Memory</div>
                    <div><span id="memPercentage">0</span>%</div>
                  </div>
                  <div class="progress">
                    <div class="progress-bar bg-primary" id="memPercentageBar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                  <br /><br />
                  <table class="table table-sm h6">
                    <tr><td class="pr-3">Status:</td> <td><span id="status"></span></td></tr>
                    <tr><td class="pr-3">Profiles:</td> <td><span id="profiles"></span></td></tr>
                    <tr><td class="pr-3">Image:</td> <td><span id="image"></span></td></tr>
                    <tr><td class="pr-3">Location:</td> <td><span id="location"></span></td></tr>
                    <tr><td class="pr-3">Created:</td> <td><span id="created"></span></td></tr>
                    <tr><td class="pr-3">CPU:</td> <td><span id="cpu"></span></td></tr>
                    <tr><td class="pr-3">Memory:</td> <td><span id="memory"></span></td></tr>
                    <tr><td class="pr-3">Swap:</td> <td><span id="swap"></span></td></tr>
                    <tr><td class="pr-3">PID:</td> <td><span id="pid"></span></td></tr>
                    <tr><td class="pr-3">Processes:</td> <td><span id="processes"></span></td></tr>
                  </table>
                </div>
              </div>
      
              <!-- Boot Configuration Card-->
              <div class="card collapsed-card">
                <div class="card-header">
                  <h3 class="card-title text-primary" data-card-widget="collapse">
                    Boot Configuration
                  </h3>
                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  </div>
                </div>
                <div class="card-body">
                  <table class="table table-sm">
                    <tr><td class="pr-3">Autostart:</td> <td><span id="bootAutostart"></span></td></tr>
                    <tr><td class="pr-3">Autostart Delay:</td> <td><span id="bootAutostartDelay"></span></td></tr>
                    <tr><td class="pr-3">Autostart Priority:</td> <td><span id="bootAutostartPriority"></span></td></tr>
                    <tr><td class="pr-3">Host Shutdown Timeout:</td> <td><span id="bootHostShutdownTimeout"></span></td></tr>
                    <tr><td class="pr-3">Stop Priority:</td> <td><span id="bootStopPriority"></span></td></tr>
                  </table>
                </div>
              </div>

              <!-- Cloud-init Configuration Card-->
              <div class="card collapsed-card">
                <div class="card-header" id="headingCloudInitConfiguration">
                  <h3 class="card-title text-primary" data-card-widget="collapse">
                    Cloud-Init Configuration
                  </h3>
                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  </div>
                </div>
                <div class="card-body">
                  <table class="table table-sm">
                    <tr><td class="pr-3">Network-Config:</td> <td><span id="cloudInitNetworkConfig"></span></td></tr>
                    <tr><td class="pr-3">User-Data:</td> <td><span id="cloudInitUserData"></span></td></tr>
                    <tr><td class="pr-3">Vendor-Data:</td> <td><span id="cloudInitVendorData"></span></td></tr>
                  </table>
                </div>
              </div>

              <!-- Limits Configuration Card-->
              <div class="card collapsed-card">
                <div class="card-header">
                  <h3 class="card-title text-primary" data-card-widget="collapse">
                    Limits Configuration
                  </h3>
                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  </div>
                </div>
                <div class="card-body">
                  <table class="table table-sm">
                    <tr><td class="pr-3">CPU:</td> <td><span id="limitsCpu"></span></td></tr>
                    <tr><td class="pr-3">Disk Priority:</td> <td><span id="limitsDiskPriority"></span></td></tr>
                    <tr><td class="pr-3">Memory:</td> <td><span id="limitsMemory"></span></td></tr>
                    <tr><td class="pr-3">Memory Hugepages:</td> <td><span id="limitsMemoryHugepages"></span></td></tr>
                    <tr><td class="pr-3">Network Priority:</td> <td><span id="limitsNetworkPriority"></span></td></tr>
                  </table>
                </div>
              </div>
      
              <!-- Migration Configuration Card-->
              <div class="card collapsed-card">
                <div class="card-header" id="headingMigrationConfiguration">
                  <h3 class="card-title text-primary" data-card-widget="collapse">
                    Migration Configuration
                  </h3>
                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  </div>
                </div>
                <div class="card-body">
                  <table class="table table-sm">
                    <tr><td class="pr-3">Stateful:</td> <td><span id="migrationStateful"></span></td></tr>
                  </table>
                </div>
              </div>
      
              <!-- Other Configuration Card-->
              <div class="card collapsed-card">
                <div class="card-header" id="headingOtherConfiguration">
                  <h3 class="card-title text-primary" data-card-widget="collapse">
                    Other Configuration
                  </h3>
                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  </div>
                </div>
                <div class="card-body">
                  <table class="table table-sm">
                    <tr><td class="pr-3">Cluster Evacuate:</td> <td><span id="clusterEvacuate"></span></td></tr>
                  </table>
                </div>
              </div>
            
              <!-- Raw Configuration Card-->
              <div class="card collapsed-card">
                <div class="card-header" id="headingRawConfiguration">
                  <h3 class="card-title text-primary" data-card-widget="collapse">
                    Raw Configuration
                  </h3>
                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  </div>
                </div>
                <div class="card-body">
                  <table class="table table-sm">
                    <tr><td class="pr-3">Apparmor:</td> <td><span id="rawApparmor"></span></td></tr>
                    <tr><td class="pr-3">Qemu:</td> <td><span id="rawQemu"></span></td></tr>
                    <tr><td class="pr-3">Qemu.conf:</td> <td><span id="rawQemuConf"></span></td></tr>
                  </table>
                </div>
              </div>
      
              <!-- Security Configuration Card-->
              <div class="card collapsed-card">
                <div class="card-header" id="headingSecurityConfiguration">
                  <h3 class="card-title text-primary" data-card-widget="collapse">
                    Security Configuration
                  </h3>
                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  </div>
                </div>
                <div class="card-body">
                  <table class="table table-sm">
                    <tr><td class="pr-3">Devlxd:</td> <td><span id="securityDevLxd"></span></td></tr>
                    <tr><td class="pr-3">Protection Delete:</td> <td><span id="securityProtectionDelete"></span></td></tr>
                    <tr><td class="pr-3">Agent Metrics:</td> <td><span id="securityAgentMetrics"></span></td></tr>
                    <tr><td class="pr-3">Secureboot:</td> <td><span id="securitySecureboot"></span></td></tr>
                  </table>
                </div>
              </div>
            
              <!-- Snapshot Configuration Card-->
              <div class="card collapsed-card">
                <div class="card-header" id="heading SnapshotConfiguration">
                  <h3 class="card-title text-primary" data-card-widget="collapse">
                    Snapshot Configuration
                  </h3>
                  <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                  </div>
                </div>
                <div class="card-body">
                  <table class="table table-sm">
                    <tr><td class="pr-3">Schedule:</td> <td><span id="snapshotsSchedule"></span></td></tr>
                    <tr><td class="pr-3">Schedule Stopped:</td> <td><span id="snapshotsScheduleStopped"></span></td></tr>
                    <tr><td class="pr-3">Pattern:</td> <td><span id="snapshotsPattern"></span></td></tr>
                    <tr><td class="pr-3">Expiry:</td> <td><span id="snapshotsExpiry"></span></td></tr>
                  </table>
                </div>
              </div>
      
            </div>
          </div>

        </div>
      </div>
      <div class="tab-pane fade" id="nav-console" role="tabpanel" aria-labelledby="nav-console-tab">
        <br />
        <!-- Console Card -->
        <div class="card">
          <div class="card-header">
            <h3 class="card-title text-primary">Console</h3>
            <div class="card-tools">
              <div class="dropdown no-arrow">
                <button type="button btn-tool" class="dropdown-toggle mr-2 btn btn-sm btn-outline-primary" id="startConsoleButton" title="Start Console Terminal" onclick="establishInstanceWebSocketConsoleConnection()">Start Console</button>
                <button type="button btn-tool" class="dropdown-toggle mr-2 btn btn-sm btn-outline-primary" id="stopConsoleButton" style="display: none;"  title="Stop Console Terminal" onclick="closeWebSocketConsoleConnection()">Stop Console</button>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div id="terminal-console"></div>
          </div>
        </div>
        <!-- Console Card  -->
      </div>
      <div class="tab-pane fade" id="nav-exec" role="tabpanel" aria-labelledby="nav-exec-tab">
        <br />
        <!-- Exec Card -->
        <div class="card">
          <div class="card-header">
            <h3 class="card-title text-primary">Exec</h3>
            <div class="card-tools">
              <div class="dropdown no-arrow">
                <button type="button btn-tool" class="dropdown-toggle mr-2 btn btn-sm btn-outline-primary" id="startExecButton" title="Start Exec Terminal" onclick="establishInstanceWebSocketExecConnection()">Start Exec</button>
                <button type="button btn-tool" class="dropdown-toggle mr-2 btn btn-sm btn-outline-primary"  style="display: none;" id="stopExecButton" title="Stop Exec Terminal" onclick="closeWebSocketExecConnection()">Stop Exec</button>
                <select id="execShellInput" class="dropdown-toggle mr-2 btn btn-sm btn-tool" name="execShellInput">
                  <option value="bash" selected>/bin/bash</option>
                  <option value="sh">/bin/sh</option>
                </select>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div id="terminal-exec"></div>
          </div>
        </div>
        <!-- Exec Card  -->
      </div>
    </div>
  </div>
{% endblock content %}

{% block modal %}
  {% include 'modals/virtual-machine.html' %}
{% endblock modal %}

{% block script %}
  <!-- <script src="../static/js/xterm/xterm.js"></script> -->

  <!-- xterm -->
  <script src="https://unpkg.com/xterm@5.1.0/lib/xterm.js"></script>

  <script>
    
    var reloadTime = 10000;
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const serverId = urlParams.get('id');
    const project = urlParams.get('project');
    const instance = urlParams.get('instance');
    var target_location 
    var server_name
    var server_clustered
    var editedContainer
    var execControlSocket
    var execDataSocket
    populateSidebarLinks();
    populateNavbarLinks();

    //Initialize xterm for Exec
    const execTerminal = new Terminal({
      cursorBlink: "block",
      fontSize: 15,
      convertEol: true,
      rendererType: 'dom',
      cols: parseInt(($("#page-container").width() - 40) / 9),
      rows: 35
    });

    //Initialize xterm for Console
    const consoleTerminal = new Terminal({
      cursorBlink: "block",
      fontSize: 15,
      convertEol: true,
      rendererType: 'dom',
      cols: parseInt(($("#page-container").width() - 40) / 9),
      rows: 35
    });

    // Resize console and exec terminals on page resize
    $(window).resize(function(){
      execTerminal.resize(parseInt(($("#page-container").width() - 40) / 9), 35);
      console.log(`size: ${execTerminal.cols} columns, ${execTerminal.rows} rows`);
      consoleTerminal.resize(parseInt(($("#page-container").width() - 40) / 9), 35);

      resize_command = {
        command: "window-resize",
        args: {
          width: parseInt(($("#page-container").width() - 40) / 9).toString(),
          height: "35"
        },
      }
      
      if (typeof execControlSocket == 'object')
        execControlSocket.send(convertString2ArrayBuffer(JSON.stringify(resize_command)))
      if(typeof consoleControlSocket == 'object')
        consoleControlSocket.send(convertString2ArrayBuffer(JSON.stringify(resize_command)))
    })

    applySidebarStyles();
    applySidebarLinks();


    function reloadPageContent() {
  
      //Clear the automatic page reload
      clearTimeout(pageReloadTimeout);

      //Load Instance Data and Configuration
      $.get("../api/virtual-machine/get_instance?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1", function (data) {

          data = data.metadata;
          dataConfig = data.config;
          target_location = data.location


          $("#name").text(data.name);
          if (data.hasOwnProperty('description')) { $("#description").text(data.description); }
          $("#status").text(data.status);
          $("#profiles").text(data.profiles.join(', '));
          if (dataConfig.hasOwnProperty('image.description')) { $("#image").text(dataConfig["image.description"]); }
          $("#location").text(data.location);
          $("#created").text(data.created_at.substring(0,10));

          if (dataConfig.hasOwnProperty('boot.autostart')) { $("#bootAutostart").text(dataConfig['boot.autostart']); } else { $("#bootAutostart").text(""); }
          if (dataConfig.hasOwnProperty('boot.autostart.delay')) { $("#bootAutostartDelay").text(dataConfig['boot.autostart.delay']); } else { $("#bootAutostartDelay").text(""); }
          if (dataConfig.hasOwnProperty('boot.autostart.priority')) { $("#bootAutostartPriority").text(dataConfig['boot.autostart.priority']); } else { $("#bootAutostartPriority").text(""); }
          if (dataConfig.hasOwnProperty('boot.host_shutdown_timeout')) { $("#bootHostShutdownTimeout").text(dataConfig['boot.host_shutdown_timeout']); } else { $("#bootHostShutdownTimeout").text(""); }
          if (dataConfig.hasOwnProperty('boot.stop.priority')) { $("#bootStopPriority").text(dataConfig['boot.stop.priority']); } else { $("#bootStopPriority").text(""); }

          if (dataConfig.hasOwnProperty('cloud-init.network-config')) { $("#cloudInitNetworkConfig").text(dataConfig['cloud-init.network-config']); } else { $("#cloudInitNetworkConfig").text(""); }
          if (dataConfig.hasOwnProperty('cloud-init.user-data')) { $("#cloudInitUserData").text(dataConfig['cloud-init.user-data']); } else { $("#cloudInitUserData").text(""); }
          if (dataConfig.hasOwnProperty('cloud-init.vendor-data')) { $("#cloudInitVendorData").text(dataConfig['cloud-init.vendor-data']); } else { $("#cloudInitVendorData").text(""); }

          if (dataConfig.hasOwnProperty('cluster.evacuate')) { $("#clusterEvacuate").text(dataConfig['cluster.evacuate']); } else { $("#clusterEvacuate").text(""); }

          if (dataConfig.hasOwnProperty('limits.cpu')) { $("#limitsCpu").text(dataConfig['limits.cpu']); } else { $("#limitsCpu").text(""); }
          if (dataConfig.hasOwnProperty('limits.disk.priority')) { $("#limitsDiskPriority").text(dataConfig['limits.disk.priority']); } else { $("#limitsDiskPriority").text(""); }
          if (dataConfig.hasOwnProperty('limits.memory')) { $("#limitsMemory").text(dataConfig['limits.memory']); } else { $("#limitsMemory").text(""); }
          if (dataConfig.hasOwnProperty('limits.memory.hugepages')) { $("#limitsMemoryHugepages").text(dataConfig['limits.memory.hugepages']); } else { $("#limitsMemoryHugepages").text(""); }
          if (dataConfig.hasOwnProperty('limits.network.priority')) { $("#limitsNetworkPriority").text(dataConfig['limits.network.priority']); } else { $("#limitsNetworkPriority").text(""); }

          if (dataConfig.hasOwnProperty('migration.stateful')) { $("#migrationStateful").text(dataConfig['migration.stateful']); } else { $("#migrationStateful").text(""); }

          if (dataConfig.hasOwnProperty('raw.apparmor')) { $("#rawApparmor").text(dataConfig['raw.apparmor']); } else { $("#rawApparmor").text(""); }
          if (dataConfig.hasOwnProperty('raw.qemu')) { $("#rawQemu").text(dataConfig['raw.qemu']); } else { $("#rawQemu").text(""); }
          if (dataConfig.hasOwnProperty('raw.qemu.conf')) { $("#rawQemuConf").text(dataConfig['raw.qemu.conf']); } else { $("#rawQemuConf").text(""); }

          if (dataConfig.hasOwnProperty('security.devlxd')) { $("#securityDevLxd").text(dataConfig['security.devlxd']); } else { $("#securityDevLxd").text(""); }
          if (dataConfig.hasOwnProperty('security.protection.delete')) { $("#securityProtectionDelete").text(dataConfig['security.protection.delete']); } else { $("#securityProtectionDelete").text(""); }
          if (dataConfig.hasOwnProperty('security.agent.metrics')) { $("#securityAgentMetrics").text(dataConfig['security.agent.metrics']); } else { $("#securityAgentMetrics").text(""); }
          if (dataConfig.hasOwnProperty('security.secureboot')) { $("#securitySecureboot").text(dataConfig['security.secureboot']); } else { $("#securitySecureboot").text(""); }

          if (dataConfig.hasOwnProperty('snapshots.schedule')) { $("#snapshotsSchedule").text(dataConfig['snapshots.schedule']); } else { $("#snapshotsSchedule").text(""); }
          if (dataConfig.hasOwnProperty('snapshots.schedule.stopped')) { $("#snapshotsScheduleStopped").text(dataConfig['snapshots.schedule.stopped']); } else { $("#snapshotsScheduleStopped").text(""); }
          if (dataConfig.hasOwnProperty('snapshots.pattern')) { $("#snapshotsPattern").text(dataConfig['snapshots.pattern']); } else { $("#snapshotsPattern").text(""); }
          if (dataConfig.hasOwnProperty('snapshots.expiry')) { $("#snapshotsExpiry").text(dataConfig['snapshots.expiry']); } else { $("#snapshotsExpiry").text(""); }

        });

      //Load Instance State Data and Configuration
      $.get("../api/virtual-machine/get_instance_state?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1", function (data) {
        data = data.metadata;
        displayMenuOptions(data)
        $("#cpu").text(parseFloat(parseInt(data.cpu.usage) / 1000000).toFixed(2)  + ' ms')
        $("#memory").text(parseFloat(parseInt(data.memory.usage) / 1024 / 1024 / 1024).toFixed(2)  + ' GiB')
        $("#swap").text(parseFloat(parseInt(data.memory.swap_usage) / 1024 / 1024 / 1024).toFixed(2)  + ' GiB')
        $("#pid").text(data.pid)
        $("#processes").text(data.processes)
        
      });

      //Reload the datatables content
      if (!$('#interfacesCard').hasClass('collapsed-card'))
        $('#interfaceTableList').DataTable().ajax.reload(null, false);
      if (!$('#snapshotsCard').hasClass('collapsed-card'))
        $('#snapshotTableList').DataTable().ajax.reload(null, false);
      if (!$('#networkDevicesCard').hasClass('collapsed-card'))
        $('#networkDeviceTableList').DataTable().ajax.reload(null, false);
      if (!$('#diskDevicesCard').hasClass('collapsed-card'))
        $('#diskDeviceTableList').DataTable().ajax.reload(null, false);
      if (!$('#gpuDevicesCard').hasClass('collapsed-card'))
        $('#gpuDeviceTableList').DataTable().ajax.reload(null, false);
      if (!$('#proxyDevicesCard').hasClass('collapsed-card'))
        $('#proxyDeviceTableList').DataTable().ajax.reload(null, false);
      if (!$('#usbDevicesCard').hasClass('collapsed-card'))
        $('#usbDeviceTableList').DataTable().ajax.reload(null, false);
      if (!$('#backupsCard').hasClass('collapsed-card'))
        $('#backupTableList').DataTable().ajax.reload(null, false);
      if (!$('#logsCard').hasClass('collapsed-card'))
        $('#logTableList').DataTable().ajax.reload(null, false);

      //Load CPU Percentage
      $.get("../api/virtual-machine/get_instance_cpu_percentage?id="+serverId+"&project="+project+"&name="+instance, function (data) {
        percentage = parseFloat(data.percentage).toFixed(2);
        $('#cpuPercentage').text(percentage)
        $('#cpuPercentageBar').css('width', percentage + '%');
        $('#cpuPercentageBar').attr('aria-valuenow', percentage + '%');
        if (percentage > 90.00)
          $('#cpuPercentageBar').attr('class', 'progress-bar bg-danger');
        else
          $('#cpuPercentageBar').attr('class', 'progress-bar bg-primary');
      });


      //Load Memory Percentage
      $.get("../api/virtual-machine/get_instance_memory_percentage?id="+serverId+"&project="+project+"&name="+instance, function (data) {
        percentage = parseFloat(data.percentage).toFixed(2);
        $('#memPercentage').text(percentage)
        $('#memPercentageBar').css('width', percentage + '%');
        $('#memPercentageBar').attr('aria-valuenow', percentage + '%');
        if (percentage > 90.00)
          $('#memPercentageBar').attr('class', 'progress-bar bg-danger');
        else
          $('#memPercentageBar').attr('class', 'progress-bar bg-primary');
      });
      
      //Set the automatic page reload
      pageReloadTimeout = setTimeout(() => { reloadPageContent(); }, reloadTime);
    }

    function loadPageContent(){
      
      //Populate the Server dropdown
      $.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
        data = data.data
        for (var index = 0; index < data.length; index++) {
          if (data[index].name == '')
            optionText = data[index].addr
          else
            optionText = data[index].name
          if (data[index].id == serverId){
            $('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
          }
          else
            $('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
        }
      })

      //Populate the Project dropdown
      $.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
        data = data.metadata
        for (var index = 0; index < data.length; index++) {
          optionText = data[index].replace('/1.0/projects/','');
          if (optionText == project)
            $('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
          else
            $('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
        }
      })

      //Load Instance Data and Configuration
      $.get("../api/virtual-machine/get_instance?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1", function (data) {
        data = data.metadata;
        dataConfig = data.config;
        target_location = data.location

        $.getJSON("../api/server/get_server_info?id="+encodeURI(serverId)+'&project='+encodeURI(project), function (data) {
          data = data.metadata.environment;
          server_name = data.server_name
          server_clustered = data.server_clustered 
          if (data.server_clustered && data.server_name != target_location) {
            $('#startExecButton').prop('disabled', true);
            $('#startConsoleButton').prop('disabled', true);
            consoleTerminal.write("\r\n--- This instance is located on a differenct host within the cluster. Console is unavailable  --- \r\n");
            execTerminal.write("\r\n--- This instance is located on a differenct host within the cluster. Exec is unavailable  --- \r\n");
          }
        });

        $("#name").text(data.name);
        if (data.hasOwnProperty('description')) { $("#description").text(data.description); }
        $("#status").text(data.status);
        $("#profiles").text(data.profiles.join(', '));
        if (dataConfig.hasOwnProperty('image.description')) { $("#image").text(dataConfig["image.description"]); }
        $("#location").text(data.location);
        $("#created").text(data.created_at.substring(0,10));

        if (dataConfig.hasOwnProperty('boot.autostart')) { $("#bootAutostart").text(dataConfig['boot.autostart']); } else { $("#bootAutostart").text(""); }
        if (dataConfig.hasOwnProperty('boot.autostart.delay')) { $("#bootAutostartDelay").text(dataConfig['boot.autostart.delay']); } else { $("#bootAutostartDelay").text(""); }
        if (dataConfig.hasOwnProperty('boot.autostart.priority')) { $("#bootAutostartPriority").text(dataConfig['boot.autostart.priority']); } else { $("#bootAutostartPriority").text(""); }
        if (dataConfig.hasOwnProperty('boot.host_shutdown_timeout')) { $("#bootHostShutdownTimeout").text(dataConfig['boot.host_shutdown_timeout']); } else { $("#bootHostShutdownTimeout").text(""); }
        if (dataConfig.hasOwnProperty('boot.stop.priority')) { $("#bootStopPriority").text(dataConfig['boot.stop.priority']); } else { $("#bootStopPriority").text(""); }

        if (dataConfig.hasOwnProperty('cloud-init.network-config')) { $("#cloudInitNetworkConfig").text(dataConfig['cloud-init.network-config']); } else { $("#cloudInitNetworkConfig").text(""); }
        if (dataConfig.hasOwnProperty('cloud-init.user-data')) { $("#cloudInitUserData").text(dataConfig['cloud-init.user-data']); } else { $("#cloudInitUserData").text(""); }
        if (dataConfig.hasOwnProperty('cloud-init.vendor-data')) { $("#cloudInitVendorData").text(dataConfig['cloud-init.vendor-data']); } else { $("#cloudInitVendorData").text(""); }

        if (dataConfig.hasOwnProperty('cluster.evacuate')) { $("#clusterEvacuate").text(dataConfig['cluster.evacuate']); } else { $("#clusterEvacuate").text(""); }

        if (dataConfig.hasOwnProperty('limits.cpu')) { $("#limitsCpu").text(dataConfig['limits.cpu']); } else { $("#limitsCpu").text(""); }
        if (dataConfig.hasOwnProperty('limits.disk.priority')) { $("#limitsDiskPriority").text(dataConfig['limits.disk.priority']); } else { $("#limitsDiskPriority").text(""); }
        if (dataConfig.hasOwnProperty('limits.memory')) { $("#limitsMemory").text(dataConfig['limits.memory']); } else { $("#limitsMemory").text(""); }
        if (dataConfig.hasOwnProperty('limits.memory.hugepages')) { $("#limitsMemoryHugepages").text(dataConfig['limits.memory.hugepages']); } else { $("#limitsMemoryHugepages").text(""); }
        if (dataConfig.hasOwnProperty('limits.network.priority')) { $("#limitsNetworkPriority").text(dataConfig['limits.network.priority']); } else { $("#limitsNetworkPriority").text(""); }

        if (dataConfig.hasOwnProperty('migration.stateful')) { $("#migrationStateful").text(dataConfig['migration.stateful']); } else { $("#migrationStateful").text(""); }

        if (dataConfig.hasOwnProperty('raw.apparmor')) { $("#rawApparmor").text(dataConfig['raw.apparmor']); } else { $("#rawApparmor").text(""); }
        if (dataConfig.hasOwnProperty('raw.qemu')) { $("#rawQemu").text(dataConfig['raw.qemu']); } else { $("#rawQemu").text(""); }
        if (dataConfig.hasOwnProperty('raw.qemu.conf')) { $("#rawQemuConf").text(dataConfig['raw.qemu.conf']); } else { $("#rawQemuConf").text(""); }

        if (dataConfig.hasOwnProperty('security.devlxd')) { $("#securityDevLxd").text(dataConfig['security.devlxd']); } else { $("#securityDevLxd").text(""); }
        if (dataConfig.hasOwnProperty('security.protection.delete')) { $("#securityProtectionDelete").text(dataConfig['security.protection.delete']); } else { $("#securityProtectionDelete").text(""); }
        if (dataConfig.hasOwnProperty('security.agent.metrics')) { $("#securityAgentMetrics").text(dataConfig['security.agent.metrics']); } else { $("#securityAgentMetrics").text(""); }
        if (dataConfig.hasOwnProperty('security.secureboot')) { $("#securitySecureboot").text(dataConfig['security.secureboot']); } else { $("#securitySecureboot").text(""); }

        if (dataConfig.hasOwnProperty('snapshots.schedule')) { $("#snapshotsSchedule").text(dataConfig['snapshots.schedule']); } else { $("#snapshotsSchedule").text(""); }
        if (dataConfig.hasOwnProperty('snapshots.schedule.stopped')) { $("#snapshotsScheduleStopped").text(dataConfig['snapshots.schedule.stopped']); } else { $("#snapshotsScheduleStopped").text(""); }
        if (dataConfig.hasOwnProperty('snapshots.pattern')) { $("#snapshotsPattern").text(dataConfig['snapshots.pattern']); } else { $("#snapshotsPattern").text(""); }
        if (dataConfig.hasOwnProperty('snapshots.expiry')) { $("#snapshotsExpiry").text(dataConfig['snapshots.expiry']); } else { $("#snapshotsExpiry").text(""); }

      });

      //Load Instance State Data and Configuration
      $.get("../api/virtual-machine/get_instance_state?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1", function (data) {
        data = data.metadata;
        displayMenuOptions(data)
        $("#cpu").text(parseFloat(parseInt(data.cpu.usage) / 1000000).toFixed(2)  + ' ms')
        $("#memory").text(parseFloat(parseInt(data.memory.usage) / 1024 / 1024 / 1024).toFixed(2)  + ' GiB')
        $("#swap").text(parseFloat(parseInt(data.memory.swap_usage) / 1024 / 1024 / 1024).toFixed(2)  + ' GiB')
        $("#pid").text(data.pid)
        $("#processes").text(data.processes)

      });

      //Load CPU Percentage
      $.get("../api/virtual-machine/get_instance_cpu_percentage?id="+serverId+"&project="+project+"&name="+instance, function (data) {
        percentage = parseFloat(data.percentage).toFixed(2);
        $('#cpuPercentage').text(percentage)
        $('#cpuPercentageBar').css('width', percentage + '%');
        $('#cpuPercentageBar').attr('aria-valuenow', percentage + '%');
        if (percentage > 90.00)
          $('#cpuPercentageBar').attr('class', 'progress-bar bg-danger');
        else
          $('#cpuPercentageBar').attr('class', 'progress-bar bg-primary');
      });

      //Load Memory Percentage
      $.get("../api/virtual-machine/get_instance_memory_percentage?id="+serverId+"&project="+project+"&name="+instance, function (data) {
        percentage = parseFloat(data.percentage).toFixed(2);
        $('#memPercentage').text(percentage)
        $('#memPercentageBar').css('width', percentage + '%');
        $('#memPercentageBar').attr('aria-valuenow', percentage + '%');
        if (percentage > 90.00)
          $('#memPercentageBar').attr('class', 'progress-bar bg-danger');
        else
          $('#memPercentageBar').attr('class', 'progress-bar bg-primary');
      });
      
      //Load Interfaces Table
      $('#interfaceTableList').DataTable({
        ajax: {
          url: "../api/virtual-machine/get_instance_interfaces?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1",
          dataType: "json",
          dataSrc: "data",
          contentType: "application/json"
        },
        columns: [
          { title: "Name", data: function (row, type, set) {
              if (row.hasOwnProperty('name')) {
                if (row.name)
                  return row.name
              }
              return '-'
            },
          },
          { title: "HW Addr", data: function (row, type, set) {
              if (row.hasOwnProperty('hwaddr')) {
                if (row.hwaddr)
                  return row.hwaddr
              }
              return '-'
            },
          },
          { title: "IPv4", data: function (row, type, set) {
              if (row.hasOwnProperty('ipv4_addresses')) {
                if (row.ipv4_addresses.length > 0)
                  return row.ipv4_addresses.join(', <br />')
              }
              return '-'
            },
          },
          { title: "IPv6", data: function (row, type, set) {
              if (row.hasOwnProperty('ipv6_addresses')) {
                if (row.ipv6_addresses.length > 0)
                  return row.ipv6_addresses.join(', <br />')
              }
              return '-'
            },
          },
          { title: "State", data: function (row, type, set) {
              if (row.hasOwnProperty('state')) {
                if (row.state)
                  return row.state
              }
              return '-'
            },
          },
        ],
        order: [],
      });
      
      //Load Snapshots Table
      $('#snapshotTableList').DataTable({
        ajax: {
          url: "../api/virtual-machine/list_instance_snapshots?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1",
          dataType: "json",
          dataSrc: "metadata",
          contentType: "application/json"
        },
        columns: [
          { title: "Name", data: function (row, type, set) {
              if (row.hasOwnProperty('name')) {
                if (row.name)
                  return row.name
              }
              return '-'
            },
          },
          { title: "Stateful", data: function (row, type, set) {
              if (row.hasOwnProperty('stateful')) {
                // Boolean field
                return row.stateful
              }
              return '-'
            },
          },
          { title: "Size", data: function (row, type, set) {
              if (row.hasOwnProperty('size')) {
                if (row.size){
                  if (type === 'display') {
                    return (row.size / 1024 / 1024).toFixed(2) + ' MiB'
                  }
                  return row.size
                }
              }
              return '-'
            },
          },
          { title: "Created", data: function (row, type, set) {
              if (row.hasOwnProperty('created_at')) {
                if (row.created_at)
                  return row.created_at
              }
              return '-'
            },
          },
          { title: "Expires", data: function (row, type, set) {
              if (row.hasOwnProperty('expires_at')) {
                if (row.expires_at)
                  if (row.expires_at == '0001-01-01T00:00:00Z')
                    return 'never'
                  return row.expires_at
              }
              return '-'
            },
          },
          { title: "Actions", data: function (row, type, set) {
              links = ''
              if (row.hasOwnProperty('name')) {
                links += '<a onclick=restoreInstanceSnapshot(\''+row.name+'\')><i class="fas fa-window-restore fa-lg" style="color:#ddd" title="Restore Snapshot" aria-hidden="true"></i></a>'
                links += '&nbsp' + '&nbsp' 
                links += '<a onclick=loadCreateInstanceFromSnapshotModal(\''+row.name+'\')><i class="fas fa-cube fa-lg" style="color:#ddd" title="Create Instance" aria-hidden="true"></i></a>'
                links += '&nbsp' + '&nbsp'
                links += '<a onclick=loadPublishImageFromSnapshotModal(\''+row.name+'\')><i class="fas fa-box-open fa-lg" style="color:#ddd" title="Publish Image" aria-hidden="true"></i></a>'
                links += '&nbsp' + '&nbsp' 
                links += '<a onclick=deleteSnapshot(\''+row.name+'\')><i class="fas fa-trash-alt fa-lg" style="color:#ddd" title="Delete" aria-hidden="true"></i></a>'
              }
              return links
            },
          },
        ],
        order: [],
      });

      //Load Backups Table
      $('#backupTableList').DataTable({
        ajax: {
          url: "../api/virtual-machine/list_instance_backups?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1",
          dataType: "json",
          dataSrc: "metadata",
          contentType: "application/json"
        },
        columns: [
          { title: "Name", data: function (row, type, set) {
              if (row.hasOwnProperty('name')) {
                if (row.name) {
                  if (row.backup_file_exists)
                    return '<a href="backups/' + serverId + '/' + project + '/' + instance + '/' + row.name + '">' + row.name + '</a>'
                  return row.name
                }
              }
              return '-'
            },
          },
          { title: "Instance Only", data: function (row, type, set) {
              if (row.hasOwnProperty('instance_only')) {
                // Boolean field
                return row.instance_only
              }
              return '-'
            },
          },
          { title: "Optimized Storage", data: function (row, type, set) {
              if (row.hasOwnProperty('optimized_storage')) {
                // Boolean field
                return row.optimized_storage
              }
              return '-'
            },
          },

          { title: "Created", data: function (row, type, set) {
              if (row.hasOwnProperty('created_at')) {
                if (row.created_at)
                  return row.created_at
              }
              return '-'
            },
          },
          { title: "Expires", data: function (row, type, set) {
              if (row.hasOwnProperty('expires_at')) {
                if (row.expires_at) {
                  if (row.expires_at == '0000-12-31T19:03:58-04:56')
                    return 'never'
                  return row.expires_at
                }
              }
              return '-'
            },
          },
          { title: "File Size", data: function (row, type, set) {
              if (row.hasOwnProperty('backup_file_exists') && row.hasOwnProperty('backup_file_size')) {
                if (row.backup_file_exists && row.backup_file_size){
                  if (type === 'display') {
                    size = row.backup_file_size / 1024 / 1024
                    return size.toFixed(2) + ' MiB'
                  }
                  return row.backup_file_exists
                }
              }
              return '-'
            },
          },
          { title: "Actions", data: function (row, type, set) {
              links = ''
              if (row.hasOwnProperty('name')) {
                if (row.hasOwnProperty('backup_file_exists')) {
                  if (row.backup_file_exists)
                    links += '<a><i class="fas fa-file-export fa-lg" style="color:#f1f1f1" title="Export Backup" aria-hidden="true"></i></a>'
                  else 
                    links += '<a onclick=exportBackup(\''+row.name+'\')><i class="fas fa-file-export fa-lg" style="color:#ddd" title="Export Backup" aria-hidden="true"></i></a>'
                  links += '&nbsp' + '&nbsp' 
                }
                links += '<a onclick=deleteBackup(\''+row.name+'\')><i class="fas fa-trash-alt fa-lg" style="color:#ddd" title="Delete" aria-hidden="true"></i></a>'
              }
              return links
            },
          },
        ],
        order: [],
      });

      //Setup new data listener for Exec terminal
      execTerminal.onData( (data) => {
        if (execDataSocket.readyState === 1) {
          execDataSocket.send(convertString2ArrayBuffer(data))
        }
      });

      //Setup new data listener for Console terminal
      consoleTerminal.onData( (data) => {
        if (consoleDataSocket.readyState === 1) {
          consoleDataSocket.send(convertString2ArrayBuffer(data))
        }
      });

      //Open Exec terminal
      execTerminal.open(document.getElementById("terminal-exec"));

      //Open Console terminal
      consoleTerminal.open(document.getElementById("terminal-console"));

      //Set reload page content
      pageReloadTimeout = setTimeout(() => { reloadPageContent(); }, reloadTime);

    }

    // Loads the attachProfile modal and populates dynamic form options
    function loadAttachProfileModal(){
      //Reset and populate the Attach profile modal profile dropdown
      $("#selectProfileInput").empty().append('<option value="">(not set)</option>');
      $.getJSON("../api/profiles/list_profiles?id="+serverId+"&project="+project, function (data) {
        data = data.metadata
        for (var index = 0; index < data.length; index++) {
          //When using projects other than default and no recursion, it gets like URL variable with "?"
          optionText = data[index].split("?")
          optionText = optionText[0].replace('/1.0/profiles/','');
          $('#selectProfileInput').append('<option value="' + optionText + '">' + optionText + '</option>');
        }
        //Show modal
        $("#attachProfileModal").modal('show');
      })
    }

    // Loads the detachProfile modal and populates dynamic form options
    function loadDetachProfileModal(){
      //Reset and populate the Detach profile modal profile dropdown
      $("#selectDetachProfileInput").empty().append('<option value="">(not set)</option>');
      $.getJSON("../api/virtual-machine/get_instance?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1", function (data) {
        data = data.metadata
        for (var index = 0; index < data.profiles.length; index++) {
          optionText = data.profiles[index];
          $('#selectDetachProfileInput').append('<option value="' + optionText + '">' + optionText + '</option>');
        }
        //Show modal
        $("#detachProfileModal").modal('show');
      })
    }

    // Loads the addNetworkDevice modal and populates dynamic form options
    function loadAddNetworkDeviceModal(){

      //Reset and populate the modal Network Device's Network dropdown
      $("#networkNetworkInput").empty().append('<option value="">(not set)</option>');
      $.getJSON("../api/networks/list_network_managed_devices?id="+serverId+"&project="+project, function (data) {
        for (var index = 0; index < data.length; index++) {
          optionText = data[index];
          $('#networkNetworkInput').append('<option value="' + optionText + '">' + optionText + '</option>');
        }
        //Set correct options
        changeParentTypeInput();

        //Show modal
        $("#addNetworkDeviceModal").modal('show');
      })

      //Reset and populate the modal Network Device's Parent Network dropdown
      $("#networkParentInput").empty().append('<option value="">(not set)</option>');
      $.getJSON("../api/networks/list_networks?id="+serverId+"&project="+project, function (data) {
        data = data.metadata
        for (var index = 0; index < data.length; index++) {
          optionText = data[index].replace('/1.0/networks/','');
          $('#networkParentInput').append('<option value="' + optionText + '">' + optionText + '</option>');
        }
      })

    }
    
    // Loads the addDiskDevice modal and populates dynamic form options
    function loadAddDiskDeviceModal(){
      //Reset and populate the modal Disk Device's Storage Pools dropdown
      $("#diskPoolInput").empty().append('<option value="">(not set)</option>');
      $.getJSON("../api/storage-pools/list_storage_pools?id="+serverId+"&project="+project, function (data) {
        data = data.metadata
        for (var index = 0; index < data.length; index++) {
          optionText = data[index].replace('/1.0/storage-pools/','');
          $('#diskPoolInput').append('<option value="' + optionText + '">' + optionText + '</option>');
        }
        //Show modal
        $("#addDiskDeviceModal").modal('show');
      })
    }

    // Loads thes migrateInstanceModal and populates dynamic form options
    function loadMigrateInstanceModal(){
      //Reset and populate the modal Server dropdown
      $("#selectClusterInput").empty().append('<option value="">(not set)</option>');
      $.getJSON("../api/cluster-members/list_cluster_members?id="+serverId+"&project="+project, function (data) {
        data = data.metadata
        for (var index = 0; index < data.length; index++) {
          optionText = data[index].replace('/1.0/cluster/members/','');
          $('#selectClusterInput').append('<option value="' + optionText + '">' + optionText + '</option>');
        }
        //Show modal
        $("#migrateInstanceModal").modal('show');
      })
    }

    // Load the Interfaces table when expanded
    $('#interfacesCard').on('expanded.lte.cardwidget', function () {
      if ( ! $.fn.DataTable.isDataTable( '#interfaceTableList' ) ) {
        //Load Interfaces Table
        $('#interfaceTableList').DataTable({
          ajax: {
            url: "../api/virtual-machine/get_instance_interfaces?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1",
            dataType: "json",
            dataSrc: "data",
            contentType: "application/json"
          },
          columns: [
            { title: "Name", data: function (row, type, set) {
                if (row.hasOwnProperty('name')) {
                  if (row.name)
                    return row.name
                }
                return '-'
              },
            },
            { title: "HW Addr", data: function (row, type, set) {
                if (row.hasOwnProperty('hwaddr')) {
                  if (row.hwaddr)
                    return row.hwaddr
                }
                return '-'
              },
            },
            { title: "IPv4", data: function (row, type, set) {
                if (row.hasOwnProperty('ipv4_addresses')) {
                  if (row.ipv4_addresses.length > 0)
                    return row.ipv4_addresses.join(', <br />')
                }
                return '-'
              },
            },
            { title: "IPv6", data: function (row, type, set) {
                if (row.hasOwnProperty('ipv6_addresses')) {
                  if (row.ipv6_addresses.length > 0)
                    return row.ipv6_addresses.join(', <br />')
                }
                return '-'
              },
            },
            { title: "State", data: function (row, type, set) {
                if (row.hasOwnProperty('state')) {
                  if (row.state)
                    return row.state
                }
                return '-'
              },
            },
          ],
          order: [],
        });
      }
      else {
        $('#interfaceTableList').DataTable().ajax.reload(null, false);
      }
    })

    // Load the Snapshots table when expanded
    $('#snapshotsCard').on('expanded.lte.cardwidget', function () {
      if ( ! $.fn.DataTable.isDataTable( '#snapshotTableList' ) ) {
        //Load Snapshots Table
        $('#snapshotTableList').DataTable({
          ajax: {
            url: "../api/virtual-machine/list_instance_snapshots?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1",
            dataType: "json",
            dataSrc: "metadata",
            contentType: "application/json"
          },
          columns: [
            { title: "Name", data: function (row, type, set) {
                if (row.hasOwnProperty('name')) {
                  if (row.name)
                    return row.name
                }
                return '-'
              },
            },
            { title: "Stateful", data: function (row, type, set) {
                if (row.hasOwnProperty('stateful')) {
                  // Boolean field
                  return row.stateful
                }
                return '-'
              },
            },
            { title: "Size", data: function (row, type, set) {
                if (row.hasOwnProperty('size')) {
                  if (row.size){
                    if (type === 'display') {
                      return (row.size / 1024 / 1024).toFixed(2) + ' MiB'
                    }
                    return row.size
                  }
                }
                return '-'
              },
            },
            { title: "Created", data: function (row, type, set) {
                if (row.hasOwnProperty('created_at')) {
                  if (row.created_at)
                    return row.created_at
                }
                return '-'
              },
            },
            { title: "Expires", data: function (row, type, set) {
                if (row.hasOwnProperty('expires_at')) {
                  if (row.expires_at)
                    if (row.expires_at == '0001-01-01T00:00:00Z')
                      return 'never'
                    return row.expires_at
                }
                return '-'
              },
            },
            { title: "Actions", data: function (row, type, set) {
                links = ''
                if (row.hasOwnProperty('name')) {
                  links += '<a onclick=restoreInstanceSnapshot(\''+row.name+'\')><i class="fas fa-window-restore fa-lg" style="color:#ddd" title="Restore Snapshot" aria-hidden="true"></i></a>'
                  links += '&nbsp' + '&nbsp' 
                  links += '<a onclick=loadCreateInstanceFromSnapshotModal(\''+row.name+'\')><i class="fas fa-cube fa-lg" style="color:#ddd" title="Create Instance" aria-hidden="true"></i></a>'
                  links += '&nbsp' + '&nbsp'
                  links += '<a onclick=loadPublishImageFromSnapshotModal(\''+row.name+'\')><i class="fas fa-box-open fa-lg" style="color:#ddd" title="Publish Image" aria-hidden="true"></i></a>'
                  links += '&nbsp' + '&nbsp' 
                  links += '<a onclick=deleteSnapshot(\''+row.name+'\')><i class="fas fa-trash-alt fa-lg" style="color:#ddd" title="Delete" aria-hidden="true"></i></a>'
                }
                return links
              },
            },
          ],
          order: [],
        });
      }
      else {
        $('#snapshotTableList').DataTable().ajax.reload(null, false);
      }
    })

    // Load the Network Devices table when expanded
    $('#networkDevicesCard').on('expanded.lte.cardwidget', function () {
      if ( ! $.fn.DataTable.isDataTable( '#networkDeviceTableList' ) ) {
        //Load Network Devices Table
        $('#networkDeviceTableList').DataTable({
          ajax: {
            url: "../api/virtual-machine/get_instance_network_devices?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1",
            dataType: "json",
            dataSrc: "data",
            contentType: "application/json"
          },
          columns: [
            { title: "Device", data: function (row, type, set) {
                if (row.hasOwnProperty('device')) {
                  if (row.device)
                    return row.device
                }
                return '-'
              },
            },
            { title: "NIC Type", data: function (row, type, set) {
                if (row.hasOwnProperty('nictype')) {
                  if (row.nictype)
                    return row.nictype
                }
                return '-'
              },
            },
            { title: "Parent Interface", data: function (row, type, set) {
                if (row.hasOwnProperty('parent')) {
                  if (row.parent)
                    return row.parent
                }
                return '-'
              },
            },
            { title: "Network", data: function (row, type, set) {
                if (row.hasOwnProperty('network')) {
                  if (row.network)
                    return row.network
                }
                return '-'
              },
            },
            { title: "Interface Name", data: function (row, type, set) {
                if (row.hasOwnProperty('name')) {
                  if (row.name)
                    return row.name
                }
                return '-'
              },
            },
            { title: "Actions", data: function (row, type, set) {
              links = ''
              if (row.hasOwnProperty('device')) {
                links = '<a onclick=delete_device(\''+row.device+'\')><i class="fas fa-trash-alt fa-lg" style="color:#ddd" title="Delete" aria-hidden="true"></i></a>'
              }
              return links
              },
            },
          ],
          order: [],
        });
      }
      else {
        $('#networkDeviceTableList').DataTable().ajax.reload(null, false);
      }
    })
  
    // Load the Disk Devices table when expanded
    $('#diskDevicesCard').on('expanded.lte.cardwidget', function () {
      if ( ! $.fn.DataTable.isDataTable( '#diskDeviceTableList' ) ) {
        //Load Disk Devices Table
        $('#diskDeviceTableList').DataTable({
          ajax: {
            url: "../api/virtual-machine/get_instance_disk_devices?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1",
            dataType: "json",
            dataSrc: "data",
            contentType: "application/json"
          },
          columns: [
            { title: "Device", data: function (row, type, set) {
                if (row.hasOwnProperty('device')) {
                  if (row.device)
                    return row.device
                }
                return '-'
              },
            },
            { title: "Path", data: function (row, type, set) {
                if (row.hasOwnProperty('path')) {
                  if (row.path)
                    return row.path
                }
                return '-'
              },
            },
            { title: "Pool", data: function (row, type, set) {
                if (row.hasOwnProperty('pool')) {
                  if (row.pool)
                    return row.pool
                }
                return '-'
              },
            },
            { title: "Usage", data: function (row, type, set) {
                if (row.hasOwnProperty('usage')) {
                  if (row.usage) {
                    if (type === 'display')
                      return (row.usage / 1024 / 1024).toFixed(2) + ' MiB'
                    return row.usage
                  }
                }
                return '-'
              },
            },
            { title: "Actions", data: function (row, type, set) {
              links = ''
              if (row.hasOwnProperty('device')) {
                links = '<a onclick=delete_device(\''+row.device+'\')><i class="fas fa-trash-alt fa-lg" style="color:#ddd" title="Delete" aria-hidden="true"></i></a>'
              }
              return links
              },
            },
          ],
          order: [],
        });
      }
      else {
        $('#diskDeviceTableList').DataTable().ajax.reload(null, false);
      }
    })

    // Load the GPU Devices table when expanded
    $('#gpuDevicesCard').on('expanded.lte.cardwidget', function () {
      if ( ! $.fn.DataTable.isDataTable( '#gpuDeviceTableList' ) ) {
        //Load GPU Devices Table
        $('#gpuDeviceTableList').DataTable({
          ajax: {
            url: "../api/virtual-machine/get_instance_gpu_devices?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1",
            dataType: "json",
            dataSrc: "data",
            contentType: "application/json"
          },
          columns: [
          { title: "Device", data: function (row, type, set) {
                if (row.hasOwnProperty('device')) {
                  if (row.device)
                    return row.device
                }
                return '-'
              },
            },
            { title: "Vendor ID", data: function (row, type, set) {
                if (row.hasOwnProperty('vendorid')) {
                  if (row.vendorid)
                    return row.vendorid
                }
                return '-'
              },
            },
            { title: "Product ID", data: function (row, type, set) {
                if (row.hasOwnProperty('productid')) {
                  if (row.productid)
                    return row.productid
                }
                return '-'
              },
            },
            { title: "ID", data: function (row, type, set) {
                if (row.hasOwnProperty('id')) {
                  if (row.id)
                    return row.id
                }
                return '-'
              },
            },
            { title: "PCI", data: function (row, type, set) {
                if (row.hasOwnProperty('pci')) {
                  if (row.pci)
                    return row.pci
                }
                return '-'
              },
            },
            { title: "Type", data: function (row, type, set) {
                if (row.hasOwnProperty('type')) {
                  if (row.type)
                    return row.type
                }
                return '-'
              },
            },
            { title: "Actions", data: function (row, type, set) {
              links = ''
              if (row.hasOwnProperty('device')) {
                links = '<a onclick=delete_device(\''+row.device+'\')><i class="fas fa-trash-alt fa-lg" style="color:#ddd" title="Delete" aria-hidden="true"></i></a>'
              }
              return links
              },
            },
          ],
          order: [],
        });
      }
      else {
        $('#gpuDeviceTableList').DataTable().ajax.reload(null, false);
      }
    })

    // Load the Proxy Devices table when expanded
    $('#proxyDevicesCard').on('expanded.lte.cardwidget', function () {
      if ( ! $.fn.DataTable.isDataTable( '#proxyDeviceTableList' ) ) {
        //Load Proxy Devices Table
        $('#proxyDeviceTableList').DataTable({
          ajax: {
            url: "../api/virtual-machine/get_instance_proxy_devices?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1",
            dataType: "json",
            dataSrc: "data",
            contentType: "application/json"
          },
          columns: [
            { title: "Device", data: function (row, type, set) {
                if (row.hasOwnProperty('device')) {
                  if (row.device)
                    return row.device
                }
                return '-'
              },
            },
            { title: "Connect", data: function (row, type, set) {
                if (row.hasOwnProperty('connect')) {
                  if (row.connect)
                    return row.connect
                }
                return '-'
              },
            },
            { title: "Listen", data: function (row, type, set) {
                if (row.hasOwnProperty('listen')) {
                  if (row.listen)
                    return row.listen
                }
                return '-'
              },
            },
            { title: "Type", data: function (row, type, set) {
                if (row.hasOwnProperty('type')) {
                  if (row.type)
                    return row.type
                }
                return '-'
              },
            },
            { title: "Actions", data: function (row, type, set) {
              links = ''
              if (row.hasOwnProperty('device')) {
                links = '<a onclick=delete_device(\''+row.device+'\')><i class="fas fa-trash-alt fa-lg" style="color:#ddd" title="Delete" aria-hidden="true"></i></a>'
              }
              return links
              },
            },
          ],
          order: [],
        });
      }
      else {
        $('#proxyDeviceTableList').DataTable().ajax.reload(null, false);
      }
    })

    // Load the USB Devices table when expanded
    $('#usbDevicesCard').on('expanded.lte.cardwidget', function () {
      if ( ! $.fn.DataTable.isDataTable( '#usbDeviceTableList' ) ) {
        //Load USB Devices Table
        $('#usbDeviceTableList').DataTable({
          ajax: {
            url: "../api/virtual-machine/get_instance_usb_devices?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1",
            dataType: "json",
            dataSrc: "data",
            contentType: "application/json"
          },
          columns: [
            { title: "Device", data: function (row, type, set) {
                if (row.hasOwnProperty('device')) {
                  if (row.device)
                    return row.device
                }
                return '-'
              },
            },
            { title: "Vendor ID", data: function (row, type, set) {
                if (row.hasOwnProperty('vendorid')) {
                  if (row.vendorid)
                    return row.vendorid
                }
                return '-'
              },
            },
            { title: "Product ID", data: function (row, type, set) {
                if (row.hasOwnProperty('productid')) {
                  if (row.productid)
                    return row.productid
                }
                return '-'
              },
            },
            { title: "Mode", data: function (row, type, set) {
                if (row.hasOwnProperty('mode')) {
                  if (row.mode)
                    return row.mode
                }
                return '-'
              },
            },
            { title: "Required", data: function (row, type, set) {
                if (row.hasOwnProperty('required')) {
                  if (row.required)
                    return row.required
                }
                return '-'
              },
            },
            { title: "Type", data: function (row, type, set) {
                if (row.hasOwnProperty('type')) {
                  if (row.type)
                    return row.type
                }
                return '-'
              },
            },
            { title: "Actions", data: function (row, type, set) {
              lins = ''
              if (row.hasOwnProperty('device')) {
                links = '<a onclick=delete_device(\''+row.device+'\')><i class="fas fa-trash-alt fa-lg" style="color:#ddd" title="Delete" aria-hidden="true"></i></a>'
              }
              return links
              },
            },
          ],
          order: [],
        });
      }
      else {
        $('#usbDeviceTableList').DataTable().ajax.reload(null, false);
      }
    })

    // Load the Backups table when expanded
    $('#backupsCard').on('expanded.lte.cardwidget', function () {
      if ( ! $.fn.DataTable.isDataTable( '#backupTableList' ) ) {
        //Load Backups Table
        $('#backupTableList').DataTable({
          ajax: {
            url: "../api/virtual-machine/list_instance_backups?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1",
            dataType: "json",
            dataSrc: "metadata",
            contentType: "application/json"
          },
          columns: [
            { title: "Name", data: function (row, type, set) {
                if (row.hasOwnProperty('name')) {
                  if (row.name) {
                    if (row.backup_file_exists)
                      return '<a href="backups/' + serverId + '/' + project + '/' + instance + '/' + row.name + '">' + row.name + '</a>'
                    return row.name
                  }
                }
                return '-'
              },
            },
            { title: "Instance Only", data: function (row, type, set) {
                if (row.hasOwnProperty('instance_only')) {
                  // Boolean field
                  return row.instance_only
                }
                return '-'
              },
            },
            { title: "Optimized Storage", data: function (row, type, set) {
                if (row.hasOwnProperty('optimized_storage')) {
                  // Boolean field
                  return row.optimized_storage
                }
                return '-'
              },
            },

            { title: "Created", data: function (row, type, set) {
                if (row.hasOwnProperty('created_at')) {
                  if (row.created_at)
                    return row.created_at
                }
                return '-'
              },
            },
            { title: "Expires", data: function (row, type, set) {
                if (row.hasOwnProperty('expires_at')) {
                  if (row.expires_at) {
                    if (row.expires_at == '0000-12-31T19:03:58-04:56')
                      return 'never'
                    return row.expires_at
                  }
                }
                return '-'
              },
            },
            { title: "File Size", data: function (row, type, set) {
                if (row.hasOwnProperty('backup_file_exists') && row.hasOwnProperty('backup_file_size')) {
                  if (row.backup_file_exists && row.backup_file_size){
                    if (type === 'display') {
                      size = row.backup_file_size / 1024 / 1024
                      return size.toFixed(2) + ' MiB'
                    }
                    return row.backup_file_exists
                  }
                }
                return '-'
              },
            },
            { title: "Actions", data: function (row, type, set) {
                links = ''
                if (row.hasOwnProperty('name')) {
                  if (row.hasOwnProperty('backup_file_exists')) {
                    if (row.backup_file_exists)
                      links += '<a><i class="fas fa-file-export fa-lg" style="color:#f1f1f1" title="Export Backup" aria-hidden="true"></i></a>'
                    else 
                      links += '<a onclick=exportBackup(\''+row.name+'\')><i class="fas fa-file-export fa-lg" style="color:#ddd" title="Export Backup" aria-hidden="true"></i></a>'
                    links += '&nbsp' + '&nbsp' 
                  }
                  links += '<a onclick=deleteBackup(\''+row.name+'\')><i class="fas fa-trash-alt fa-lg" style="color:#ddd" title="Delete" aria-hidden="true"></i></a>'
                }
                return links
              },
            },
          ],
          order: [],
        });
      }
      else {
        $('#backupTableList').DataTable().ajax.reload(null, false);
      }
    })

    // Load the Logs table when expanded
    $('#logsCard').on('expanded.lte.cardwidget', function () {
      if ( ! $.fn.DataTable.isDataTable( '#logTableList' ) ) {
        //Load Logs Table
        $('#logTableList').DataTable({
          ajax: {
            url: "../api/virtual-machine/list_instance_logs?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1",
            dataType: "json",
            dataSrc: "metadata",
            contentType: "application/json"
          },
          columns: [
            { title: "Log", data: function (row, type, set) {
                if (row)
                  return row
                else
                  return '-'
              },
            },
            { title: "Actions", data: function (row, type, set) {
              links = '<a onclick=displayLog(\''+row+'\')><i class="fas fa-file fa-lg" style="color:#ddd" title="Display Log" aria-hidden="true"></i></a>'
              links += '&nbsp' + '&nbsp' 
              links += '<a onclick=deleteLog(\''+row+'\')><i class="fas fa-trash-alt fa-lg" style="color:#ddd" title="Delete" aria-hidden="true"></i></a>'
              return links
              },
            },
          ],
          order: [],
        });
      }
      else {
        $('#logTableList').DataTable().ajax.reload(null, false);
      }
    })

    // Create snapshot from modal data
    function createSnapshot(){
      var snapshotName = $("#snapshotName").val();
      var snapshotStateful = $("#snapshotStateful").val();
      console.log("Info: creating snapshot " + snapshotName);
      $.post("../api/virtual-machine/create_instance_snapshot?id="+serverId+"&project="+project+"&instance="+instance, { name: snapshotName, stateful: snapshotStateful},  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Async type
        setTimeout(() => { reloadPageContent(); }, 2000);
        operationStatusCheck()
      });
    }

    // Create instance from snapshot
    function createSnapshotInstance(){
      var copyName = $("#instanceNameForSnapshotCreate").val();
      var snapName = $("#snapNameForSnapshotCreate").val();
      console.log("Info: creating snapshot " + snapshotName);
      $.post("../api/virtual-machine/create_instance_snapshot_instance?id="+serverId+"&project="+project+"&instance="+instance+"&location="+target_location, { name: copyName, snapshot: snapName },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Async type
        setTimeout(() => { reloadPageContent(); }, 2000);
        operationStatusCheck()
      });
    }

    // Load the create instance from snapshot modal
    function loadCreateInstanceFromSnapshotModal(snap){
      $("#snapNameForSnapshotCreate").val(snap);
      $("#createSnapshotInstanceModal").modal('show');
    } 

    // Restore an instance from snapshot
    function restoreInstanceSnapshot(snapshotName){
      console.log("Info: restoring snapshot " + snapshotName + " to instance " + instance);
      $.post("../api/virtual-machine/restore_instance_snapshot?id="+serverId+"&project="+project+"&instance="+instance, { name: snapshotName },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Async type
        setTimeout(() => { reloadPageContent(); }, 2000);
        operationStatusCheck()
      });
    }

    // Publish an image from snapshot
    function publishSnapshot(){
      var description = $("#publishSnapshotDescriptionInput").val();
      var public = $("#publishSnapshotPublicInput").val();
      var os = $("#publishSnapshotOsInput").val();
      var release = $("#publishSnapshotReleaseInput").val();
      var snapName = $("#publishSnapshotHiddenName").val();
      console.log("Info: publishing image " + description + " from snapshot " + instance + "/" + snapName);
      $.post("../api/virtual-machine/publish_instance_snapshot?id="+serverId+"&project="+project+"&instance="+instance+"&snapshot="+snapName, { description: description, os: os, release: release, public:public },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Async type
        setTimeout(() => { reloadPageContent(); }, 2000);
        operationStatusCheck()
      });
    }

    // Load the publish image from snapshot modal
    function loadPublishImageFromSnapshotModal(snap){
      $("#publishSnapshotHiddenName").val(snap);
      $("#publishSnapshotModal").modal('show');
    }

    // Delete Instance
    function deleteInstance(){
      console.log("Info: confirming deletion of virtual machine " + instance);
      if (confirm("Are you sure you want to delete virtual machine " + instance + "?") == true) {
        console.log("Info: deleting virtual machine " + instance);
        $.post("../api/virtual-machine/delete_instance?id=" + serverId + "&project=" + project, { instance: instance }, function (data) {
          console.log(data);
          if (data.error_code >= 400){
            alert(data.error);
          }
          // Change window to virtual machines page
          window.location.replace("virtual-machines?id="+serverId+"&project="+project);
        });
      }
    }

    // Delete snapshot
    function deleteSnapshot(snapshot){
      console.log("Info: confirming deletion of snapshot " + snapshot);
      if (confirm("Are you sure you want to delete snapshot " + snapshot + "?") == true) {
        console.log("Info: deleting snapshot " + snapshot + " from instance " + instance);
        $.get("../api/virtual-machine/delete_instance_snapshot?id="+serverId+"&project="+project+"&instance="+instance+"&snapshot="+snapshot, function (data) {
          console.log(data);
          if (data.error_code >= 400){
            alert(data.error);
          }
          //Async type
          setTimeout(() => { reloadPageContent(); }, 2000);
          operationStatusCheck()
        });
      }
    }

    // Attach profile to instance
    function attachProfile(){
      profile = $("#selectProfileInput").val()
      console.log("Info: attaching profile " + profile + " to instance " + instance);
      $.post("../api/virtual-machine/attach_instance_profile?id="+serverId+"&project="+project+"&instance="+instance, { name: profile, },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Sync type
        setTimeout(() => { reloadPageContent(); }, 1000);
        operationStatusCheck()
      });
    }

    // Detach profile from instance
    function detachProfile(){
      profile = $("#selectDetachProfileInput").val()
      console.log("Info: removing profile " + profile + " from instance " + instance);
      $.get("../api/virtual-machine/detach_instance_profile?id="+serverId+"&project="+project+"&instance="+instance+"&profile="+profile, function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Async type
        setTimeout(() => { reloadPageContent(); }, 2000);
        operationStatusCheck()
      });
    }

    // Add a disk device to instance
    function addInstanceDiskDevice(){
      diskDevice = $("#diskNameInput").val()
      console.log("Info: adding disk device " + diskDevice + " to instance " + instance);
      if ($("#diskPoolInput").val() != '') {
        source = $("#diskSourceSelectInput").val();
      }
      else {
        source = $("#diskSourceInput").val();
      }
      $.post("../api/virtual-machine/add_instance_disk_device?id="+serverId+"&project="+project+"&instance="+instance, { 
        name: $("#diskNameInput").val(), 
        pool: $("#diskPoolInput").val(),
        source: source,
        path: $("#diskPathInput").val(),
        limits_read: $("#diskLimitsReadInput").val(),
        limits_write: $("#diskLimitsWriteInput").val(),
        limits_max: $("#diskLimitsMaxInput").val(),
        required: $("#diskRequiredInput").val(),
        read_only: $("#diskReadOnlyInput").val(),
        size: $("#diskSizeInput").val(),
        size_state: $("#diskSizeStateInput").val(),
        recursive: $("#diskRecursiveInput").val(),
        propagation: $("#diskPropagationInput").val(),
        shift: $("#diskShiftInput").val(),
        raw_mount_options: $("#diskRawMountOptionsInput").val(),
        ceph_user_name: $("#diskCephUserNameInput").val(),
        ceph_cluster_name: $("#diskCephClusterNameInput").val(),
        boot_priority: $("#diskBootPriorityInput").val()
      },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Sync type
        setTimeout(() => { reloadPageContent(); }, 1000);
        operationStatusCheck()
      });
    }

    // Add a GPU device to instance
    function addInstanceGPUDevice(){
      gpuDevice = $("#gpuDeviceNameInput").val()
      console.log("Info: adding gpu device " + gpuDevice + " to instance " + instance);
      $.post("../api/virtual-machine/add_instance_gpu_device?id="+serverId+"&project="+project+"&instance="+instance, { 
        name: $("#gpuDeviceNameInput").val(), 
        type: $("#gpuTypeInput").val(),
        vendorid: $("#gpuVendoridInput").val(),
        productid: $("#gpuProductidInput").val(),
        id: $("#gpuIdInput").val(),
        pci: $("#gpuPciInput").val(),
        uid: $("#gpuUidInput").val(),
        gid: $("#gpuGidInput").val(),
        mode: $("#gpuModeInput").val(),
        mig_ci: $("#gpuMigCiInput").val(),
        mig_gi: $("#gpuMigGiInput").val(),
      },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Sync type
        setTimeout(() => { reloadPageContent(); }, 1000);
        operationStatusCheck()
      });
    }

    // Add a network device to instance
    function addNetworkDevice(){
      networkDevice = $("#networkNameInput").val()
      console.log("Info: adding network device " + networkDevice + " to instance " + instance);
      $.post("../api/virtual-machine/add_instance_network_device?id="+serverId+"&project="+project+"&instance="+instance, { 
        name: $("#networkNameInput").val(), 
        nictype: $("#networkNicTypeInput").val(),
        parent: $("#networkParentInput").val(),
        network: $("#networkNetworkInput").val(),
        interface_name: $("#networkInterfaceNameInput").val(),
        mtu: $("#networkMtuInput").val(),
        mode: $("#networkModeInput").val(),
        hwaddr: $("#networkHwaddrInput").val(),
        host_name: $("#networkHostNameInput").val(),
        limits_ingress: $("#networkLimitsIngressInput").val(),
        limits_egress: $("#networkLimitsEgressInput").val(),
        limits_max: $("#networkLimitsMaxInput").val(),
        ipv4_address: $("#networkIpv4AddressInput").val(),
        ipv4_gateway: $("#networkIpv4GatewayInput").val(),
        ipv4_host_table: $("#networkIpv4HostTableInput").val(),
        ipv4_host_address: $("#networkIpv4HostAddressInput").val(),
        ipv4_routes: $("#networkIpv4RoutesInput").val(),
        ipv4_routes_external: $("#networkIpv4RoutesExternalInput").val(),
        ipv6_address: $("#networkIpv6AddressInput").val(),
        ipv6_gateway: $("#networkIpv6GatewayInput").val(),
        ipv6_host_table: $("#networkIpv6HostTableInput").val(),
        ipv6_host_address: $("#networkIpv6HostAddressInput").val(),
        ipv6_routes: $("#networkIpv6RoutesInput").val(),
        ipv6_routes_external: $("#networkIpv6RoutesExternalInput").val(),
        security_mac_filtering: $("#networkSecurityMacFilteringInput").val(),
        security_ipv4_filtering: $("#networkSecurityIpv4FilteringInput").val(),
        security_ipv6_filtering: $("#networkSecurityIpv6FilteringInput").val(),
        maas_subnet_ipv4: $("#networkMaasSubnetIpv4Input").val(),
        maas_subnet_ipv6: $("#networkMaasSubnetIpv6Input").val(),
        boot_priority: $("#networkBootPriorityInput").val(),
        vlan: $("#networkVlanInput").val(),
        vlan_tagged: $("#networkVlanTaggedInput").val(),
        security_port_isolation: $("#networkSecurityPortIsolationInput").val(),
        gvrp: $("#networkGvrpInput").val(),
        security_acls: $("#networkSecurityAclsInput").val(),
        security_acls_default_ingress_action: $("#networkSecurityAclsDefaultIngressActionInput").val(),
        security_acls_default_egress_action: $("#networkSecurityAclsDefaultEgressActionInput").val(),
        security_acls_default_ingress_logged: $("#networkSecurityAclsDefaultIngressLoggedInput").val(),
        security_acls_default_egress_logged: $("#networkSecurityAclsDefaultEgressLoggedInput").val()
      },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Sync type
        setTimeout(() => { reloadPageContent(); }, 1000);
        operationStatusCheck()
      });
    }

    // Add a proxy device to instance
    function addInstanceProxyDevice(){
      proxyDevice = $("#proxyDeviceNameInput").val()
      console.log("Info: adding proxy device " + proxyDevice + " to instance " + instance);
      $.post("../api/virtual-machine/add_instance_proxy_device?id="+serverId+"&project="+project+"&instance="+instance, { 
        name: $("#proxyDeviceNameInput").val(), 
        listen: $("#proxyListenInput").val(),
        connect: $("#proxyConnectInput").val(),
        bind: $("#proxyBindInput").val(),
        uid: $("#proxyUidInput").val(),
        gid: $("#proxyGidInput").val(),
        mode: $("#proxyModeInput").val(),
        nat: $("#proxyNatInput").val(),
        proxy_protocol: $("#proxyProxyProtocolInput").val(),
        security_uid: $("#proxySecurityUidInput").val(),
        security_gid: $("#proxySecurityGidInput").val(),
      },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Sync type
        setTimeout(() => { reloadPageContent(); }, 1000);
        operationStatusCheck()
      });
    }

    // Add a Unix device to instance
    function addInstanceUnixDevice(){
      unixDevice = $("#unixDeviceNameInput").val()
      console.log("Info: adding Unix device " + unixDevice + " to instance " + instance);
      $.post("../api/virtual-machine/add_instance_unix_device?id="+serverId+"&project="+project+"&instance="+instance, { 
        name: $("#unixDeviceNameInput").val(), 
        type: $("#unixTypeInput").val(),
        source: $("#unixSourceInput").val(),
        path: $("#unixPathInput").val(),
        major: $("#unixMajorInput").val(),
        minor: $("#unixMinorInput").val(),
        uid: $("#unixUidInput").val(),
        gid: $("#unixGidInput").val(),
        mode: $("#unixModeInput").val(),
        required: $("#unixRequiredInput").val(),

      },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Sync type
        setTimeout(() => { reloadPageContent(); }, 1000);
        operationStatusCheck()
      });
    }

    // Add a USB device to instance
    function addInstanceUSBDevice(){
      usbDevice = $("#usbDeviceNameInput").val()
      console.log("Info: adding USB device " + usbDevice + " to instance " + instance);
      $.post("../api/virtual-machine/add_instance_usb_device?id="+serverId+"&project="+project+"&instance="+instance, { 
        name: $("#usbDeviceNameInput").val(), 
        vendorid: $("#usbVendoridInput").val(),
        productid: $("#usbProductidInput").val(),
        uid: $("#usbUidInput").val(),
        gid: $("#usbGidInput").val(),
        mode: $("#usbModeInput").val(),
      },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Sync type
        setTimeout(() => { reloadPageContent(); }, 1000);
        operationStatusCheck()
      });     
    }

    // Create a backup of instance
    function createBackup(){
      backup = $("#backupName").val()
      console.log("Info: creating backup " + backup + " for instance " + instance);
      $.post("../api/virtual-machine/create_instance_backup?id="+serverId+"&project="+project+"&instance="+instance, { 
        name: $("#backupName").val(), 
        instance_only: $("#backupInstanceOnly").val(),
        optimized_storage: $("#backupOptimizedStorage").val(),
        compression_algorithm: $("#backupCompressionAlgorithm").val(),
      },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Async type
        setTimeout(() => { reloadPageContent(); }, 2000);
        operationStatusCheck()
      }); 
    }

    // Delete a backup of instance
    function deleteBackup(backup){
      console.log("Info: confirming deletion of backup " + backup);
      if (confirm("Are you sure you want to delete backup " + backup + "?") == true) {
        console.log("Info: deleting backup " + backup + " from instance " + instance);
        $.get("../api/virtual-machine/delete_instance_backup?id="+serverId+"&project="+project+"&instance="+instance+"&backup="+backup, function (data) {
          console.log(data);
          if (data.error_code >= 400){
            alert(data.error);
          }
          //Async type
          setTimeout(() => { reloadPageContent(); }, 2000);
          operationStatusCheck()
        });
      }
    }

    // Export a backup to app
    function exportBackup(backup){
      console.log("Info: exporting backup " + backup + " from instance " + instance);
      $.get("../api/virtual-machine/export_instance_backup?id="+serverId+"&project="+project+"&instance="+instance+"&backup="+backup, function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Async type
        setTimeout(() => { reloadPageContent(); }, 2000);
        operationStatusCheck()
      });
    }

    // Display log file in modal
    function displayLog(logPath){
      console.log("Info: displaying log " + logPath);
      $.get("../api/virtual-machine/display_instance_log?id="+serverId+"&project="+project+"&log="+logPath, function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        $("#logNameInput").text(logPath);
        $("#logDataInput").val(data);
        $("#loadLogModal").modal('show');
      });
    }

    // Delete log file
    function deleteLog(logPath){
      console.log("Info: confirming deletion of log " + logPath);
      if (confirm("Are you sure you want to delete log " + logPath + "?") == true) {
        console.log("Info: deleting log " + logPath + " from instance " + instance);
        $.get("../api/virtual-machine/delete_instance_log?id="+serverId+"&project="+project+"&log="+logPath, function (data) {
          console.log(data);
          if (data.error_code >= 400){
            alert(data.error);
          }
          //Async type
          setTimeout(() => { reloadPageContent(); }, 2000);
          operationStatusCheck()
        });
      }
    }

    // Delete an instance device
    function delete_device(device){
      console.log("Info: confirming removal of device " + device);
      if (confirm("Are you sure you want to remove device " + device + "?") == true) {
        console.log("Info: removing device " + device + " from instance " + instance);
        $.get("../api/virtual-machine/delete_instance_device?id="+serverId+"&project="+project+"&instance="+instance+"&device="+device, function (data) {
          console.log(data);
          if (data.error_code >= 400){
            alert(data.error);
          }
          //Async type
          setTimeout(() => { reloadPageContent(); }, 2000);
          operationStatusCheck()
        });
      }
    }

    // Change properties options while adding network device
    function changePropertySetInput(){
      var networkPropertySetInput = $("#networkPropertySetInput").val()
      if (networkPropertySetInput == "network"){
        $("#networkNetworkRow").show();
        $("#networkParentTypeRow").show();
        $("#networkNicTypeRow").hide(); $("#networkNicTypeInput").val('');
        $("#networkParentTypeInput").val('bridge');
        changeParentTypeInput();
      }
      if (networkPropertySetInput == "nictype"){
        $("#networkNetworkRow").hide(); $("#networkNetworkInput").val('');
        $("#networkParentTypeRow").hide(); $("#networkParentTypeInput").val('');
        $("#networkNicTypeRow").show();
        $("#networkNicTypeInput").val('bridged');
        changeNicTypeInput();
      }
    }

    // Change options based on network type while adding network device
    function changeNicTypeInput(){
      var networkNicTypeInput = $("#networkNicTypeInput").val();
      if (networkNicTypeInput == "bridged"){
        $("#networkParentRow").show()
        $("#networkNetworkRow").hide(); $("#networkNetworkInput").val('');
        $("#networkInterfaceNameRow").show()
        $("#networkMtuRow").show()
        $("#networkHwaddrRow").show()
        $("#networkHostNameRow").show()
        $("#networkLimitsIngressRow").show()
        $("#networkLimitsEgressRow").show()
        $("#networkLimitsMaxRow").show()
        $("#networkIpv4AddressRow").show()
        $("#networkIpv6AddressRow").show()
        $("#networkIpv4RoutesRow").show()
        $("#networkIpv6RoutesRow").show()
        $("#networkSecurityMacFilteringRow").show()
        $("#networkSecurityIpv4FilteringRow").show()
        $("#networkSecurityIpv6FilteringRow").show()
        $("#networkMaasSubnetIpv4Row").show()
        $("#networkMaasSubnetIpv6Row").show()
        $("#networkBootPriorityRow").show()
        $("#networkVlanRow").show()
        $("#networkVlanTaggedRow").show()
        $("#networkSecurityPortIsolationRow").show()
        $("#networkGvrpRow").hide(); $("#networkGvrpInput").val('');
        $("#networkModeRow").hide(); $("#networkModeInput").val('');
        $("#networkIpv4GatewayRow").hide(); $("#networkIpv4GatewayInput").val('');
        $("#networkIpv4HostTableRow").hide(); $("#networkIpv4HostTableInput").val('');
        $("#networkIpv6GatewayRow").hide(); $("#networkIpv6GatewayInput").val('');
        $("#networkIpv6HostTableRow").hide(); $("#networkIpv6HostTableInput").val('');;
        $("#networkIpv4HostAddressRow").hide(); $("#networkIpv4HostAddressInput").val('');
        $("#networkIpv6HostAddressRow").hide(); $("#networkIpv6HostAddressInput").val('');
        $("#networkIpv4RoutesExternalRow").hide(); $("#networkIpv4RoutesExternalInput").val('');
        $("#networkIpv6RoutesExternalRow").hide(); $("#networkIpv6RoutesExternalInput").val('');
        $("#networkSecurityAclsRow").hide(); $("#networkSecurityAclsInput").val('');
        $("#networkSecurityAclsDefaultIngressActionRow").hide();$("#networkSecurityAclsDefaultIngressActionInput").val('');
        $("#networkSecurityAclsDefaultEgressActionRow").hide(); $("#networkSecurityAclsDefaultEgressActionInput").val('');
        $("#networkSecurityAclsDefaultIngressLoggedRow").hide(); $("#networkSecurityAclsDefaultIngressLoggedInput").val('');
        $("#networkSecurityAclsDefaultEgressLoggedRow").hide(); $("#networkSecurityAclsDefaultEgressLoggedInput").val('');
      }
      if (networkNicTypeInput == "macvlan"){
        $("#networkParentRow").show()
        $("#networkNetworkRow").hide(); $("#networkNetworkInput").val('');
        $("#networkInterfaceNameRow").show()
        $("#networkMtuRow").show()
        $("#networkHwaddrRow").show()
        $("#networkHostNameRow").hide(); $("#networkHostNameInput").val('');
        $("#networkLimitsIngressRow").hide(); $("#networkLimitsIngressInput").val('');
        $("#networkLimitsEgressRow").hide(); $("#networkLimitsEgressInput").val('');
        $("#networkLimitsMaxRow").hide(); $("#networkLimitsMaxInput").val('');
        $("#networkIpv4AddressRow").hide(); $("#networkIpv4AddressInput").val('');
        $("#networkIpv6AddressRow").hide(); $("#networkIpv6AddressInput").val('');
        $("#networkIpv4RoutesRow").hide(); $("#networkIpv4RoutesInput").val('');
        $("#networkIpv6RoutesRow").hide(); $("#networkIpv6RoutesInput").val('');
        $("#networkSecurityMacFilteringRow").hide(); $("#networkSecurityMacFilteringInput").val('');
        $("#networkSecurityIpv4FilteringRow").hide(); $("#networkSecurityIpv4FilteringInput").val('');
        $("#networkSecurityIpv6FilteringRow").hide(); $("#networkSecurityIpv6FilteringInput").val('');
        $("#networkMaasSubnetIpv4Row").show()
        $("#networkMaasSubnetIpv6Row").show()
        $("#networkBootPriorityRow").show()
        $("#networkVlanRow").show()
        $("#networkVlanTaggedRow").hide(); $("#networkVlanTaggedInput").val('');
        $("#networkSecurityPortIsolationRow").hide(); $("#networkSecurityPortIsolationInput").val('');
        $("#networkGvrpRow").show()
        $("#networkModeRow").hide(); $("#networkModeInput").val('');
        $("#networkIpv4GatewayRow").hide(); $("#networkIpv4GatewayInput").val('');
        $("#networkIpv4HostTableRow").hide(); $("#networkIpv4HostTableInput").val('');
        $("#networkIpv6GatewayRow").hide(); $("#networkIpv6GatewayInput").val('');
        $("#networkIpv6HostTableRow").hide(); $("#networkIpv6HostTableInput").val('');
        $("#networkIpv4HostAddressRow").hide(); $("#networkIpv4HostAddressInput").val('');
        $("#networkIpv6HostAddressRow").hide(); $("#networkIpv6HostAddressInput").val('');
        $("#networkIpv4RoutesExternalRow").hide(); $("#networkIpv4RoutesExternalInput").val('');
        $("#networkIpv6RoutesExternalRow").hide(); $("#networkIpv6RoutesExternalInput").val('');
        $("#networkSecurityAclsRow").hide(); $("#networkSecurityAclsInput").val('');
        $("#networkSecurityAclsDefaultIngressActionRow").hide(); $("#networkSecurityAclsDefaultIngressActionInput").val('');
        $("#networkSecurityAclsDefaultEgressActionRow").hide(); $("#networkSecurityAclsDefaultEgressActionInput").val('');
        $("#networkSecurityAclsDefaultIngressLoggedRow").hide(); $("#networkSecurityAclsDefaultIngressLoggedInput").val('');
        $("#networkSecurityAclsDefaultEgressLoggedRow").hide(); $("#networkSecurityAclsDefaultEgressLoggedInput").val('');
      }
      if (networkNicTypeInput == "sriov"){
        $("#networkParentRow").show()
        $("#networkNetworkRow").hide(); $("#networkNetworkInput").val('');
        $("#networkInterfaceNameRow").show()
        $("#networkMtuRow").show()
        $("#networkHwaddrRow").show()
        $("#networkHostNameRow").hide(); $("#networkHostNameInput").val('');
        $("#networkLimitsIngressRow").hide(); $("#networkLimitsIngressInput").val('');
        $("#networkLimitsEgressRow").hide(); $("#networkLimitsEgressInput").val('');
        $("#networkLimitsMaxRow").hide(); $("#networkLimitsMaxInput").val('');
        $("#networkIpv4AddressRow").hide(); $("#networkIpv4AddressInput").val('');
        $("#networkIpv6AddressRow").hide(); $("#networkIpv6AddressInput").val('');
        $("#networkIpv4RoutesRow").hide(); $("#networkIpv4RoutesInput").val('');
        $("#networkIpv6RoutesRow").hide(); $("#networkIpv6RoutesInput").val('');
        $("#networkSecurityMacFilteringRow").show()
        $("#networkSecurityIpv4FilteringRow").hide(); $("#networkSecurityIpv4FilteringInput").val('');
        $("#networkSecurityIpv6FilteringRow").hide(); $("#networkSecurityIpv6FilteringInput").val('');
        $("#networkMaasSubnetIpv4Row").show()
        $("#networkMaasSubnetIpv6Row").show()
        $("#networkBootPriorityRow").show()
        $("#networkVlanRow").show()
        $("#networkVlanTaggedRow").hide(); $("#networkVlanTaggedInput").val('');
        $("#networkSecurityPortIsolationRow").hide(); $("#networkSecurityPortIsolationInput").val('');
        $("#networkGvrpRow").hide(); $("#networkGvrpInput").val('');
        $("#networkModeRow").hide(); $("#networkModeInput").val('');
        $("#networkIpv4GatewayRow").hide(); $("#networkIpv4GatewayInput").val('');
        $("#networkIpv4HostTableRow").hide(); $("#networkIpv4HostTableInput").val('');
        $("#networkIpv6GatewayRow").hide(); $("#networkIpv6GatewayInput").val('');
        $("#networkIpv6HostTableRow").hide(); $("#networkIpv6HostTableInput").val('');
        $("#networkIpv4HostAddressRow").hide(); $("#networkIpv4HostAddressInput").val('');
        $("#networkIpv6HostAddressRow").hide(); $("#networkIpv6HostAddressInput").val('');
        $("#networkIpv4RoutesExternalRow").hide(); $("#networkIpv4RoutesExternalInput").val('');
        $("#networkIpv6RoutesExternalRow").hide(); $("#networkIpv6RoutesExternalInput").val('');
        $("#networkSecurityAclsRow").hide(); $("#networkSecurityAclsInput").val('');
        $("#networkSecurityAclsDefaultIngressActionRow").hide(); $("#networkSecurityAclsDefaultIngressActionInput").val('');
        $("#networkSecurityAclsDefaultEgressActionRow").hide(); $("#networkSecurityAclsDefaultEgressActionInput").val('');
        $("#networkSecurityAclsDefaultIngressLoggedRow").hide(); $("#networkSecurityAclsDefaultIngressLoggedInput").val('');
        $("#networkSecurityAclsDefaultEgressLoggedRow").hide(); $("#networkSecurityAclsDefaultEgressLoggedInput").val('');
      }
      if (networkNicTypeInput == "physical"){
        $("#networkParentRow").show()
        $("#networkNetworkRow").hide(); $("#networkNetworkInput").val('');
        $("#networkInterfaceNameRow").show()
        $("#networkMtuRow").show()
        $("#networkHwaddrRow").show()
        $("#networkHostNameRow").hide(); $("#networkHostNameInput").val('');
        $("#networkLimitsIngressRow").hide(); $("#networkLimitsIngressInput").val('');
        $("#networkLimitsEgressRow").hide(); $("#networkLimitsEgressInput").val('');
        $("#networkLimitsMaxRow").hide(); $("#networkLimitsMaxInput").val('');
        $("#networkIpv4AddressRow").hide(); $("#networkIpv4AddressInput").val('');
        $("#networkIpv6AddressRow").hide(); $("#networkIpv6AddressInput").val('');
        $("#networkIpv4RoutesRow").hide(); $("#networkIpv4RoutesInput").val('');
        $("#networkIpv6RoutesRow").hide(); $("#networkIpv6RoutesInput").val('');
        $("#networkSecurityMacFilteringRow").hide(); $("#networkSecurityMacFilteringInput").val('');
        $("#networkSecurityIpv4FilteringRow").hide(); $("#networkSecurityIpv4FilteringInput").val('');
        $("#networkSecurityIpv6FilteringRow").hide(); $("#networkSecurityIpv6FilteringInput").val('');
        $("#networkMaasSubnetIpv4Row").show()
        $("#networkMaasSubnetIpv6Row").show()
        $("#networkBootPriorityRow").show()
        $("#networkVlanRow").show()
        $("#networkVlanTaggedRow").hide(); $("#networkVlanTaggedInput").val('');
        $("#networkSecurityPortIsolationRow").hide(); $("#networkSecurityPortIsolationInput").val('');
        $("#networkGvrpRow").show()
        $("#networkModeRow").hide(); $("#networkModeInput").val('');
        $("#networkIpv4GatewayRow").hide(); $("#networkIpv4GatewayInput").val('');
        $("#networkIpv4HostTableRow").hide(); $("#networkIpv4HostTableInput").val('');
        $("#networkIpv6GatewayRow").hide(); $("#networkIpv6GatewayInput").val('');
        $("#networkIpv6HostTableRow").hide(); $("#networkIpv6HostTableInput").val('');
        $("#networkIpv4HostAddressRow").hide(); $("#networkIpv4HostAddressInput").val('');
        $("#networkIpv6HostAddressRow").hide(); $("#networkIpv6HostAddressInput").val('');
        $("#networkIpv4RoutesExternalRow").hide(); $("#networkIpv4RoutesExternalInput").val('');
        $("#networkIpv6RoutesExternalRow").hide(); $("#networkIpv6RoutesExternalInput").val('');
        $("#networkSecurityAclsRow").hide(); $("#networkSecurityAclsInput").val('');
        $("#networkSecurityAclsDefaultIngressActionRow").hide(); $("#networkSecurityAclsDefaultIngressActionInput").val('');
        $("#networkSecurityAclsDefaultEgressActionRow").hide(); $("#networkSecurityAclsDefaultEgressActionInput").val('');
        $("#networkSecurityAclsDefaultIngressLoggedRow").hide(); $("#networkSecurityAclsDefaultIngressLoggedInput").val('');
        $("#networkSecurityAclsDefaultEgressLoggedRow").hide(); $("#networkSecurityAclsDefaultEgressLoggedInput").val('');
      }
      if (networkNicTypeInput == "ipvlan"){
        $("#networkParentRow").show()
        $("#networkNetworkRow").hide(); $("#networkNetworkInput").val('');
        $("#networkInterfaceNameRow").show()
        $("#networkMtuRow").show()
        $("#networkHwaddrRow").show()
        $("#networkHostNameRow").hide(); $("#networkHostNameInput").val('');
        $("#networkLimitsIngressRow").hide(); $("#networkLimitsIngressInput").val('');
        $("#networkLimitsEgressRow").hide(); $("#networkLimitsEgressInput").val('');
        $("#networkLimitsMaxRow").hide(); $("#netnetworkLimitsMaxRowworkModeInput").val('');
        $("#networkIpv4AddressRow").show()
        $("#networkIpv6AddressRow").show()
        $("#networkIpv4RoutesRow").hide(); $("#networkIpv4RoutesInput").val('');
        $("#networkIpv6RoutesRow").hide(); $("#networkIpv6RoutesInput").val('');
        $("#networkSecurityMacFilteringRow").hide(); $("#networkSecurityMacFilteringInput").val('');
        $("#networkSecurityIpv4FilteringRow").hide(); $("#networkSecurityIpv4FilteringInput").val('');
        $("#networkSecurityIpv6FilteringRow").hide(); $("#networkSecurityIpv6FilteringInput").val('');
        $("#networkMaasSubnetIpv4Row").hide(); $("#networkMaasSubnetIpv4Input").val('');
        $("#networkMaasSubnetIpv6Row").hide(); $("#networkMaasSubnetIpv6Input").val('');
        $("#networkBootPriorityRow").hide(); $("#networkBootPriorityInput").val('');
        $("#networkVlanRow").show()
        $("#networkVlanTaggedRow").hide(); $("#networkVlanTaggedInput").val('');
        $("#networkSecurityPortIsolationRow").hide(); $("#netnetworkSecurityPortIsolationRowworkModeInput").val('');
        $("#networkGvrpRow").show()
        $("#networkModeRow").show()
        $("#networkIpv4GatewayRow").show()
        $("#networkIpv4HostTableRow").show()
        $("#networkIpv6GatewayRow").show()
        $("#networkIpv6HostTableRow").show()
        $("#networkIpv4HostAddressRow").hide(); $("#networkIpv4HostAddressInput").val('');
        $("#networkIpv6HostAddressRow").hide(); $("#networkIpv6HostAddressInput").val('');
        $("#networkIpv4RoutesExternalRow").hide(); $("#networkIpv4RoutesExternalInput").val('');
        $("#networkIpv6RoutesExternalRow").hide(); $("#networkIpv6RoutesExternalInput").val('');
        $("#networkSecurityAclsRow").hide(); $("#networkSecurityAclsInput").val('');
        $("#networkSecurityAclsDefaultIngressActionRow").hide(); $("#networkSecurityAclsDefaultIngressActionInput").val('');
        $("#networkSecurityAclsDefaultEgressActionRow").hide(); $("#networkSecurityAclsDefaultEgressActionInput").val('');
        $("#networkSecurityAclsDefaultIngressLoggedRow").hide(); $("#networkSecurityAclsDefaultIngressLoggedInput").val('');
        $("#networkSecurityAclsDefaultEgressLoggedRow").hide(); $("#networkSecurityAclsDefaultEgressLoggedInput").val('');
      }
      if (networkNicTypeInput == "p2p"){
        $("#networkParentRow").hide(); $("#networkParentInput").val('');
        $("#networkNetworkRow").hide(); $("#networkNetworkInput").val('');
        $("#networkInterfaceNameRow").show()
        $("#networkMtuRow").show()
        $("#networkHwaddrRow").show()
        $("#networkHostNameRow").show()
        $("#networkLimitsIngressRow").show()
        $("#networkLimitsEgressRow").show()
        $("#networkLimitsMaxRow").show()
        $("#networkIpv4AddressRow").hide(); $("#networkIpv4AddressInput").val('');
        $("#networkIpv6AddressRow").hide(); $("#networkIpv6AddressInput").val('');
        $("#networkIpv4RoutesRow").show()
        $("#networkIpv6RoutesRow").show()
        $("#networkSecurityMacFilteringRow").hide(); $("#networkSecurityMacFilteringInput").val('');
        $("#networkSecurityIpv4FilteringRow").hide(); $("#netnetworkSecurityIpv4FilteringRowworkModeInput").val('');
        $("#networkSecurityIpv6FilteringRow").hide(); $("#networkSecurityIpv6FilteringInput").val('');
        $("#networkMaasSubnetIpv4Row").hide(); $("#networkMaasSubnetIpv4Input").val('');
        $("#networkMaasSubnetIpv6Row").hide(); $("#networkMaasSubnetIpv6Input").val('');
        $("#networkBootPriorityRow").show()
        $("#networkVlanRow").hide(); $("#networkVlanInput").val('');
        $("#networkVlanTaggedRow").hide(); $("#networkVlanTaggedInput").val('');
        $("#networkSecurityPortIsolationRow").hide(); $("#networkSecurityPortIsolationInput").val('');
        $("#networkGvrpRow").hide(); $("#networkGvrpInput").val('');
        $("#networkModeRow").hide(); $("#networkModeInput").val('');
        $("#networkIpv4GatewayRow").hide(); $("#networkIpv4GatewayInput").val('');
        $("#networkIpv4HostTableRow").hide(); $("#networkIpv4HostTableInput").val('');
        $("#networkIpv6GatewayRow").hide(); $("#networkIpv6GatewayInput").val('');
        $("#networkIpv6HostTableRow").hide(); $("#networkIpv6HostTableInput").val('');
        $("#networkIpv4HostAddressRow").hide(); $("#networkIpv4HostAddressInput").val('');
        $("#networkIpv6HostAddressRow").hide(); $("#networkIpv6HostAddressInput").val('');
        $("#networkIpv4RoutesExternalRow").hide(); $("#networkIpv4RoutesExternalInput").val('');
        $("#networkIpv6RoutesExternalRow").hide(); $("#networkIpv6RoutesExternalInput").val('');
        $("#networkSecurityAclsRow").hide(); $("#networkSecurityAclsInput").val('');
        $("#networkSecurityAclsDefaultIngressActionRow").hide(); $("#networkSecurityAclsDefaultIngressActionInput").val('');
        $("#networkSecurityAclsDefaultEgressActionRow").hide(); $("#networkSecurityAclsDefaultEgressActionInput").val('');
        $("#networkSecurityAclsDefaultIngressLoggedRow").hide(); $("#networkSecurityAclsDefaultIngressLoggedInput").val('');
        $("#networkSecurityAclsDefaultEgressLoggedRow").hide(); $("#networkSecurityAclsDefaultEgressLoggedInput").val('');
      }
      if (networkNicTypeInput == "routed"){
        $("#networkParentRow").show()
        $("#networkNetworkRow").hide(); $("#networkNetworkInput").val('');
        $("#networkInterfaceNameRow").show()
        $("#networkMtuRow").show()
        $("#networkHwaddrRow").show()
        $("#networkHostNameRow").show()
        $("#networkLimitsIngressRow").show()
        $("#networkLimitsEgressRow").show()
        $("#networkLimitsMaxRow").show()
        $("#networkIpv4AddressRow").show()
        $("#networkIpv6AddressRow").show()
        $("#networkIpv4RoutesRow").hide(); $("#networkIpv4RoutesInput").val('');
        $("#networkIpv6RoutesRow").hide(); $("#networkIpv6RoutesInput").val('');
        $("#networkSecurityMacFilteringRow").hide(); $("#networkSecurityMacFilteringInput").val('');
        $("#networkSecurityIpv4FilteringRow").hide(); $("#networkSecurityIpv4FilteringInput").val('');
        $("#networkSecurityIpv6FilteringRow").hide(); $("#networkSecurityIpv6FilteringInput").val('');
        $("#networkMaasSubnetIpv4Row").hide(); $("#networkMaasSubnetIpv4Input").val('');
        $("#networkMaasSubnetIpv6Row").hide(); $("#networkMaasSubnetIpv6Input").val('');
        $("#networkBootPriorityRow").hide(); $("#networkBootPriorityInput").val('');
        $("#networkVlanRow").show()
        $("#networkVlanTaggedRow").hide(); $("#networkVlanTaggedInput").val('');
        $("#networkSecurityPortIsolationRow").hide(); $("#networkSecurityPortIsolationInput").val('');
        $("#networkGvrpRow").show()
        $("#networkModeRow").hide(); $("#networkModeInput").val('');
        $("#networkIpv4GatewayRow").show()
        $("#networkIpv4HostTableRow").show()
        $("#networkIpv6GatewayRow").show()
        $("#networkIpv6HostTableRow").show()
        $("#networkIpv4HostAddressRow").show()
        $("#networkIpv6HostAddressRow").show()
        $("#networkIpv4RoutesExternalRow").hide(); $("#networkIpv4RoutesExternalInput").val('');
        $("#networkIpv6RoutesExternalRow").hide(); $("#networkIpv6RoutesExternalInput").val('');
        $("#networkSecurityAclsRow").hide(); $("#networkSecurityAclsInput").val('');
        $("#networkSecurityAclsDefaultIngressActionRow").hide(); $("#networkSecurityAclsDefaultIngressActionInput").val('');
        $("#networkSecurityAclsDefaultEgressActionRow").hide(); $("#networkSecurityAclsDefaultEgressActionInput").val('');
        $("#networkSecurityAclsDefaultIngressLoggedRow").hide(); $("#networkSecurityAclsDefaultIngressLoggedInput").val('');
        $("#networkSecurityAclsDefaultEgressLoggedRow").hide(); $("#networkSecurityAclsDefaultEgressLoggedInput").val('');
      }
    }

    // Change options based on parent type while adding network devices
    function changeParentTypeInput(){
      var networkParentTypeInput = $("#networkParentTypeInput").val();
      if (networkParentTypeInput == "bridge"){
        $("#networkParentRow").hide(); $("#networkParentInput").val('');
        $("#networkNetworkRow").show()
        $("#networkInterfaceNameRow").show()
        $("#networkMtuRow").hide(); $("#networkMtuInput").val('');
        $("#networkHwaddrRow").show()
        $("#networkHostNameRow").show()
        $("#networkLimitsIngressRow").show()
        $("#networkLimitsEgressRow").show()
        $("#networkLimitsMaxRow").show()
        $("#networkIpv4AddressRow").show()
        $("#networkIpv6AddressRow").show()
        $("#networkIpv4RoutesRow").show()
        $("#networkIpv6RoutesRow").show()
        $("#networkSecurityMacFilteringRow").show()
        $("#networkSecurityIpv4FilteringRow").show()
        $("#networkSecurityIpv6FilteringRow").show()
        $("#networkMaasSubnetIpv4Row").hide(); $("#networkMaasSubnetIpv4Input").val('');
        $("#networkMaasSubnetIpv6Row").hide(); $("#networkMaasSubnetIpv6Input").val('');
        $("#networkBootPriorityRow").show()
        $("#networkVlanRow").show()
        $("#networkVlanTaggedRow").show()
        $("#networkSecurityPortIsolationRow").show()
        $("#networkGvrpRow").hide(); $("#networkGvrpInput").val('');
        $("#networkModeRow").hide(); $("#networkModeInput").val('');
        $("#networkIpv4GatewayRow").hide(); $("#networkIpv4GatewayInput").val('');
        $("#networkIpv4HostTableRow").hide(); $("#networkIpv4HostTableInput").val('');
        $("#networkIpv6GatewayRow").hide(); $("#networkIpv6GatewayInput").val('');
        $("#networkIpv6HostTableRow").hide(); $("#networkIpv6HostTableInput").val('');
        $("#networkIpv4HostAddressRow").hide(); $("#networkIpv4HostAddressInput").val('');
        $("#networkIpv6HostAddressRow").hide(); $("#networkIpv6HostAddressInput").val('');
        $("#networkIpv4RoutesExternalRow").hide(); $("#networkIpv4RoutesExternalInput").val('');
        $("#networkIpv6RoutesExternalRow").hide(); $("#networkIpv6RoutesExternalInput").val('');
        $("#networkSecurityAclsRow").hide(); $("#networkSecurityAclsInput").val('');
        $("#networkSecurityAclsDefaultIngressActionRow").hide(); $("#networkSecurityAclsDefaultIngressActionInput").val('');
        $("#networkSecurityAclsDefaultEgressActionRow").hide(); $("#networkSecurityAclsDefaultEgressActionInput").val('');
        $("#networkSecurityAclsDefaultIngressLoggedRow").hide(); $("#networkSecurityAclsDefaultIngressLoggedInput").val('');
        $("#networkSecurityAclsDefaultEgressLoggedRow").hide(); $("#networkSecurityAclsDefaultEgressLoggedInput").val('');
      }
      if (networkParentTypeInput == "macvlan"){
        $("#networkParentRow").hide(); $("#networkParentInput").val('');
        $("#networkNetworkRow").show()
        $("#networkInterfaceNameRow").show()
        $("#networkMtuRow").hide(); $("#networkMtuInput").val('');
        $("#networkHwaddrRow").show()
        $("#networkHostNameRow").hide(); $("#networkHostNameInput").val('');
        $("#networkLimitsIngressRow").hide(); $("#networkLimitsIngressInput").val('');
        $("#networkLimitsEgressRow").hide(); $("#networkLimitsEgressInput").val('');
        $("#networkLimitsMaxRow").hide(); $("#networkLimitsMaxInput").val('');
        $("#networkIpv4AddressRow").hide(); $("#networkIpv4AddressInput").val('');
        $("#networkIpv6AddressRow").hide(); $("#networkIpv6AddressInput").val('');
        $("#networkIpv4RoutesRow").hide(); $("#networkIpv4RoutesInput").val('');
        $("#networkIpv6RoutesRow").hide(); $("#networkIpv6RoutesInput").val('');
        $("#networkSecurityMacFilteringRow").hide(); $("#networkSecurityMacFilteringInput").val('');
        $("#networkSecurityIpv4FilteringRow").hide(); $("#networkSecurityIpv4FilteringInput").val('');
        $("#networkSecurityIpv6FilteringRow").hide(); $("#networkSecurityIpv6FilteringInput").val('');
        $("#networkMaasSubnetIpv4Row").hide(); $("#networkMaasSubnetIpv4Input").val('');
        $("#networkMaasSubnetIpv6Row").hide(); $("#networkMaasSubnetIpv6Input").val('');
        $("#networkBootPriorityRow").show()
        $("#networkVlanRow").show()
        $("#networkVlanTaggedRow").hide(); $("#networkVlanTaggedInput").val('');
        $("#networkSecurityPortIsolationRow").hide(); $("#networkSecurityPortIsolationInput").val('');
        $("#networkGvrpRow").show()
        $("#networkModeRow").hide(); $("#networkModeInput").val('');
        $("#networkIpv4GatewayRow").hide(); $("#networkIpv4GatewayInput").val('');
        $("#networkIpv4HostTableRow").hide(); $("#networkIpv4HostTableInput").val('');
        $("#networkIpv6GatewayRow").hide(); $("#networkIpv6GatewayInput").val('');
        $("#networkIpv6HostTableRow").hide(); $("#networkIpv6HostTableInput").val('');
        $("#networkIpv4HostAddressRow").hide(); $("#networkIpv4HostAddressInput").val('');
        $("#networkIpv6HostAddressRow").hide(); $("#networkIpv6HostAddressInput").val('');
        $("#networkIpv4RoutesExternalRow").hide(); $("#networkIpv4RoutesExternalInput").val('');
        $("#networkIpv6RoutesExternalRow").hide(); $("#networkIpv6RoutesExternalInput").val('');
        $("#networkSecurityAclsRow").hide(); $("#networkSecurityAclsInput").val('');
        $("#networkSecurityAclsDefaultIngressActionRow").hide(); $("#networkSecurityAclsDefaultIngressActionInput").val('');
        $("#networkSecurityAclsDefaultEgressActionRow").hide(); $("#networkSecurityAclsDefaultEgressActionInput").val('');
        $("#networkSecurityAclsDefaultIngressLoggedRow").hide(); $("#networkSecurityAclsDefaultIngressLoggedInput").val('');
        $("#networkSecurityAclsDefaultEgressLoggedRow").hide(); $("#networkSecurityAclsDefaultEgressLoggedInput").val('');
      }
      if (networkParentTypeInput == "ovn"){
        $("#networkParentRow").hide(); $("#networkParentInput").val('');
        $("#networkNetworkRow").show()
        $("#networkInterfaceNameRow").show()
        $("#networkMtuRow").hide(); $("#networkMtuInput").val('');
        $("#networkHwaddrRow").show()
        $("#networkHostNameRow").show()
        $("#networkLimitsIngressRow").hide(); $("#networkLimitsIngressInput").val('');
        $("#networkLimitsEgressRow").hide(); $("#networkLimitsEgressInput").val('');
        $("#networkLimitsMaxRow").hide(); $("#networkLimitsMaxInput").val('');
        $("#networkIpv4AddressRow").show()
        $("#networkIpv6AddressRow").show()
        $("#networkIpv4RoutesRow").show()
        $("#networkIpv6RoutesRow").show()
        $("#networkSecurityMacFilteringRow").hide(); $("#networkSecurityMacFilteringInput").val('');
        $("#networkSecurityIpv4FilteringRow").hide(); $("#networkSecurityIpv4FilteringInput").val('');
        $("#networkSecurityIpv6FilteringRow").hide(); $("#networkSecurityIpv6FilteringInput").val('');
        $("#networkMaasSubnetIpv4Row").hide(); $("#networkMaasSubnetIpv4Input").val('');
        $("#networkMaasSubnetIpv6Row").hide(); $("#networkMaasSubnetIpv6Input").val('');
        $("#networkBootPriorityRow").show()
        $("#networkVlanRow").hide(); $("#networkVlanInput").val('');
        $("#networkVlanTaggedRow").hide(); $("#networkVlanTaggedInput").val('');
        $("#networkSecurityPortIsolationRow").hide(); $("#networkSecurityPortIsolationInput").val('');
        $("#networkGvrpRow").hide(); $("#networkGvrpInput").val('');
        $("#networkModeRow").hide(); $("#networkModeInput").val('');
        $("#networkIpv4GatewayRow").hide(); $("#networkIpv4GatewayInput").val('');
        $("#networkIpv4HostTableRow").hide(); $("#networkIpv4HostTableInput").val('');
        $("#networkIpv6GatewayRow").hide(); $("#networkIpv6GatewayInput").val('');
        $("#networkIpv6HostTableRow").hide(); $("#networkIpv6HostTableInput").val('');
        $("#networkIpv4HostAddressRow").hide(); $("#networkIpv4HostAddressInput").val('');
        $("#networkIpv6HostAddressRow").hide(); $("#networkIpv6HostAddressInput").val('');
        $("#networkIpv4RoutesExternalRow").show()
        $("#networkIpv6RoutesExternalRow").show()
        $("#networkSecurityAclsRow").show()
        $("#networkSecurityAclsDefaultIngressActionRow").show()
        $("#networkSecurityAclsDefaultEgressActionRow").show()
        $("#networkSecurityAclsDefaultIngressLoggedRow").show()
        $("#networkSecurityAclsDefaultEgressLoggedRow").show()
      }
      if (networkParentTypeInput == "sriov"){
        $("#networkParentRow").hide(); $("#networkParentInput").val('');
        $("#networkNetworkRow").show()
        $("#networkInterfaceNameRow").show()
        $("#networkMtuRow").hide(); $("#networkMtuInput").val('');
        $("#networkHwaddrRow").show()
        $("#networkHostNameRow").hide(); $("#networkHostNameInput").val('');
        $("#networkLimitsIngressRow").hide(); $("#networkLimitsIngressInput").val('');
        $("#networkLimitsEgressRow").hide(); $("#networkLimitsEgressInput").val('');
        $("#networkLimitsMaxRow").hide(); $("#networkLimitsMaxInput").val('');
        $("#networkIpv4AddressRow").hide(); $("#networkIpv4AddressInput").val('');
        $("#networkIpv6AddressRow").hide(); $("#networkIpv6AddressInput").val('');
        $("#networkIpv4RoutesRow").hide(); $("#networkIpv4RoutesInput").val('');
        $("#networkIpv6RoutesRow").hide(); $("#networkIpv6RoutesInput").val('');
        $("#networkSecurityMacFilteringRow").show()
        $("#networkSecurityIpv4FilteringRow").hide(); $("#networkSecurityIpv4FilteringInput").val('');
        $("#networkSecurityIpv6FilteringRow").hide(); $("#networkSecurityIpv6FilteringInput").val('');
        $("#networkMaasSubnetIpv4Row").hide(); $("#networkMaasSubnetIpv4Input").val('');
        $("#networkMaasSubnetIpv6Row").hide(); $("#networkMaasSubnetIpv6Input").val('');
        $("#networkBootPriorityRow").show()
        $("#networkVlanRow").show()
        $("#networkVlanTaggedRow").hide(); $("#networkVlanTaggedInput").val('');
        $("#networkSecurityPortIsolationRow").hide(); $("#networkSecurityPortIsolationInput").val('');
        $("#networkGvrpRow").hide(); $("#networkGvrpInput").val('');
        $("#networkModeRow").hide(); $("#networkModeInput").val('');
        $("#networkIpv4GatewayRow").hide(); $("#networkIpv4GatewayInput").val('');
        $("#networkIpv4HostTableRow").hide(); $("#networkIpv4HostTableInput").val('');
        $("#networkIpv6GatewayRow").hide(); $("#networkIpv6GatewayInput").val('');
        $("#networkIpv6HostTableRow").hide(); $("#networkIpv6HostTableInput").val('');
        $("#networkIpv4HostAddressRow").hide(); $("#networkIpv4HostAddressInput").val('');
        $("#networkIpv6HostAddressRow").hide(); $("#networkIpv6HostAddressInput").val('');
        $("#networkIpv4RoutesExternalRow").hide(); $("#networkIpv4RoutesExternalInput").val('');
        $("#networkIpv6RoutesExternalRow").hide(); $("#networkIpv6RoutesExternalInput").val('');
        $("#networkSecurityAclsRow").hide(); $("#networkSecurityAclsInput").val('');
        $("#networkSecurityAclsDefaultIngressActionRow").hide(); $("#networkSecurityAclsDefaultIngressActionInput").val('');
        $("#networkSecurityAclsDefaultEgressActionRow").hide(); $("#networkSecurityAclsDefaultEgressActionInput").val('');
        $("#networkSecurityAclsDefaultIngressLoggedRow").hide(); $("#networkSecurityAclsDefaultIngressLoggedInput").val('');
        $("#networkSecurityAclsDefaultEgressLoggedRow").hide(); $("#networkSecurityAclsDefaultEgressLoggedInput").val('');
      }
    }

    // Change the state of an instance: start, stop, freeze, unfreeze, restart, force stop
    function changeItemState(instance, action, force=false){
      console.log("Info: starting virtual machine " + instance);
      $.post("../api/virtual-machine/change_instance_state?id=" + serverId + "&project=" + project, { instance: instance, action: action, force: force }, function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Async type
        setTimeout(() => { reloadPageContent(); }, 2000);
        operationStatusCheck()
      });
    }

    // Change storage volumes based on storage pool in add disk device modal
    function changeStorageVolumeInput(){
      var diskPoolInput = $("#diskPoolInput").val();
      if (diskPoolInput == ""){
        $("#diskSourceInput").show()
        $("#diskSourceSelectInput").hide()
      }
      else{
        //show and populate select field
        $("#diskSourceSelectInput").empty().append('<option value="">(not set)</option>');
        $.getJSON("../api/storage-volumes/list_storage_volumes?id="+serverId+"&project="+project+"&pool="+diskPoolInput, function (data) {
          data = data.metadata
          for (var index = 0; index < data.length; index++) {
            if (data[index].includes('/1.0/storage-pools/' + diskPoolInput + '/volumes/custom/')){
              optionText = data[index].replace('/1.0/storage-pools/' + diskPoolInput + '/volumes/custom/','');
              $('#diskSourceSelectInput').append('<option value="' + optionText + '">' + optionText + '</option>');
            }
          }
        })
        $("#diskSourceInput").hide()
        $("#diskSourceSelectInput").show()
      }
    }

    // Dynamically change Instance Actions options based on state
    function displayMenuOptions(data){
      switch (data.status){
        case "Stopped":
          $('#startLinkButton').show();
          $('#stopLinkButton').hide();
          $('#unfreezeLinkButton').hide();
          $('#startLink').show();
          $('#stopLink').hide();
          $('#unfreezeLink').hide();
          $('#restartInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#stopInstanceForcefullyOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#freezeInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#snapshotInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#attachProfileOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#detachProfileOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#editInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#renameInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#copyInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#migrateInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#publishInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#deleteInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#startExecButton').prop('disabled', true);
          $('#startConsoleButton').prop('disabled', true);
          break;
        case "Frozen":
          $('#startLinkButton').hide();
          $('#stopLinkButton').hide();
          $('#unfreezeLinkButton').show();
          $('#startLink').hide();
          $('#stopLink').hide();
          $('#unfreezeLink').show();
          $('#restartInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#stopInstanceForcefullyOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#freezeInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#snapshotInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#attachProfileOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#detachProfileOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#editInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#renameInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#copyInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#migrateInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#publishInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#deleteInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#startExecButton').prop('disabled', true);
          $('#startConsoleButton').prop('disabled', true);
          break;
        default:
          $('#startLinkButton').hide();
          $('#stopLinkButton').show();
          $('#unfreezeLinkButton').hide();
          $('#startLink').hide();
          $('#stopLink').show();
          $('#unfreezeLink').hide();
          $('#restartInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#stopInstanceForcefullyOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#freezeInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#snapshotInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#attachProfileOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#detachProfileOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#editInstanceOption').prop('disabled', false).removeClass('text-muted').addClass('text-primary');
          $('#renameInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#copyInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#migrateInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#publishInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          $('#deleteInstanceOption').prop('disabled', true).removeClass('text-primary').addClass('text-muted');
          if (server_clustered && server_name != target_location){
            $('#startExecButton').prop('disabled', true);
            $('#startConsoleButton').prop('disabled', true);
          }
          else {
            $('#startExecButton').prop('disabled', false);
            $('#startConsoleButton').prop('disabled', false);
          }
      }
    }

    // Show the edit instance modal
    function editInstance(){
      console.log("Info: viewing instance " + instance);
      $.get("../api/virtual-machine/get_instance?id="+serverId+"&project="+project+"&name="+instance+"&recursion=1", function (data) {
        data = data.metadata;

        if (data.error_code >= 400){
          alert(data.error);
        }

        //Clean all values in form
        $("#editModal").find('input, select, textarea').val('');

        //Set existing description value in form
        if (data.hasOwnProperty('description')) { $("#virtualMachineDescriptionInput").val(data.description); }

        //Set existing values from config in form
        $.each(data.config, function(key, value) {
          item = "#"+key
          $(`[name="${key}"]`).val(value);
          console.log(item + "=" + value)
        })

        //Set instance name on form
        $("#instanceNameEditInput").text("Name: " + instance);

        //Set json tab content
        $("#jsonEditInput").val(JSON.stringify(data, null, 2));

        //Show modal with form and json
        $("#editModal").modal('show');

      });
    }

    // Update the instance from the edit instance modal form
    function updateInstanceForm(){
      console.log("Info: updating instance " + instance);
      data = $('#editForm').serialize();
      $.post("../api/virtual-machine/update_instance?id=" + serverId + "&project=" + project + "&instance=" + encodeURI(instance), data,  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Sync type
        setTimeout(() => { reloadPageContent(); }, 1000);
        operationStatusCheck()
      });
    }

    // Update the instance from the edit instance modal json
    function updateInstanceJson(){
      var instanceUpdateJSON = $("#jsonEditInstanceInput").val();
      console.log("Info: updating instance " + instance);
      $.post("../api/virtual-machine/update_instance?id=" + serverId + "&project=" + project + "&instance=" + encodeURI(instance), { 
        json: instanceUpdateJSON 
        },  function (data) {
          console.log(data);
          if (data.error_code >= 400){
            alert(data.error);
          }
          //Sync type
          setTimeout(() => { reloadPageContent(); }, 1000);
          operationStatusCheck()
      });
    }

    // Migrate the instance to new cluster host
    function migrateInstance(){
      var clusterHost = $("#selectClusterInput").val();
      console.log("Info: migrating instance " + instance + " to " + clusterHost);
      $.post("../api/virtual-machine/migrate_instance?id="+serverId+"&project="+project+"&instance="+instance+"&location="+clusterHost, {},  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Async type
        setTimeout(() => { reloadPageContent(); }, 2000);
        operationStatusCheck()
      });
    }

    // Copy or clone the instance
    function copyInstance(){
      var copyName = $("#copyName").val();
      console.log("Info: copying instance " + instance + " to " + copyName);
      $.post("../api/virtual-machine/copy_instance?id="+serverId+"&project="+project+"&instance="+instance+"&location="+target_location, { name: copyName },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Async type
        setTimeout(() => { reloadPageContent(); }, 2000);
        operationStatusCheck()
      });
    }

    // Rename the instance
    function renameInstance(){
      var renameName = $("#renameName").val();
      console.log("Info: renaming instance " + instance + " to " + renameName);
      $.post("../api/virtual-machine/rename_instance?id="+serverId+"&project="+project+"&instance="+instance, { name: renameName },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        else {
          window.location.href = 'virtual-machine?id=' + serverId + '&project=' + project + '&instance=' + renameName;
        }
      });
    }

    // Publish the instance into an image
    function publishInstance(){
      var description = $("#publishInstanceDescriptionInput").val();
      var os = $("#publishInstanceOsInput").val();
      var release = $("#publishInstanceReleaseInput").val();
      var public = $("#publishInstancePublicInput").val();
      console.log("Info: publishing image " + description + " from instance " + instance);
      $.post("../api/virtual-machine/publish_instance?id="+serverId+"&project="+project+"&instance="+instance, { description: description, os: os, release: release, public:public },  function (data) {
        console.log(data);
        if (data.error_code >= 400){
          alert(data.error);
        }
        //Async type
        setTimeout(() => { reloadPageContent(); }, 2000);
        operationStatusCheck()
      });
    }

    // Convert websocket array buffer data to string
    function convertArrayBuffer2String(buf) {
      var encoding = 'utf8';
      var decoder = new TextDecoder(encoding);
      var str = decoder.decode(buf);
      return str
    }

    // Convert websocket input string to array buffer
    function convertString2ArrayBuffer(str) {
      var buf = new ArrayBuffer(str.length);
      var bufView = new Uint8Array(buf);
      for (var i=0, strLen=str.length; i < strLen; i++) {
        bufView[i] = str.charCodeAt(i);
      }
      return buf;
    }

    // Setup websocket connection for console use
    function establishInstanceWebSocketConsoleConnection() {
      $.get("../api/virtual-machine/get_instance_websocket_host?id=" + serverId + "&project=" + project + "&instance=" + encodeURI(instance), function (data) {
        console.log(data);
        server_addr = data.addr
        server_port = data.port

        if (data.proxy) 
          wss_addr = data.proxy
        else 
          wss_addr = data.addr + ':' + data.port;

        //Check to see if we can connect to the LXD server over a secure connection
        fetch('https://' + wss_addr + '/1.0?addr=' + server_addr + '&port=' + data.port, { mode: 'no-cors' })
        .then(response => {
          //If we made it here then the self-signed LXD certificate would have been already trusted by the user's browser we can setup a secure websocket connection
          $.post("../api/virtual-machine/establish_instance_console_websocket?id=" + serverId + "&project=" + project + "&instance=" + encodeURI(instance), { 
            width: consoleTerminal.cols,
            height: consoleTerminal.rows
          }, function (data) {
            console.log(data);
            var operation = data.operation;
            var consoleControlURL = "wss://" + wss_addr + operation + "/websocket?secret=" + data.control + "&addr=" + server_addr + "&port=" + server_port;
            var consoleDataURL = "wss://" + wss_addr + operation + "/websocket?secret=" + data.secret + "&addr=" + server_addr + "&port=" + server_port;

            if(operation == "" && operationData.secret == ""){
              alert("Unable to connect via websocket");
              return;
            }
            
            //Create a new "control" websocket
            consoleControlSocket = new WebSocket(consoleControlURL);

            //Listen for "control" websocket errors
            consoleControlSocket.onerror = function (e) {
              console.log("There was a WebSocket error: " + e);
            }

            //Listen for "control" websocket opening connection
            consoleControlSocket.onopen = function (e) {
              console.log( "Console Control WebSocket ReadyState: " + consoleControlSocket.readyState ); 
            };
    
            //Listen for "control" websocket messages
            consoleControlSocket.onmessage = function (e) {      
              if (e.data instanceof ArrayBuffer) {
                if (convertArrayBuffer2String(e.data) != null){
                  consoleTerminal.write(convertArrayBuffer2String(e.data));
                }
              }
            };

            //Listen for "control" websocket closing
            consoleControlSocket.onclose = function (e) {
              console.log(e);
            };

            //Create a new "data" websocket
            consoleDataSocket = new WebSocket(consoleDataURL);
              
            //Listen for "data" websocket errors
            consoleDataSocket.onerror = function (e) {
              console.log("There was a WebSocket error: " + e);
            }

            //Listen for "data" websocket opening connection
            consoleDataSocket.onopen = function (e) {
              //Set binaryType to ArrayBuffer. This should be default value
              consoleDataSocket.binaryType = 'arraybuffer';
              
              console.log( "Console Data WebSocket ReadyState: " + consoleDataSocket.readyState );
              consoleTerminal.write("--- Secure Websocket Connection Opened --- \r\n");

              //Send return to show login screen on console connections
              setTimeout(() => { consoleDataSocket.send(convertString2ArrayBuffer('\r')); }, 1000);
              
              //Switch console action buttons
              $("#startConsoleButton").hide();
              $("#stopConsoleButton").show();
            };
        
            //Listen for "data" websocket messages
            consoleDataSocket.onmessage = function (e) {   
              if (e.data.length == 0) {
                consoleControlSocket.close();
                consoleDataSocket.close();
              } else {   
                if (e.data instanceof ArrayBuffer) {
                  if (convertArrayBuffer2String(e.data) != null){
                    consoleTerminal.write(convertArrayBuffer2String(e.data));
                  }
                }
              }
            };

            //Listen for "data" websocket closing
            consoleDataSocket.onclose = function (e) {
              console.log(e);
              consoleTerminal.write("\r\n--- Websocket Connection Closed  ---\r\n");
              $("#stopConsoleButton").hide();
              $("#startConsoleButton").show();
            };

          });

        })
        .catch((error) => {
          console.log("Error: ", error)
          //If we make it here then we had an error connection to LXD server. Most likely the Self-Signed Certificate is not yet trusted by the user's browser
          data = 'There was an error connecting to your LXD server. <br />The LXD server may be using a self-signed certificate. <br />Click <a href="https://' + wss_addr + '?addr=' + server_addr + '&port=' + data.port + '" target="_blank">here</a> to accept the certificate if not yet trusted.';
          $("#webSocketConnectionError").html(data);
          $('#webSocketConnectionErrorModal').modal('show');
        })

      });

    }

    // Setup websocket connection for exec use
    function establishInstanceWebSocketExecConnection() {
      $.get("../api/virtual-machine/get_instance_websocket_host?id=" + serverId + "&project=" + project + "&instance=" + encodeURI(instance), function (data) {
        console.log(data);
        server_addr = data.addr
        server_port = data.port

        if (data.proxy) 
          wss_addr = data.proxy
        else 
          wss_addr = data.addr + ':' + data.port;

        //Check to see if we can connect to the LXD server over a secure connection
        fetch('https://' + wss_addr + '/1.0?addr=' + server_addr + '&port=' + data.port, { mode: 'no-cors' })
        .then(response => {
          //If we made it here then the self-signed LXD certificate would have been already trusted by the user's browser we can setup a secure websocket connection
          $.post("../api/virtual-machine/establish_instance_exec_websocket?id=" + serverId + "&project=" + project + "&instance=" + encodeURI(instance), { 
            shell: $("#execShellInput").val(),
            width: execTerminal.cols,
            height: execTerminal.rows
          }, function (data) {
            console.log(data);
            var operation = data.operation;
            var execControlURL = "wss://" + wss_addr + operation + "/websocket?secret=" + data.control + "&addr=" + server_addr + "&port=" + server_port;
            var execDataURL = "wss://" + wss_addr + operation + "/websocket?secret=" + data.secret + "&addr=" + server_addr + "&port=" + server_port;

            if(operation == "" && data.secret == ""){
              alert("Unable to connect via websocket");
              return;
            }
            
            //Create a new "control" websocket
            execControlSocket = new WebSocket(execControlURL);

            //Listen for "control" websocket errors
            execControlSocket.onerror = function (e) {
              console.log("There was a WebSocket error: " + e);
            }

            //Listen for "control" websocket opening connection
            execControlSocket.onopen = function (e) {
              console.log( "Exec Control WebSocket ReadyState: " + execControlSocket.readyState ); 
            };
    
            //Listen for "control" websocket messages
            execControlSocket.onmessage = function (e) {     
              console.log(e) 
              if (e.data instanceof ArrayBuffer) {
                if (convertArrayBuffer2String(e.data) != null){
                  execTerminal.write(convertArrayBuffer2String(e.data));
                }
              }
            };

            //Listen for "control" websocket closing
            execControlSocket.onclose = function (e) {
              console.log(e);
            };

            //Create a new "data" websocket
            execDataSocket = new WebSocket(execDataURL);
              
            //Listen for "data" websocket errors
            execDataSocket.onerror = function (e) {
              console.log("There was a WebSocket error: " + e);
            }

            //Listen for "data" websocket opening connection
            execDataSocket.onopen = function (e) {
              //Set binaryType to ArrayBuffer. This should be default value
              execDataSocket.binaryType = 'arraybuffer';
              
              console.log( "Exec Data WebSocket ReadyState: " + execDataSocket.readyState );
              execTerminal.write("--- Secure Websocket Connection Opened --- \r\n");

              //Switch console action buttons
              $("#startExecButton").hide();
              $("#stopExecButton").show();
            };
        
            //Listen for "data" websocket messages
            execDataSocket.onmessage = function (e) {  
              if (e.data.length == 0) {
                execControlSocket.close();
                execDataSocket.close();
              }
              else {    
                if (e.data instanceof ArrayBuffer) {
                  if (convertArrayBuffer2String(e.data) != null){
                    execTerminal.write(convertArrayBuffer2String(e.data));
                  }
                }
              }
            };

            //Listen for "data" websocket closing
            execDataSocket.onclose = function (e) {
              console.log(e);
              execTerminal.write("\r\n--- Websocket Connection Closed ---\r\n");
              $("#stopExecButton").hide();
              $("#startExecButton").show();
            };

          });

        })
        .catch((error) => {
          console.log("Error: ", error)
          //If we make it here then we had an error connection to LXD server. Most likely the Self-Signed Certificate is not yet trusted by the user's browser
          data = 'There was an error connecting to your LXD server. <br />The LXD server may be using a self-signed certificate. <br />Visit <a href="https://' + wss_addr + '?addr=' + server_addr + '&port=' + data.port + '" target="_blank">here</a> to accept the certificate if not yet trusted.';
          $("#webSocketConnectionError").html(data);
          $('#webSocketConnectionErrorModal').modal('show');
        })

      });

    }

    // Close websocket connection for console user
    function closeWebSocketConsoleConnection() {
      //Closing the "control" websocket for console operations will stop the operation without crashing existing host's WebSockets.
      consoleControlSocket.close();
      consoleDataSocket.close();
    }

    // Close websocket connection for exec use
    function closeWebSocketExecConnection() {
      //Sending Ctrl+d (exit) three times to back out of potential nested shells or logins up to three deep. If not logged out, WebSocket operation may continue to run.
      execDataSocket.send(convertString2ArrayBuffer('\04 \r \04 \r \04 \r'))

      //Closing the "control" websocket for console operations will stop the operation without crashing existing host WebSockets.
      execControlSocket.close();
      execDataSocket.close();
    }


    $(document).ready(function(){

      //If id or project variables are missing redirect to servers page
      if (!serverId || !project) {
        window.location.href = 'servers';
      }
      else {
        $("#instance_title").text(instance);
        loadPageContent()
        operationStatusCheck()
      }
    
    });

  </script>


{% endblock script %}