
  <!-- New Snapshot Modal-->
  <div class="modal fade" id="createSnapshotModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Create Snapshot</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Name: </label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="snapshotName" class="form-control" placeholder="" name="snapshot">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter a unique name to identify this snapshot. If a name is not provided it will be autogenerated.'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Stateful:</label>
              <div class="col-7 text-right">
                <div class="form-group">
                  <select id="snapshotStateful" class="form-control" name="snapshotStateful">
                    <option value="false" selected>false</option>
                    <option value="true">true</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select whether or not to create a stateful snapshot. Default: false'></i>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="createSnapshot()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Rename Instance Modal-->
  <div class="modal fade" id="renameInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Rename Instance</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Name: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="renameName" class="form-control" placeholder="">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Enter in a new name for this instance.'></i>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="renameInstance()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Migrate Instance Modal-->
  <div class="modal fade" id="migrateInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Migrate Instance</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Server: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <select id="selectClusterInput" class="form-control" name="cluster">
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select the cluster member to migrate this instance to.'></i>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="migrateInstance()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Copy Instance Modal-->
  <div class="modal fade" id="copyInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Copy Instance</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Name: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="copyName" class="form-control" placeholder="" name="copy">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the name of the new copied instance.'></i>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="copyInstance()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Create Instance from Snapshot Modal-->
  <div class="modal fade" id="createSnapshotInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Create Instance from Snapshot</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Name: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="instanceNameForSnapshotCreate" class="form-control" placeholder="" name="copysnap">
                  <input type="hidden" id="snapNameForSnapshotCreate">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in a name for the new instance.'></i>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="createSnapshotInstance()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Publish Image from Snapshot Modal-->
  <div class="modal fade" id="publishSnapshotModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Publish Image from Snapshot</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Description: </label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="publishSnapshotDescriptionInput" class="form-control" placeholder="" name="description">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in a description for the new image.'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">OS: </label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="publishSnapshotOsInput" class="form-control" placeholder="" name="os">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the operating system name for the new image.'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Release: </label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="publishSnapshotReleaseInput" class="form-control" placeholder="" name="release">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the release version for the new image.'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Public:</label>
              <div class="col-7">
                <div class="form-group">
                  <select id="publishSnapshotPublicInput" class="form-control" name="public">
                    <option value="false" selected>false</option>
                    <option value="true">true</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select whether or not this image is public. Default: false'></i>
              </div>
            </div>
            <input type="hidden" id="publishSnapshotHiddenName">
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="publishSnapshot()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Backup Instance Modal-->
  <div class="modal fade" id="backupInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Backup Instance</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Name:</label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="backupName" class="form-control" placeholder="" name="backupName">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the name of the backup. A file extension will be appended to this name.'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Instance Only:</label>
              <div class="col-7 text-right">
                <div class="form-group">
                  <select id="backupInstanceOnly" class="form-control" name="backupInstanceOnly">
                    <option value="false" selected>false</option>
                    <option value="true">true</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select whether or not to backup just the instance itself. Default: false'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Optimized Storage:</label>
              <div class="col-7 text-right">
                <div class="form-group">
                  <select id="backupOptimizedStorage" class="form-control" name="backupOptimizedStorage">
                    <option value="false" selected>false</option>
                    <option value="true">true</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select whether or not to optimize storage size. Default: false'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Compression:</label>
              <div class="col-7">
                <div class="form-group">
                  <select id="backupCompressionAlgorithm" class="form-control" name="backupCompressionAlgorithm">
                    <option value="bzip2">bzip2</option>
                    <option value="gzip" selected>gzip</option>
                    <option value="lzma">lzma</option>
                    <option value="none">none</option>
                    <option value="xz">xz</option>
                    <option value="zstd">zstd</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select which compression algorithm to use. Default: gzip'></i>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="createBackup()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>
  
  <!-- Delete Instance Modal-->
  <div class="modal fade" id="deleteInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Delete Instance</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">Are you sure you want to delete this instance?</div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
          <a class="btn btn-primary" href="#" onclick="deleteInstance()" data-dismiss="modal">Yes</a>
        </div>
      </div>
    </div>
  </div>

  <!-- Attach Profile Modal-->
  <div class="modal fade" id="attachProfileModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Attach Profile</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Profile:</label>
              <div class="col-7">
                <div class="form-group">
                  <select id="selectProfileInput" class="form-control" name="profile">
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select an existing profile to attach to this instance.'></i>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="attachProfile()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Detach Profile Modal-->
  <div class="modal fade" id="detachProfileModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Detach Profile</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Profile:</label>
              <div class="col-7">
                <div class="form-group">
                  <select id="selectDetachProfileInput" class="form-control" name="profile">
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select an existing profile to detach from this instance.'></i>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="detachProfile()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Add Disk Device Modal-->
  <div class="modal fade" id="addDiskDeviceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add Disk Device</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Device Name: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="diskNameInput" class="form-control" placeholder="" name="diskNameInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Enter a unique name to identify this instance device.'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Pool:</label>
              <div class="col-7">
                <div class="form-group">
                  <select id="diskPoolInput" onchange="changeStorageVolumeInput()" class="form-control" name="diskPoolInput">
                    <option value="">(not set)</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='For LXD managed storage volumes, select the storage pool where the source storage volume is located.'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Source: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="diskSourceInput" class="form-control" placeholder="" name="diskSourceInput">
                  <select style="display:none;" id="diskSourceSelectInput" class="form-control" name="diskSourceSelectInput">
                    <option value="">(not set)</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Select the storage volume or enter the filepath of the storage device.'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Path: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="diskPathInput" class="form-control" placeholder="" name="diskPathInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Enter a filepath for where this disk will be mounted within the instance. For example, /mnt/vol1'></i>
              </div>
            </div>

            <hr>

            <div id="accordionDiskProperties">
              <h2>
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#additionalDiskProperties" aria-expanded="false" aria-controls="additionalDiskProperties">
                  Additional Properties
                </button>
              </h2> 
              <div id="additionalDiskProperties" class="collapse" aria-labelledby="additionalDiskProperties">
                <div class="row">
                  <label class="col-3 col-form-label text-right">Limits.Read:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="diskLimitsReadInput" class="form-control" placeholder="" name="diskLimitsReadInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the I/O limit. Be sure to include the suffix. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Limits.Write:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="diskLimitsWriteInput" class="form-control" placeholder="" name="diskLimitsWriteInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the I/O limit. Be sure to inlude the suffix. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Limits.Max:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="diskLimitsMaxInput" class="form-control" placeholder="" name="diskLimitsMaxInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the I/O limit. Be sure to inlude the suffix. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Required:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="diskRequiredInput" onchange="" class="form-control" name="diskRequiredInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select whether to fail if the source disk doesn't exist. Default: true"></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Read Only:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="diskReadOnlyInput" onchange="" class="form-control" name="diskReadOnlyInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select whether to make the mount disk read-only or not. Default: false"></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Size:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="diskSizeInput" class="form-control" placeholder="" name="diskSizeInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the disk size in bytes. Be sure to include the suffix. This is only supported for the rootfs (/). Default: (not set)'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Size.State:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="diskSizeStateInput" class="form-control" placeholder="" name="diskSizeStateInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the size of the filesystem volume used for saving runtime state in virtual machines. Be sure to inlude the suffix. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Recursive:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="diskRecursiveInput" onchange="" class="form-control" name="diskRecursiveInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select whether or not to recursively mount the source path. Default: false"></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Propagation:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="diskPropagationInput" onchange="" class="form-control" name="diskPropagationInput">
                        <option value="">(not set)</option>
                        <option value="private">private</option>
                        <option value="rprivate">rprivate</option>
                        <option value="rshared">rshared</option>
                        <option value="rslave">rslave</option>
                        <option value="runbindable">runbindable</option>
                        <option value="shared">shared</option>
                        <option value="slave">slave</option>
                        <option value="unbindable">unbindable</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Select how a bind-mount is shared between the instance and the host. Default: private'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Shift:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="diskShiftInput" onchange="" class="form-control" name="diskShiftInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select wheter to setup a shifting overlay to translate the source uid/gid to match the instance. Default: false"></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Raw Mount Options:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="diskRawMountOptionsInput" class="form-control" placeholder="" name="diskRawMountOptionsInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in filesystem specific mount options. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Ceph User Name:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="diskCephUserNameInput" class="form-control" placeholder="" name="diskCephUserNameInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Used if the source is ceph or cephfs. Enter a ceph user_name. Default: admin'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Ceph Cluster Name:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="diskCephClusterNameInput" class="form-control" placeholder="" name="diskCephClusterNameInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Used if the source is ceph or cephfs. Enter a ceph cluster_name. Default: ceph'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Boot Priority:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="diskBootPriorityInput" class="form-control" placeholder="" name="diskBootPriorityInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in a boot priority number for VMs (highest numbers boot first). Default: (not set)'></i>
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="addInstanceDiskDevice()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Add GPU Device Modal-->
  <div class="modal fade" id="addGPUDeviceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add GPU Device</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Device Name: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="gpuDeviceNameInput" class="form-control" placeholder="" name="gpuDeviceNameInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Enter a unique name to identify this instance device'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">GPU Type:</label>
              <div class="col-7">
                <div class="form-group">
                  <select id="gpuTypeInput" class="form-control" name="gpuTypeInput">
                    <option value="">(not set)</option>
                    <option value="physical">physical</option>
                    <option value="mig">mig</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select which GPU type to use. Default: physical'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Vendor Id:</label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="gpuVendoridInput" class="form-control" placeholder="" name="gpuVendoridInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the vendor id of the GPU device'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Product Id: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="gpuProductidInput" class="form-control" placeholder="" name="gpuProductidInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the product id of the GPU device'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">MIG CI: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="number" id="gpuMigCiInput" class="form-control" placeholder="" name="gpuMigCiInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the existing MIG compute instance ID. Default: (not set)'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">MIG GI: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="number" id="gpuMigGiInput" class="form-control" placeholder="" name="gpuMigGiInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the existing MIG GPU instance ID. Default: (not set)'></i>
              </div>
            </div>

            <hr>

            <div id="accordionProxyProperties">
              <h2>
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#additionalProxyProperties" aria-expanded="false" aria-controls="additionalProxyProperties">
                  Additional Properties
                </button>
              </h2> 
              <div id="additionalProxyProperties" class="collapse" aria-labelledby="additionalProxyProperties">

                <div class="row">
                  <label class="col-3 col-form-label text-right">ID:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="gpuIdInput" class="form-control" placeholder="" name="gpuIdInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the card ID of the GPU. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">PCI:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="gpuPciInput" class="form-control" placeholder="" name="gpuPciInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the PCI address of the GPU. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">UID:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="gpuUidInput" class="form-control" placeholder="" name="gpuUidInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the UID number of the device owner. Default: 0'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">GID:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="gpuGidInput" class="form-control" placeholder="" name="gpuGidInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the GID number of the device owner. Default: 0'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Mode:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="gpuModeInput" class="form-control" placeholder="" name="gpuModeInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the permissions mode for the device in the instance. Default: 0600'></i>
                  </div>
                </div>

              </div>
            </div>

          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="addInstanceGPUDevice()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Add Network Device Modal-->
  <div class="modal fade" id="addNetworkDeviceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add Network Device</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Device Name: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="networkNameInput" class="form-control" placeholder="" name="networkNameInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Enter a unique name to identify this instance device.'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Property Set: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <select id="networkPropertySetInput" onchange="changePropertySetInput()" onchange="" class="form-control" name="networkPropertySetInput">
                    <option value="network">network</option>
                    <option value="nictype">nictype</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select "network" to link to an existing LXD managed network or "nictype" to define your network.'></i>
              </div>
            </div>
            <div class="row" id="networkNicTypeRow" style="display: none;">
              <label class="col-3 col-form-label text-right">NIC Type: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <select id="networkNicTypeInput" onchange="changeNicTypeInput()" onchange="" class="form-control" name="networkNicTypeInput">
                    <option value="">(not set)</option>
                    <option value="bridged">bridged</option>
                    <option value="ipvlan">ipvlan</option>
                    <option value="macvlan">macvlan</option>
                    <option value="p2p">p2p</option>
                    <option value="physical">physical</option>
                    <option value="routed">routed</option>
                    <option value="sriov">sriov</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select the network device type. Bridged devices use an existing bridge on the host. MacVlan devices setup a device based on an existing parent but using a different MAC address. P2P devices create a virtual device pair. Physical devices create a straight passthrough from the host interface. An sriov device passes a virtual function of an SR-IOV enabled network into the instance.'></i>
              </div>
            </div>
            <div class="row" id="networkParentTypeRow">
              <label class="col-3 col-form-label text-right">Parent Type: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <select id="networkParentTypeInput" onchange="changeParentTypeInput()" class="form-control" name="networkParentTypeInput">
                    <option value="">(not set)</option>
                    <option value="bridge">bridge</option>
                    <option value="macvlan">macvlan</option>
                    <option value="ovn">ovn</option>
                    <option value="sriov">sriov</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select the network type of the parent device.'></i>
              </div>
            </div>
            <div class="row" id="networkParentRow" style="display: none;">
              <label class="col-3 col-form-label text-right">Parent: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <select id="networkParentInput" class="form-control" name="networkParentInput">
                    <option value="">(not set)</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Select the parent network device from the host'></i>
              </div>
            </div>
            <div class="row" id="networkNetworkRow">
              <label class="col-3 col-form-label text-right">Network: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <select id="networkNetworkInput" class="form-control" name="networkNetworkInput">
                    <option value="">(not set)</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Select the LXD network to link this device to.'></i>
              </div>
            </div>
            <div class="row" id="networkInterfaceNameRow">
              <label class="col-3 col-form-label text-right">Interface Name:</label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="networkInterfaceNameInput" class="form-control" placeholder="" name="networkInterfaceNameInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in a name for the interface inside the instance. Default: (kernel assigned)'></i>
              </div>
            </div>

            <hr>

            <div id="accordionNetworkProperties">
              <h2>
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#additionalNetworkProperties" aria-expanded="false" aria-controls="additionalNetworkProperties">
                  Additional Properties
                </button>
              </h2> 
              <div id="additionalNetworkProperties" class="collapse" aria-labelledby="additionalNetworkProperties">
                <div class="row" id="networkMtuRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">MTU:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="networkMtuInput" class="form-control" placeholder="" name="networkMtuInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='The MTU of the new interface. Default: (inherited from parent)'></i>
                  </div>
                </div>
                <div class="row" id="networkModeRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Mode:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="networkModeInput" onchange="" class="form-control" name="networkModeInput">
                        <option value="">(not set)</option>
                        <option value="l2">l2</option>
                        <option value="l3s">l3s</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Select the IPVLAN mode. Default: (l3s)'></i>
                  </div>
                </div>
                <div class="row" id="networkHwaddrRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">HWADDR:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkHwaddrInput" class="form-control" placeholder="" name="networkHwaddrInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in a MAC address for the interface. Default: (randomly assigned)'></i>
                  </div>
                </div>
                <div class="row" id="networkHostNameRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Host Name:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkHostNameInput" class="form-control" placeholder="" name="networkHostNameInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the name of the interface inside the host. Default: (randomly assigned)'></i>
                  </div>
                </div>
                <div class="row" id="networkLimitsIngressRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Limits.Ingress:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkLimitsIngressInput" class="form-control" placeholder="" name="networkLimitsIngressInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the I/O limit for incoming traffic. Be sure to include the suffix. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkLimitsEgressRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Limits.Egress:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkLimitsEgressInput" class="form-control" placeholder="" name="networkLimitsEgressInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the I/O limit for outgoing traffic. Be sure to include the suffix. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkLimitsMaxRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Limits.Max:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkLimitsMaxInput" class="form-control" placeholder="" name="networkLimitsMaxInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the I/O limit. Be sure to inluce the suffix. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkIpv4AddressRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">IPv4 Address:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkIpv4AddressInput" class="form-control" placeholder="" name="networkIpv4AddressInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in an IPv4 address to assign to the instance through DHCP. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkIpv4GatewayRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">IPv4 Gateway:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkIpv4GatewayInput" class="form-control" placeholder="" name="networkIpv4GatewayInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='If using l3s mode, enter either "auto" or "none for using an automatic default gateway. If using l2 mode, enter in the address of the gateway. Default: (auto)'></i>
                  </div>
                </div>
                <div class="row" id="networkIpv4HostTableRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">IPv4 Host Table:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="networkIpv4HostTableInput" class="form-control" placeholder="" name="networkIpv4HostTableInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in a custom policy routing table ID to add IPv4 static routes to. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkIpv4HostAddressRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">IPv4 Host Address:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="networkIpv4HostAddressInput" class="form-control" placeholder="" name="networkIpv4HostAddressInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the IPv4 address to add to the host-side veth interface. Default: (169.254.0.1)'></i>
                  </div>
                </div>
                <div class="row" id="networkIpv4RoutesRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">IPv4 Routes:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkIpv4RoutesInput" class="form-control" placeholder="" name="networkIpv4RoutesInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in a comma seperated list of IPv4 static routes. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkIpv4RoutesExternalRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">IPv4 Routes External:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkIpv4RoutesExternalInput" class="form-control" placeholder="" name="networkIpv4RoutesExternalInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in a comma seperated list of static routes to route to the NIC and publish on the uplink. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkIpv6AddressRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">IPv6 Address:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkIpv6AddressInput" class="form-control" placeholder="" name="networkIpv6AddressInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in an IPv6 address to assign to the instance through DHCP. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkIpv6GatewayRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">IPv6 Gateway:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkIpv6GatewayInput" class="form-control" placeholder="" name="networkIpv6GatewayInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='If using l3s mode, enter either "auto" or "none for using an automatic default gateway. If using l2 mode, enter in the address of the gateway. Default: (auto or not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkIpv6HostTableRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">IPv6 Host Table:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="networkIpv6HostTableInput" class="form-control" placeholder="" name="networkIpv6HostTableInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in a custom policy routing table ID to add IPv4 static routes to. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkIpv6HostAddressRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">IPv6 Host Address:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="networkIpv6HostAddressInput" class="form-control" placeholder="" name="networkIpv6HostAddressInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the IPv6 address to add to the host-side veth interface. Default: (fe80::1)'></i>
                  </div>
                </div>
                <div class="row" id="networkIpv6RoutesRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">IPv6 Routes:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkIpv6RoutesInput" class="form-control" placeholder="" name="networkIpv6RoutesInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in a comma seperated list of IPv4 static routes. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkIpv6RoutesExternalRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">IPv6 Routes External:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkIpv6RoutesExternalInput" class="form-control" placeholder="" name="networkIpv6RoutesExternalInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in a comma seperated list of static routes to route to the NIC and publish on the uplink. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkSecurityMacFilteringRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Security.MAC.Filtering:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="networkSecurityMacFilteringInput" onchange="" class="form-control" name="networkSecurityMacFilteringInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select wheter to prevent the instance from spoofing another's MAC address. Default: false"></i>
                  </div>
                </div>
                <div class="row" id="networkSecurityIpv4FilteringRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Security.IPv4.Filtering:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="networkSecurityIpv4FilteringInput" onchange="" class="form-control" name="networkSecurityIpv4FilteringInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select wheter to prevent the instance from spoofing another's IPv4 address (enables mac_filtering). Default: false"></i>
                  </div>
                </div>
                <div class="row" id="networkSecurityIpv6FilteringRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Security.IPv6.Filtering:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="networkSecurityIpv6FilteringInput" onchange="" class="form-control" name="networkSecurityIpv6FilteringInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select wheter to prevent the instance from spoofing another's IPv6 address (enables mac_filtering). Default: false"></i>
                  </div>
                </div>
                <div class="row" id="networkMaasSubnetIpv4Row" style="display: none;">
                  <label class="col-3 col-form-label text-right">MAAS Subnet IPv4:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkMaasSubnetIpv4Input" class="form-control" placeholder="" name="networkMaasSubnetIpv4Input">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Enter in the MAAS IPv4 subnet to register the instance in. Default: (not set)"></i>
                  </div>
                </div>
                <div class="row" id="networkMaasSubnetIpv6Row" style="display: none;">
                  <label class="col-3 col-form-label text-right">MAAS Subnet IPv6:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkMaasSubnetIpv6Input" class="form-control" placeholder="" name="networkMaasSubnetIpv6Input">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Enter in the MAAS IPv6 subnet to register the instance in. Default: (not set)"></i>
                  </div>
                </div>
                <div class="row" id="networkBootPriorityRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Boot Priority:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="networkBootPriorityInput" class="form-control" placeholder="" name="networkBootPriorityInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Enter in a boot priority number for VMs (highest number boots first). Default: (not set)"></i>
                  </div>
                </div>
                <div class="row" id="networkVlanRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">VLAN:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="networkVlanInput" class="form-control" placeholder="" name="networkVlanInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in a VLAN ID to use for untagged traffic. Enter "none" to remove the port from the default VLAN. Default: (not set)'></i>
                  </div>
                </div>
                <div class="row" id="networkVlanTaggedRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">VLAN Tagged:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkVlanTaggedInput" class="form-control" placeholder="" name="networkVlanTaggedInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Enter in a comma seperated list of VLAN IDs to join. Default: (not set)"></i>
                  </div>
                </div>
                <div class="row" id="networkSecurityPortIsolationRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Security Port Isolation:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="networkSecurityPortIsolationInput" onchange="" class="form-control" name="networkSecurityPortIsolationInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select whether to prevent the NIC from communicating with other port isolated NICs in the network. Default: false"></i>
                  </div>
                </div>
                <div class="row" id="networkGvrpRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">GVRP:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="networkGvrpInput" onchange="" class="form-control" name="networkGvrpInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select whether to register the VLAN using the GARP VLAN Registration Protocol. Default: false"></i>
                  </div>
                </div>
                <div class="row" id="networkSecurityAclsRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Security ACLs:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="text" id="networkSecurityAclsInput" class="form-control" placeholder="" name="networkSecurityAclsInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Enter in a comma separated list of Network ACLs. Default: (not set)"></i>
                  </div>
                </div>
                <div class="row" id="networkSecurityAclsDefaultIngressActionRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Security ACLs Default Ingress Action:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="networkSecurityAclsDefaultIngressActionInput" onchange="" class="form-control" name="networkSecurityAclsDefaultIngressActionInput">
                        <option value="">(not set)</option>
                        <option value="allow">allow</option>
                        <option value="reject">reject</option>
                        <option value="drop">drop</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select an action to use for ingress traffic without any matching ACL rules. Default: (reject)"></i>
                  </div>
                </div>
                <div class="row" id="networkSecurityAclsDefaultEgressActionRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Security ACLs Default Egress Action:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="networkSecurityAclsDefaultEgressActionInput" onchange="" class="form-control" name="networkSecurityAclsDefaultEgressActionInput">
                        <option value="">(not set)</option>
                        <option value="allow">allow</option>
                        <option value="reject">reject</option>
                        <option value="drop">drop</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select an action to use for egress traffic without any matching ACL rules. Default: (reject)"></i>
                  </div>
                </div>
                <div class="row" id="networkSecurityAclsDefaultIngressLoggedRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Security ACLs Default Ingress Logged:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="networkSecurityAclsDefaultIngressLoggedInput" onchange="" class="form-control" name="networkSecurityAclsDefaultIngressLoggedInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select whether to log ingress traffic without any matching ACL rules. Default: (false)"></i>
                  </div>
                </div>
                <div class="row" id="networkSecurityAclsDefaultEgressLoggedRow" style="display: none;">
                  <label class="col-3 col-form-label text-right">Security ACLs Default Egress Logged:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="networkSecurityAclsDefaultEgressLoggedInput" onchange="" class="form-control" name="networkSecurityAclsDefaultEgressLoggedInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title="Select whether to log egress traffic without any matching ACL rules. Default: (false)"></i>
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="addNetworkDevice()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Add Proxy Device Modal-->
  <div class="modal fade" id="addProxyDeviceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add Proxy Device</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Device Name: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="proxyDeviceNameInput" class="form-control" placeholder="" name="proxyDeviceNameInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Enter a unique name to identify this instance device'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Listen: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="proxyListenInput" class="form-control" placeholder="" name="proxyListenInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Enter in the connection type, address, and port to bind and listen to, using the format <type>:<addr>:<port>[-<port>][,<port>]. For example, tcp:0.0.0.0:8080'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Connect: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="proxyConnectInput" class="form-control" placeholder="" name="proxyConnectInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Enter in the connection type, address, and port to connect to, using the format <type>:<addr>:<port>[-<port>][,<port>]. For example, tcp:127.0.0.1:8080'></i>
              </div>
            </div>

            <hr>

            <div id="accordionProxyProperties">
              <h2>
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#additionalProxyProperties" aria-expanded="false" aria-controls="additionalProxyProperties">
                  Additional Properties
                </button>
              </h2> 
              <div id="additionalProxyProperties" class="collapse" aria-labelledby="additionalProxyProperties">
                <div class="row">
                  <label class="col-3 col-form-label text-right">Bind:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="proxyBindInput" onchange="" class="form-control" name="proxyBindInput">
                        <option value="">(not set)</option>
                        <option value="host">host</option>
                        <option value="instance">instance</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Select which side to bind on. Default: host'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">UID:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="proxyUidInput" class="form-control" placeholder="" name="proxyUidInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the UID number of the owner to the listening Unix socket. Default: 0'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">GID:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="proxyGidInput" class="form-control" placeholder="" name="proxyGidInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the GID number of the owner ot the listening Unix socket. Default: 0'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Mode:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="proxyModeInput" class="form-control" placeholder="" name="proxyModeInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the permissions mode for the listening Unix socket. Default: 0644'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">NAT:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="proxyNatInput" onchange="" class="form-control" name="proxyNatInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Select whether or not to optimize proxying via NAT. Default: false'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Proxy Protocol:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="proxyProxyProtocolInput" onchange="" class="form-control" name="proxyProxyProtocolInput">
                        <option value="">(not set)</option>
                        <option value="true">true</option>
                        <option value="false">false</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Select whether to use the HAProxy PROXY protocol to when sending information. Default: false'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Security UID:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="proxySecurityUidInput" class="form-control" placeholder="" name="proxySecurityUidInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the UID for security privileges. Default: 0'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Security GID:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="proxySecurityGidInput" class="form-control" placeholder="" name="proxySecurityGidInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the GID for security privileges. Default: 0'></i>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="addInstanceProxyDevice()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Add Unix Device Modal-->
  <div class="modal fade" id="addUnixDeviceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add Unix Device</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Device Name: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="unixDeviceNameInput" class="form-control" placeholder="" name="unixDeviceNameInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Enter a unique name to identify this instance device'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Type: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <select id="unixTypeInput" class="form-control" name="unixTypeInput">
                    <option value="unix-block">unix-block</option>
                    <option value="unix-char">unix-char</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select which Unix type to use'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Source: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="unixSourceInput" class="form-control" placeholder="" name="unixSourceInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in source filepath on the host'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Path: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="unixPathInput" class="form-control" placeholder="" name="unixPathInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the filepath inside the instance'></i>
              </div>
            </div>

            <hr>

            <div id="accordionProxyProperties">
              <h2>
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#additionalProxyProperties" aria-expanded="false" aria-controls="additionalProxyProperties">
                  Additional Properties
                </button>
              </h2> 
              <div id="additionalProxyProperties" class="collapse" aria-labelledby="additionalProxyProperties">
                <div class="row">
                  <label class="col-3 col-form-label text-right">Major:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="unixMajorInput" class="form-control" placeholder="" name="unixMajorInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the device major number'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Minor:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="unixMinorInput" class="form-control" placeholder="" name="unixMinorInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the device minor number'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">UID:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="unixUidInput" class="form-control" placeholder="" name="unixUidInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the UID number of the device owner in the instance. Default: 0'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">GID:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="unixGidInput" class="form-control" placeholder="" name="unixGidInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the GID number of the device owner in the instance. Default: 0'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Mode:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="unixModeInput" class="form-control" placeholder="" name="unixModeInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the permissions mode for the listening Unix socket. Default: 0660'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Required:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <select id="unixRequiredInput" class="form-control" name="unixRequiredInput">
                        <option value="">(not set)</option>
                        <option value="true">True</option>
                        <option value="false">False</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Select whether or not this device is required to start the instance. Default: true'></i>
                  </div>
                </div>

              </div>
            </div>

          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="addInstanceUnixDevice()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Add USB Device Modal-->
  <div class="modal fade" id="addUSBDeviceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add USB Device</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Device Name: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="usbDeviceNameInput" class="form-control" placeholder="" name="usbDeviceNameInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='(Required) - Enter a unique name to identify this instance device'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Vendor Id: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="usbVendoridInput" class="form-control" placeholder="" name="usbVendoridInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the vendor id of the usb device'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Product Id: <span class="text-danger">*</span></label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="usbProductidInput" class="form-control" placeholder="" name="usbProductidInput">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the product id of the usb device'></i>
              </div>
            </div>

            <hr>

            <div id="accordionProxyProperties">
              <h2>
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#additionalProxyProperties" aria-expanded="false" aria-controls="additionalProxyProperties">
                  Additional Properties
                </button>
              </h2> 
              <div id="additionalProxyProperties" class="collapse" aria-labelledby="additionalProxyProperties">

                <div class="row">
                  <label class="col-3 col-form-label text-right">UID:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="usbUidInput" class="form-control" placeholder="" name="usbUidInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the UID number of the owner to the listening Unix socket. Default: 0'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">GID:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="usbGidInput" class="form-control" placeholder="" name="usbGidInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the GID number of the owner ot the listening Unix socket. Default: 0'></i>
                  </div>
                </div>
                <div class="row">
                  <label class="col-3 col-form-label text-right">Mode:</label>
                  <div class="col-7">
                    <div class="form-group">
                      <input type="number" id="usbModeInput" class="form-control" placeholder="" name="usbModeInput">
                    </div>
                  </div>
                  <div class="col-1">
                    <i class="far fa-sm fa-question-circle" title='Enter in the permissions mode for the listening Unix socket. Default: 0644'></i>
                  </div>
                </div>

              </div>
            </div>

          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="addInstanceUSBDevice()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Publish Instance Modal-->
  <div class="modal fade" id="publishInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Publish Image from Instance</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-3 col-form-label text-right">Description: </label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="publishInstanceDescriptionInput" class="form-control" placeholder="" name="description">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in a description for the new image.'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">OS: </label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="publishInstanceOsInput" class="form-control" placeholder="" name="os">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the operating system name for the new image.'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Release: </label>
              <div class="col-7">
                <div class="form-group">
                  <input type="text" id="publishInstanceReleaseInput" class="form-control" placeholder="" name="release">
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Enter in the release version for the new image.'></i>
              </div>
            </div>
            <div class="row">
              <label class="col-3 col-form-label text-right">Public:</label>
              <div class="col-7">
                <div class="form-group">
                  <select id="publishInstancePublicInput" class="form-control" name="public">
                    <option value="false" selected>false</option>
                    <option value="true">true</option>
                  </select>
                </div>
              </div>
              <div class="col-1">
                <i class="far fa-sm fa-question-circle" title='Select whether or not this image is public. Default: false'></i>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="#" onclick="publishInstance()" data-dismiss="modal">Submit</a>
          </div>
      </div>
    </div>
  </div>

  <!-- Load Log Modal-->
  <div class="modal fade" id="loadLogModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Log Contents</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <label class="col-12 col-form-label" id="logNameInput"></label>
              <div class="col-12">
                <div class="form-group text-right">
                  <pre>
                    <textarea name="log_data" class="form-control" id="logDataInput" rows="16" ></textarea>
                  </pre>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
          </div>
      </div>
    </div>
  </div>

  <!-- Edit Modal-->
  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Edit Container</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" id="form-tab" data-toggle="tab" href="#form" role="tab" aria-controls="form" aria-selected="true">Form</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="json-tab" data-toggle="tab" href="#json" role="tab" aria-controls="json" aria-selected="false">JSON</a>
              </li>
            </ul>
            <div class="tab-content" id="myTabContent">
              
              <div class="tab-pane fade show active" id="form" role="tabpanel" aria-labelledby="form-tab">
                <br />
                <form id="editForm">
                  <div class="row">
                    <label class="col-3 col-form-label text-right">Description: </label>
                    <div class="col-7">
                      <div class="form-group">
                        <input type="text" id="containerDescriptionInput" class="form-control" required="required" name="description">
                      </div>
                    </div>
                    <div class="col-1">
                      <i class="far fa-sm fa-question-circle" title='Enter in a description for this container'></i>
                    </div>
                  </div>
                  <hr>
                  <nav>
                    <div class="nav nav-pills justify-content-center" id="nav-tab" role="tablist">
                      <a class="nav-link active" id="nav-boot-tab" data-toggle="tab" href="#nav-boot" role="tab" aria-controls="nav-boot" aria-selected="true">Boot</a>
                      <a class="nav-link" id="nav-cloud-init-tab" data-toggle="tab" href="#nav-cloud-init" role="tab" aria-controls="nav-cloud-init" aria-selected="true">Cloud-init</a>
                      <a class="nav-link" id="nav-limits-tab" data-toggle="tab" href="#nav-limits" role="tab" aria-controls="nav-limits" aria-selected="false">Limits</a>
                      <a class="nav-link" id="nav-migration-tab" data-toggle="tab" href="#nav-migration" role="tab" aria-controls="nav-migration" aria-selected="false">Migration</a>
                      <a class="nav-link" id="nav-nvidia-tab" data-toggle="tab" href="#nav-nvidia" role="tab" aria-controls="nav-nvidia" aria-selected="false">Nvidia</a>
                      <a class="nav-link" id="nav-other-tab" data-toggle="tab" href="#nav-other" role="tab" aria-controls="nav-other" aria-selected="false">Other</a>
                      <a class="nav-link" id="nav-raw-tab" data-toggle="tab" href="#nav-raw" role="tab" aria-controls="nav-raw" aria-selected="false">Raw</a>
                      <a class="nav-link" id="nav-security-tab" data-toggle="tab" href="#nav-security" role="tab" aria-controls="nav-security" aria-selected="false">Security</a>
                      <a class="nav-link" id="nav-snapshots-config-tab" data-toggle="tab" href="#nav-snapshots-config" role="tab" aria-controls="nav-snapshots-config" aria-selected="false">Snapshots</a>
                    </div>
                  </nav>
                  <hr class="mt-2">
                  <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-boot" role="tabpanel" aria-labelledby="nav-boot-tab">
                      <br>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Autostart: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="boot.autostart" onchange="" class="form-control" name="boot.autostart">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Select whether to automatically start the container with LXD starts. If not set, defaults to container last state.'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Autostart Delay: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerBootAutostartDelayInput" class="form-control" placeholder="" name="boot.autostart.delay">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Enter in the number of seconds to wait after the container starts to boot up the next container. Default: 0.'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Autostart Priority: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerBootAutostartPriorityInput" class="form-control" placeholder="" name="boot.autostart.priority">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Enter in a number to determine the order the container boots, higher numbers being first. Default: 0.'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Host Shutdown Timeout: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerBootHostShutdownTimeoutInput" class="form-control" placeholder="" name="boot.host_shutdown_timeout">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Enter in a the number of seconds to wait on host shutdown before forcefull shutdown of container. Default: 30.'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Stop Priority: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerBootStopPriorityInput" class="form-control" placeholder="" name="boot.stop.priority">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Enter in a number to determine the order the container shutsdown, higher numbers being first. Default: 0.'></i>
                        </div>
                      </div>
                    </div>
                    <div class="tab-pane fade" id="nav-cloud-init" role="tabpanel" aria-labelledby="nav-cloud-init-tab">
                      <br>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Network Config: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <textarea class="form-control" name="cloud-init.network-config"></textarea>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Support for this option depends on the instance image. Enter in network configuration. Default: not set.'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">User Data: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <textarea class="form-control" name="cloud-init.user-data"></textarea>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Support for this option depends on the instance image. Enter in user data configuration. If both cloud-init.user-data and cloud-init.vendor-data exist, the contents of both are merged. Default: not set.'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Vendor Data: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <textarea class="form-control" name="cloud-init.vendor-data"></textarea>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Support for this option depends on the instance image. Enter in vendor data configuration. If both cloud-init.user-data and cloud-init.vendor-data exist, the contents of both are merged. Default: not set.'></i>
                        </div>
                      </div>
                    </div>
                    <div class="tab-pane fade" id="nav-limits" role="tabpanel" aria-labelledby="nav-limits-tab">
                      <br>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">CPU: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerLimitsCpuInput" class="form-control" placeholder="" name="limits.cpu">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Enter in the number or range of CPUs to expose to the container.'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">CPU Allowance: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerLimitsCpuAllowanceInput" class="form-control" placeholder="" name="limits.cpu.allowance">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Enter in the amount of Host CPU allowed to the container. This can be a percentage or a chunk of time. For example, 50% or 25ms/100ms. Default: 100%) '></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">CPU Priority: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerLimitsCpuPriorityInput" class="form-control" placeholder="" name="limits.cpu.priority">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Enter in an integer between 0 (min) and 10 (max) to schedule the CPU priority compared to other containers. Default: 10.'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Disk Priority: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerLimitsDiskPriorityInput" class="form-control" placeholder="" name="limits.disk.priority">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Enter in an integer between 0 (min) and 10 (max) to schedule disk I/O request priority compared to other containers. Default: 5.'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Hugepages - 64KB: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerLimitsHugepages64KBInput" class="form-control" placeholder="" name="limits.hugepages.64KB">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Enter in a fixed value in bytes to limit the number of 64 KB hugepages. Default: (not set).'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Hugepages - 1MB: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerLimitsHugepages1MBInput" class="form-control" placeholder="" name="limits.hugepages.1MB">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Enter in a fixed value in bytes to limit the number of 1 MB hugepages. Default: (not set).'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Hugepages - 2MB: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerLimitsHugepages2MBInput" class="form-control" placeholder="" name="limits.hugepages.2MB">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Enter in a fixed value in bytes to limit the number of 2 MB hugepages. Default: (not set).'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Hugepages - 1GB: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerLimitsHugepages1GBInput" class="form-control" placeholder="" name="limits.hugepages.1GB">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Enter in a fixed value in bytes to limit the number of 1 GB hugepages. Default: (not set).'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Memory: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerLimitsMemoryInput" class="form-control" placeholder="" name="limits.memory">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in a percentage of the host's memory or enter in a fixed value of bytes."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Memory Enforce: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerLimitsMemoryEnforceInput" onchange="" class="form-control" name="limits.memory.enforce">
                              <option value="">(not set)</option>
                              <option value="hard">hard</option>
                              <option value="soft">soft</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to put a hard stop on the memory limit or use a soft stop to exceed the limit if extra memory is available. Default: hard."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Memory Swap: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerLimitsMemorySwapInput" onchange="" class="form-control" name="limits.memory.swap">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to encorage swapping less used pages for the container. Default: true."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Memory Swap Priority: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerLimitsMemorySwapPriorityInput" class="form-control" placeholder="" name="limits.memory.swap.priority">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in the priority that the container will be less likely to swap to disk, with 10 being the maxium less likeliness. Default 10."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Network Priority: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerLimitsNetworkPriorityInput" class="form-control" placeholder="" name="limits.network.priority">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in the priority for the container network when the host is under, with 10 being the priority. Default 0."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Processes: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerLimitsProcessesInput" class="form-control" placeholder="" name="limits.processes">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in the maximum number of processes that can run in an container. Default (not set)."></i>
                        </div>
                      </div>
                    </div>
                    <div class="tab-pane fade" id="nav-migration" role="tabpanel" aria-labelledby="nav-migration-tab">
                      <br>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Incremental Memory: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerMigrationIncrementalMemoryInput" onchange="" class="form-control" name="migration.incremental.memory">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to allow incremental memory transfer of the container's memory to reduce downtime. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Incremental Memory Goal: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerMigrationIncrementalMemoryGoalInput" class="form-control" placeholder="" name="migration.incremental.memory.goal">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in the percentage number of memory to have in sync before stopping the container. Default: 70."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Incremental Memory Iterations: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerMigrationIncrementalMemoryIterationsInput" class="form-control" placeholder="" name="migration.incremental.memory.iterations">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in the maximum number of transfer operations to go through before stopping the container. Default: 10."></i>
                        </div>
                      </div>
                    </div>
                    <div class="tab-pane fade" id="nav-nvidia" role="tabpanel" aria-labelledby="nav-nvidia-tab">
                      <br>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Driver Capabilities: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerNvidiaDriverCapabilitiesInput" class="form-control" placeholder="" name="nvidia.driver.capabilities">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in what driver capabilities the container needs (sets libnvidia-container NVIDIA_DRIVER_CAPABILITIES). Default: compute,utility."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Runtime: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerNvidiaRuntimeInput" onchange="" class="form-control" name="nvidia.runtime">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to pass the host NVIDIA and CUDA runtime libraries into the container. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Require Cuda: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerNvidiaRequireCudaInput" class="form-control" placeholder="" name="nvidia.require.cuda">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in the version expression for the required CUDA version (sets libnvidia-container NVIDIA_REQUIRE_CUDA). Default: (not set)."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Require Driver: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerNvidiaRequireDriverInput" class="form-control" placeholder="" name="nvidia.require.driver">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in the version expression for the required driver version (sets libnvidia-container NVIDIA_REQUIRE_DRIVER). Default: (not set)."></i>
                        </div>
                      </div>
                    </div>
                    <div class="tab-pane fade" id="nav-other" role="tabpanel" aria-labelledby="nav-other-tab">
                      <br>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Cluster Evacuate: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerClusterEvacuateInput" onchange="" class="form-control" name="cluster.evacuate">
                              <option value="">(not set)</option>
                              <option value="auto">auto</option>
                              <option value="migrate">migrate</option>
                              <option value="stop">stop</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title='Select what to do when evacuating the container. Default: auto'></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Kernel Modules: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerLinuxKernelModulesInput" class="form-control" placeholder="" name="linux.kernel_modules">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in a comma separated list of kernel modules to load before starting the container. Default (not set)."></i>
                        </div>
                      </div>

                    </div>
                    <div class="tab-pane fade" id="nav-raw" role="tabpanel" aria-labelledby="nav-raw-tab">
                      <br>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Apparmor: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerRawApparmorInput" class="form-control" placeholder="" name="raw.apparmor">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in apparmor profile entries to be appended to the profile. Default: (not set)."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Idmap: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerRawIdmapInput" class="form-control" placeholder="" name="raw.idmap">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in a raw idmap configuration (e.g. 'both 1000 1000'). Default: (not set)."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Lxc: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerRawLxcInput" class="form-control" placeholder="" name="raw.lxc">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in a raw LXC configuration to be appended to current configuration. Default: (not set)."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Seccomp: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerRawSeccompInput" class="form-control" placeholder="" name="raw.seccomp">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in a raw Seccomp configuration. Default: (not set)."></i>
                        </div>
                      </div>

                    </div>
                    <div class="tab-pane fade" id="nav-security" role="tabpanel" aria-labelledby="nav-security-tab">
                      <br>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Devlxd: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecurityDevLxdInput" onchange="" class="form-control" name="security.devlxd">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to control the presence of /dev/lxd in the container. Default: true."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Devlxd Images: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecurityDevLxdImagesInput" onchange="" class="form-control" name="security.devlxd.images">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to make the /1.0/images API available over devlxd. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Idmap Base: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerSecurityIdmapBaseInput" class="form-control" placeholder="" name="security.idmap.base">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in the base Host ID to use for allocation. Default: (auto detection)."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Idmap Isolated: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecurityIdmapIsolatedInput" onchange="" class="form-control" name="security.idmap.isolated">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to use an idmap for the container that is unique amoung containers with isolate enabled. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Idmap Size: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="number" id="containerSecurityIdmapSizeInput" class="form-control" placeholder="" name="security.idmap.size">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in the size of the idmap to use. Default: (not set)."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Nesting: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecurityNestingInput" onchange="" class="form-control" name="security.nesting">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to support running LXD inside the container. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Privileged: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecurityPrivilegedInput" onchange="" class="form-control" name="security.privileged">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to run the container in privileged mode. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Protection Delete: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecurityProtectionDeleteInput" onchange="" class="form-control" name="security.protection.delete">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to prevent the container from being deleted. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Protection Shift: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecurityProtectionShiftInput" onchange="" class="form-control" name="security.protection.shift">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to prevent the container filesystem from being uid/gid shifted on startup. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Syscalls Allow: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerSecuritySyscallsAllowInput" class="form-control" placeholder="" name="security.syscalls.allow">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in a '\n' separated list of syscalls to allow. Default: (not set)."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Syscalls Deny: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerSecuritySyscallsDenyInput" class="form-control" placeholder="" name="security.syscalls.deny">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in a '\n' separated list of syscalls to deny. Default: (not set)."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Syscalls Deny Compat: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecuritySyscallsDenyCompatInput" onchange="" class="form-control" name="security.syscalls.deny_compat">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to enable on x86_64 the blocking of compat_* syscalls. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Syscalls Deny Default: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecuritySyscallsDenyDefaultInput" onchange="" class="form-control" name="security.syscalls.deny_default">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to enable the default syscall deny. Default: true."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Syscalls Intercept Bpf: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecuritySyscallsInterceptBpfInput" onchange="" class="form-control" name="security.syscalls.intercept.bpf">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to handle tehe bpf system call. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Syscalls Intercept Bpf Devices: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecuritySyscallsInterceptBpfDevicesInput" onchange="" class="form-control" name="security.syscalls.intercept.bpf.devices">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to allow bpf programs for the devices cgroup in the unified hierarchy to be loaded. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Syscalls Intercept Mknod: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecuritySyscallsInterceptMknodInput" onchange="" class="form-control" name="security.syscalls.intercept.mknod">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to handle the mknod and mknodat system calls. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Syscalls Intercept Mount: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecuritySyscallsInterceptMountInput" onchange="" class="form-control" name="security.syscalls.intercept.mount">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to handle the mount system calls. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Syscalls Intercept Mount Allowed: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerSecuritySyscallsInterceptMountAllowedInput" class="form-control" placeholder="" name="security.syscalls.intercept.mount.allowed">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in a comma-separated list of filesystems that are safe to mount for processes within the container. Default: (not set)."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Syscalls Intercept Mount Fuse: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerSecuritySyscallsInterceptMountFuseInput" class="form-control" placeholder="" name="security.syscalls.intercept.mount.fuse">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in redirect mounts of a given filesystem to their fuse implemenation (e.g. ext4=fuse2fs). Default: (not set)."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Syscalls Intercept Mount Shift: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecuritySyscallsInterceptMountShiftInput" onchange="" class="form-control" name="security.syscalls.intercept.mount.shift">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select Whether to mount shiftfs on top of filesystems handled through mount syscall interception. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Syscalls Intercept Mount Setxattr: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSecuritySyscallsInterceptSetxattrInput" onchange="" class="form-control" name="security.syscalls.intercept.setxattr">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether to handle the setxattr system call. Default: false."></i>
                        </div>
                      </div>
                    </div>
                    <div class="tab-pane fade" id="nav-snapshots-config" role="tabpanel" aria-labelledby="nav-snapshots-config-tab">
                      <br>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Schedule: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerSnapshotsScheduleInput" class="form-control" placeholder="" name="snapshots.schedule">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in a cron expression (<minute> <hour> <dom> <month> <dow>), or a comma separated list of schedule aliases <@hourly> <@daily> <@midnight> <@weekly> <@monthly> <@annually> <@yearly> <@startup>. Default: (not set)."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Schedule Stopped: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <select id="containerSnapshotsScheduleStoppedInput" onchange="" class="form-control" name="snapshots.schedule.stopped">
                              <option value="">(not set)</option>
                              <option value="true">true</option>
                              <option value="false">false</option>
                            </select>
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Select whether stopped containers are to be snapshoted automatically. Default: false."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Pattern: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerSnapshotsPatternInput" class="form-control" placeholder="" name="snapshots.pattern">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in a pongo2 template string representing the snapshot name. Default: snap%d."></i>
                        </div>
                      </div>
                      <div class="row">
                        <label class="col-4 col-form-label text-right">Expiry: </label>
                        <div class="col-6">
                          <div class="form-group">
                            <input type="text" id="containerSnapshotsExpiryInput" class="form-control" placeholder="" name="snapshots.expiry">
                          </div>
                        </div>
                        <div class="col-1">
                          <i class="far fa-sm fa-question-circle" title="Enter in time controls when snapshots are to be deleted (expects expressions like 1M 2H 3d 4w 5m 6y). Default: (not set)."></i>
                        </div>
                      </div>
                      
                    </div>
                  </div>
                </form>
                <div class="modal-footer">
                  <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                  <a class="btn btn-primary" href="#" id="editFormSubmit" onclick="updateInstanceForm()" data-dismiss="modal">Submit</a>
                </div>
              </div>
             
              <div class="tab-pane fade" id="json" role="tabpanel" aria-labelledby="json-tab">
                <br />
                <div class="row">
                  <label class="col-12 col-form-label" id="instanceNameEditInput"></label>
                  <div class="col-12">
                    <div class="form-group text-right">
                      <pre>
                        <textarea name="json" class="form-control" id="jsonEditInput" rows="16" placeholder="Enter JSON data"></textarea>
                      </pre>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                  <a class="btn btn-primary" href="#" onclick="updateInstanceJson()" data-dismiss="modal">Save</a>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>

  <!-- Web Socket Connection Error Modal-->
  <div class="modal fade" id="webSocketConnectionErrorModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">WebSocket Connection Error</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <div id="webSocketConnectionError"></div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">Dismiss</button>
        </div>
      </div>
    </div>
  </div>