<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
    <link href="/static/css/styles.css" rel="stylesheet" />
    <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape@3.25.0/dist/cytoscape.min.js"></script>
    <script src="/static/js/cytoscape-cxtmenu.js"></script>
    <script src="//rawgit.com/bevacqua/dragula/master/dist/dragula.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
    <script src="https://unpkg.com/webcola@3.3.8/WebCola/cola.min.js"></script>
    <script src="https://unpkg.com/popper.js@1.14.4/dist/umd/popper.js"></script>
    <script src="https://unpkg.com/tippy.js@2.6.0/dist/tippy.all.js"></script>  
    <script src="https://unpkg.com/cytoscape-cola@2.2.3/cytoscape-cola.js"></script>
    <script src="https://unpkg.com/cytoscape-popper@1.0.2/cytoscape-popper.js"></script>
    <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
    <link rel="stylesheet" href="//rawgit.com/bevacqua/dragula/master/dist/dragula.css" />
    <script src="/static/to_browserify/app_browserify.js"></script> 
    <script id="rendered-js">
      ;(function () {
        dragula([].slice.apply(document.querySelectorAll('.nested-code')))
      })()
      //# sourceURL=pen.js     <script type="module" src="/static/node_modules/cytoscape-dagre/cytoscape-dagre.js"></script> 

    </script>
    <style>
      #cy {
        width: 100%;
        height: 500px;
        display: block;
        /*background: rgba(0, 0, 0, 0.666);*/
        background: #fafafa;
        background-image: radial-gradient(#bebebe 1px, transparent 0);
        background-size: 18px 18px;
      }
      
      .config {
        position: absolute;
        right: 0;
        //top: 0;
        //bottom: 0;
        width: 17em;
        background: rgba(1, 1, 1, 0.666);
        box-sizing: border-box;
        padding: 1em;
        color: #fff;
        transition-property: opacity;
        transition-duration: 250ms;
        transition-timing-function: ease-out;
        overflow: auto;
        z-index: 999;
        margin-right: 1em;
      }

     /* .cytoscape-nav {
        position: absolute;
        right: 0;
        //top: 0;
        //bottom: 0;
        width: 17em;
        /*background: rgba(1, 1, 1, 0.666);*/
        /*box-sizing: border-box;*/
        padding: 1em;
        color: #fff;
        /*transition-property: opacity;
        transition-duration: 250ms;
        transition-timing-function: ease-out;*/
        overflow: auto;
        z-index: 1;
        margin-right: 1em;
      }*/
      
      .param {
        margin-bottom: 1em;
      }
      
      .preamble {
        margin-bottom: 2em;
      }
      
      p {
        margin: 0.5em 0;
        font-size: 0.8em;
      }
      
      .param button {
        width: 3em;
        margin-right: 0.25em;
        text-align: center;
      }
      
      a,
      a:hover {
        color: #8bb0d0;
      }
      
      .label {
        display: block;
      }
      
      .slider {
        display: block;
        width: 100%;
        margin: 0;
      }
      
      .config-toggle {
        position: absolute;
        right: 0;
        top: 0;
        padding: 1em;
        margin: 0.2em;
        cursor: pointer;
        color: #fff;
        z-index: 9999999;
        width: 17em;
      }
      
      .config-closed .config {
        opacity: 0;
        pointer-events: none;
      }
      
      .config-closed #cy {
        right: 0;
      }
      
      .tip-link {
        display: block;
      }
      
      @media (max-width: 600px) {
        #cy {
          right: 0;
        }
      }

      .icon {
        mask-size: cover;
        -webkit-mask-size: cover;
        display: inline-block;
        width: 24px;
        height: 24px;
      }

      .element {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
      }

      .element-severity_badge {
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        margin-left: -36px;
        margin-top: -4px;
        border: 3px solid #fff;
        box-shadow: 0 0 1px 0 rgb(0, 0, 0, 0.12), 0 1px 1px 0 rgb(0, 0, 0, 0.12);
        background: #fff;
        z-index: 999;
      }

      .element-severity_badge > .icon {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        top: -2px;
        right: 2px;
        position: relative;
      }

      .element-pm_badge {
        position: absolute;
        width: 32px;
        height: 16px;
        border-radius: 2px;
        margin-left: 46px;
        margin-top: 34px;
        background: #048375;
        z-index: 999;
        display: inline-flex;
      }

      .element-pm_badge > .icon {
        width: 14px;
        height: 14px;
        margin-left: 2px;
        margin-top: 1px;
        display: block;
        background: #fff;
      }

      .element-pm_badge2 {
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        margin-left: -36px;
        margin-top: 30px;
        border: 3px solid #fff;
        box-shadow: 0 0 1px 0 rgb(0, 0, 0, 0.12), 0 1px 1px 0 rgb(0, 0, 0, 0.12);
        background: #fff;
        z-index: 999;
      }

      .element-pm_badge2 > .icon {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        top: -2px;
        right: 2px;
        position: relative;
        background: #048375;
      }

      .element-pm_badge > span {
        font-family: "Nokia Pure Regular";
        font-size: 10px;
        line-height: 16px;
        vertical-align: middle;
        color: #fff;
      }

      .element-graphic {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        width: 38px;
        height: 38px;
        border: 4px solid rgb(255, 255, 255, 1);
        box-shadow: 0 0 1px 0 rgb(0, 0, 0, 0.12), 0 1px 1px 0 rgb(0, 0, 0, 0.24);
      }

      /*box-shadow: 0 0 0px 2px rgb(227, 73, 76, 1);*/

      .element-graphic.hover > .overlay {
        width: 38px;
        height: 38px;
        position: absolute;
        background-color: #000000;
        opacity: 0.3;
        border-radius: 50%;
      }

      .element-graphic.selected {
        box-shadow: 0 0 0px 2px #5da4ef;
        border: 4px solid rgb(255, 255, 255, 1);
      }

      .element-label {
        font-family: "Nokia Pure Regular";
        font-size: 10px;
        color: rgb(0, 0, 0, 0.87);
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
        margin-top: 12px;
      }

      .group {
        display: none;
        flex-direction: column;
        align-items: center;
      }

      .group.hide {
        display: none;
      }

      .group.show {
        display: inline-flex;
      }

      .group-graphic {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        width: 56px;
        height: 56px;
        background: #eeeeee;
        margin-top: 16px;
        border: 1px solid #dcdcdc;
      }

      .group-graphic > .icon {
        background: #9e9e9e;
      }
      
      svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
        overflow: visible;
        box-sizing: content-box;
        color: white;
      }

      .group-graphic.hover > .overlay {
        width: 56px;
        height: 56px;
        position: absolute;
        background-color: #000;
        opacity: 0.3;
        border-radius: 3px;
        border: 1px solid rgb(0, 0, 0, 0.3);
      }

      .group-graphic.selected {
        box-shadow: 0 0 0px 2px #5da4ef;
        border: 1px solid rgb(255, 255, 255, 1);
      }

      .group-label {
        font-family: "Nokia Pure Regular";
        font-size: 10px;
        max-width: 75px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #757575;
        text-transform: uppercase;
        margin-top: 6px;
      }

      /* ICONS */
      .icon-equipment_ne {
        mask-image: url(.//static/imgs/ic_equipment_ne.svg);
        -webkit-mask-image: url(.//static/imgs/ic_equipment_ne.svg);
      }

      .icon-server {
        mask-image: url(.//static/imgs/ic_server.svg);
        -webkit-mask-image: url(.//static/imgs/ic_server.svg);
      }

      .icon-NetworkService {
        mask-image: url(.//static/imgs/ic_service.svg);
        -webkit-mask-image: url(.//static/imgs/ic_service.svg);
      }

      .icon-TelcoCloudVirtualDevice {
        mask-image: url(.//static/imgs/ic_device.svg);
        -webkit-mask-image: url(.//static/imgs/ic_device.svg);
      }

      .icon-TelcoCloudPhysicalDevice {
        mask-image: url(.//static/imgs/ic_router_circle.svg);
        -webkit-mask-image: url(.//static/imgs/ic_router_circle.svg);
      }

      .icon-VNFComponent,
      .icon-VNF {
        mask-image: url(.//static/imgs/ic_virtual_network_function.svg);
        -webkit-mask-image: url(.//static/imgs/ic_virtual_network_function.svg);
      }

      .icon-group {
        mask-image: url(.//static/imgs/ic_group.svg);
        -webkit-mask-image: url(.//static/imgs/ic_group.svg);
      }

      .icon-pm {
        mask-image: url(.//static/imgs/ic_threshold_policy.svg);
        -webkit-mask-image: url(.//static/imgs/ic_threshold_policy.svg);
      }

      /** ALARM SEVERITY **/
      .icon-indeterminate {
        background: url(.//static/imgs/ic_indeterminate_kpi.svg);
      }

      .icon-cleared {
        background: url(.//static/imgs/ic_cleared_kpi.svg);
      }

      .icon-warning {
        background: url(.//static/imgs/ic_warning_kpi.svg);
      }

      .icon-minor {
        background: url(.//static/imgs/ic_minor_kpi.svg);
      }

      .icon-major {
        background: url(.//static/imgs/ic_major_kpi.svg);
      }

      .icon-critical {
        background: url(.//static/imgs/ic_critical_kpi.svg);
      }

      /** OPERATION STATE **/
      .serviceOperationalState-Active,
      .administrativeState-Activated,
      .operationalState-Working,
      .resourceLifecycleState-Operating,
      .resourceUsageState-Assigned,
      .powerState-PowerUp {
        background: #c1e7e3;
      }
      .serviceOperationalState-Active .icon,
      .administrativeState-Activated .icon,
      .operationalState-Working .icon,
      .resourceLifecycleState-Operating .icon,
      .resourceUsageState-Assigned .icon,
      .powerState-PowerUp .icon {
        background: #048375;
      }

      .serviceOperationalState-Terminated,
      .administrativeState-NotApplicable,
      .resourceLifecycleState-Retiring,
      .resourceUsageState-NotAvailable {
        background: #bdbdbd;
      }
      .serviceOperationalState-Terminated .icon,
      .administrativeState-NotApplicable .icon,
      .resourceLifecycleState-Retiring .icon,
      .resourceUsageState-NotAvailable .icon {
        background: rgb(0, 0, 0, 0.7);
      }

      .serviceOperationalState-Inactive,
      .administrativeState-Deactivated,
      .operationalState-notWorking,
      .powerState-PowerDown {
        background: #e4afb1;
      }
      .serviceOperationalState-Inactive .icon,
      .administrativeState-Deactivated .icon,
      .operationalState-notWorking .icon,
      .powerState-PowerDown .icon {
        background: #8e0022;
      }

      .serviceOperationalState-Unknown,
      .administrativeState-Unknown,
      .operationalState-Unknown,
      .resourceLifecycleState-Unknown,
      .resourceUsageState-Unknown,
      .powerState-Unknown {
        background: #9cbfd8;
      }
      .serviceOperationalState-Unknown .icon,
      .administrativeState-Unknown .icon,
      .operationalState-Unknown .icon,
      .resourceLifecycleState-Unknown .icon,
      .resourceUsageState-Unknown .icon,
      .powerState-Unknown .icon {
        background: #012345;
      }

      .serviceOperationalState-Designed,
      .resourceLifecycleState-Installing,
      .resourceUsageState-Reserved {
        background: #ffdf81;
      }
      .serviceOperationalState-Designed .icon,
      .resourceLifecycleState-Installing .icon,
      .resourceUsageState-Reserved .icon {
        background: #8d6900;
      }

      .resourceLifecycleState-Installing,
      .resourceUsageState-Reserved {
        background: #d9b5ed;
      }
      .resourceLifecycleState-Installing .icon,
      .resourceUsageState-Reserved .icon {
        background: #7e06c4;
      }

      .node-hidden {
        display: none;
      }

      /** CONTEXTUAL MENU **/
      .custom-menu-item {
        border: none !important;
        height: 32px !important;
        width: 170px !important;
        padding-left: 24px !important;
        color: rgb(0, 0, 0, 0.87) !important;
        background-color: #fafafa !important;
        font-weight: normal !important;
        font-family: "Nokia Pure Regular" !important;
        font-size: 13px !important;
        text-align: left !important;
        box-shadow: none !important;
      }

      .custom-menu-item:hover {
        background-color: #c8c8c8 !important;
      }

      .custom-context-menu {
        border: none !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        background-color: #fafafa !important;
        box-shadow: 0px 0px 8px 0px rgb(0, 0, 0, 0.12),
          0px 8px 8px 0px rgb(0, 0, 0, 0.24) !important;
      }

      /*Ovveride Navigator border and background:*/
      .cytoscape-navigator {
        border: 2px solid #bebebe !important;
        background: white !important;
        height: 25vh !important;
        width: 25vw !important;
        margin-bottom: 24px;
        margin-right: 24px;
        position: fixed;
        z-index: 99999;
        bottom: 0;
        right: 0;
        overflow: hidden;
      }

      /*Add border to View container:*/
      .cytoscape-navigator .cytoscape-navigatorView {
        border: 2px solid #124191;
        background: transparent;
      }

      /*Ovveride overlay container when mouse is over Navigator*/
      .cytoscape-navigator:hover .cytoscape-navigatorOverlay {
        border: 2px solid #124191;
        background: transparent;
      }

      /*Ovveride view's container when mouse is over view*/
      .cytoscape-navigator.mouseover-view .cytoscape-navigatorView {
        background-color: rgba(18, 65, 145, 0.3);
      }

      .cy-context-menus-cxt-menu {
        display:none;
        z-index: 1000;
        position:absolute;
        border:1px solid #A0A0A0;
        padding: 0;
        margin: 0;
        width:auto;
    }
    
    .cy-context-menus-cxt-menuitem {
        display:block;
        width: 100%;
        padding: 3px 20px;
        position:relative;
        margin:0;
        background-color:#f8f8f8;
        font-weight:normal;
        font-size: 12px;
        white-space:nowrap;
        border: 0;
        text-align: left;
    }
    
    .cy-context-menus-cxt-menuitem:enabled {
        color: #000000;
    }
    
    .cy-context-menus-ctx-operation:focus {
      outline: none;
    }
    
    .cy-context-menus-cxt-menuitem:hover {
        color: #ffffff;
        text-decoration: none;
        background-color: #0B9BCD;
        background-image: none;
        cursor: pointer;
    }
    
    .cy-context-menus-cxt-menuitem[content]:before {
        content:attr(content);
    }
    
    .cy-context-menus-divider {
      border-bottom:1px solid #A0A0A0;
    }
    
    .cy-context-menus-submenu-indicator {
        position: absolute;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
    }

    .cytoscape-navigator{
      position: fixed;
      border: 1px solid #000;
      background: #fff;
      z-index: 99999;
      width: 400px;
      height: 400px;
      bottom: 0;
      right: 0;
      overflow: hidden;
    }
    
    .cytoscape-navigator > img{
      max-width: 100%;
      max-height: 100%;
    }
    
    .cytoscape-navigator > canvas{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 101;
    }
    
    .cytoscape-navigatorView{
      position: absolute;
      top: 0;
      left: 0;
      cursor: move;
      background: #B7E1ED;
      -moz-opacity: 0.50;
      opacity: 0.50;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
      z-index: 102;
    }
    
    .cytoscape-navigatorOverlay{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 103;
    }
    

    </style>
    <!--
    <script type="application/json">
      $.get(
        '/kg/graph/json',
        function (result) {
          //https://codesandbox.io/s/github/gregwu/cytoscape/tree/main/?file=/index.html:331-332
          var style = [
            {
              selector: 'node',
              css: {
                content: 'data(label)',
                'text-wrap': 'wrap',
                //"font-family": "helvetica",
                'font-size': '14px',
                'text-outline-width': '3px',
                'text-outline-color': '#888',
                'text-valign': 'center',
                color: '#fc4e03',
                width: 'data(width)',
                height: 'data(height)',
                // when cytoscape.js 2.5 comes out, could use
                // "width":"label"
                // https://github.com/cytoscape/cytoscape.js/issues/1041
                'border-color': '#000',
                // "shape": "octagon",
                shape: 'data(shape)',
                'text-background-opacity': 1,
                'background-color': '#888'
              }
            },
      
            //  node classes
      
            {
              selector: 'node.non_existing',
              style: {
                display: 'none'
              }
            },
      
            {
              selector: 'node.exactly_one',
              style: {
                'border-width': '4px',
                'border-style': 'solid'
              }
            },
      
            {
              selector: 'node.at_least_one',
              style: {
                'border-width': '8px',
                'border-style': 'double'
              }
            },
      
            {
              selector: 'node.at_most_one',
              style: {
                'border-width': '3px',
                'border-style': 'dotted'
              }
            },
      
            {
              selector: 'node.node_unknown',
              style: {
                'border-width': '0px'
              }
            },
      
            //  edge classes
      
            {
              selector: 'edge',
              style: {
                //"content": "data(label)",
                'target-arrow-shape': 'triangle',
                //"target-arrow-fill": "hollow",
                //"source-arrow-fill": "hollow",
                'target-arrow-fill': 'filled',
                'source-arrow-fill': 'filled'
              }
            },
      
            {
              selector: 'edge.none_to_none',
              style: {
                width: '4px',
                'line-style': 'dashed',
                'target-arrow-shape': 'triangle',
                //"source-arrow-shape": "tee",
                //"mid-source-arrow-shape": "tee",
                //"mid-target-arrow-shape": "triangle",
                'target-arrow-fill': 'filled',
                'source-arrow-fill': 'filled'
              }
            },
      
            {
              selector: 'edge.all_to_all',
              style: {
                width: '4px',
                'line-style': 'solid'
              }
            },
      
            {
              selector: 'edge.edge_unknown',
              style: {
                width: '4px',
                'line-style': 'dotted'
              }
            },
      
            {
              selector: 'edge.total',
              style: {
                'source-arrow-shape': 'circle',
                'source-arrow-fill': 'filled'
              }
            },
      
            {
              selector: 'edge.functional',
              style: {
                'source-arrow-shape': 'square'
              }
            },
      
            {
              selector: 'edge.injective',
              style: {
                'target-arrow-shape': 'triangle-backcurve'
              }
            },
      
            {
              selector: 'edge.surjective',
              style: {
                'target-arrow-fill': 'filled'
              }
            },
      
            // selection
      
            {
              selector: 'node:selected',
              style: {
                'overlay-opacity': '0.2'
              }
            },
      
            {
              selector: 'edge:selected',
              style: {
                'overlay-opacity': '0.2'
              }
            }
          ]
          console.log(result)
          console.log(result.elements)
      
          var h = function (tag, attrs, children) {
            var el = document.createElement(tag)
      
            Object.keys(attrs).forEach(function (key) {
              var val = attrs[key]
      
              el.setAttribute(key, val)
            })
      
            children.forEach(function (child) {
              el.appendChild(child)
            })
      
            return el
          }
      
          var t = function (text) {
            var el = document.createTextNode(text)
      
            return el
          }
      
          var $ = document.querySelector.bind(document)

          
          //ytoscape.use(dagre);

          /*if (typeof cytoscape("core", "expandCollapse") === "undefined") {
            expandCollapse(cytoscape);
          }
          if (typeof cytoscape("core", "nodeHtmlLabel") === "undefined") {
            nodeHtmlLabel(cytoscape);
          }
          if (typeof cytoscape("core", "contextMenus") === "undefined") {
            contextMenus(cytoscape);
          }
          if (typeof cytoscape("core", "navigator") === "undefined") {
            navigator(cytoscape);
          }*/
      
          var cy = cytoscape({
            container: document.getElementById('cy'),
            minZoom: 1e-20,
            maxZoom: 1e50,
            style: [
              // the stylesheet for the graph -> not working
              {
                selector: 'node',
                style: {
                  'background-color': 'red',
                  color: 'red',
                  label: 'data(id)'
                }
              },
      
              {
                selector: 'edge',
                style: {
                  width: 3,
                  'line-color': '#ccc',
                  'target-arrow-color': '#ccc',
                  'target-arrow-shape': 'triangle',
                  'curve-style': 'bezier'
                }
              }
            ],
            elements: result,
            styleEnabled: true,
            layout: { name: 'random' }
          })
          console.log(result)
          console.log(result.elements)
      
          /*cy.style()
                      .resetToDefault() // start a fresh default stylesheet
      
                      // and then define new styles
                      .selector('node')
                          .style('background-color', 'magenta')
      
                      // ...
      
                      .update() // indicate the end of your new stylesheet so that it can be updated on elements
                      ;*/
      
          var stringStylesheet = `node {
                          content: data(label);
                          text-wrap: wrap;
                          font-size: 14px;
                          text-outline-width: 3px;
                          text-outline-color: #888;
                          text-valign: center;
                          text-halign: center;
                          color: #fc4e03;
                          width: data(width);
                          height: data(height);
                          border-color: #000;
                          shape: data(shape);
                          text-background-opacity: 1;
                          background-color: #888;
                      }
                      node.non_existing{
                          display: none;
                      }
                      node.exactly_one  {
                          border-width: 4px;
                          border-style: solid;
                      }
                      node.at_least_one  {
                          border-width: 8px;
                          border-style: double;
                      }
                      node.at_most_one  {
                          border-width: 3px;
                          border-style: dotted;
                      }
                      node.node_unknown {
                          border-width: 0px;
                      }
                      edge {
                          target-arrow-shape: triangle;
                          target-arrow-fill: filled;
                          source-arrow-fill: filled;
                      }
                      edge.none_to_none {
                          width: 4px;
                          line-style: dashed;
                          target-arrow-shape: triangle;
                          target-arrow-fill: filled;
                          source-arrow-fill: filled;
                      }
                      edge.all_to_all {
                          width: 4px;
                          line-style: solid;
                      }
                      edge.edge_unknown {
                          width: 4px;
                          line-style: dotted;
                      }
                      edge.total {
                          source-arrow-shape: circle;
                          source-arrow-fill: filled;
                      }
                      edge.functional {
                          source-arrow-shape: square;
                      }
                      edge.injective {
                          target-arrow-shape: triangle-backcurve;
                      }
                      edge.surjective {
                          target-arrow-fill: filled;
                      }
                      node:selected {
                          overlay-opacity: 0.2;
                      }
                      edge:selected {
                          overlay-opacity: 0.2;
                      }
                      :parent {
                          text-valign: top;
                          text-halign: center;
                      }
                      `
          cy.style(stringStylesheet)
      
          var params = {
            name: 'cola',
            nodeSpacing: 5,
            edgeLengthVal: 45,
            animate: true,
            randomize: false,
            maxSimulationTime: 1500
          }
          var layout = makeLayout()
      
          console.log(layout)
      
          layout.run()
      
          var $btnParam = h(
            'div',
            {
              class: 'param'
            },
            []
          )
      
          var $config = $('#config')
      
          $config.appendChild($btnParam)
      
          var sliders = [
            {
              label: 'Edge length',
              param: 'edgeLengthVal',
              min: 1,
              max: 200
            },
      
            {
              label: 'Node spacing',
              param: 'nodeSpacing',
              min: 1,
              max: 50
            }
          ]
      
          var buttons = [
            {
              label: h('span', { class: 'fa fa-random' }, []),
              layoutOpts: {
                randomize: true,
                flow: null
              }
            },
            {
              label: h('span', { class: 'fa fa-long-arrow-down' }, []),
              layoutOpts: {
                flow: { axis: 'y', minSeparation: 30 }
              }
            },
            {
              label: h('span', { class: 'fa fa-eye' }, []),
              new_style: `node {
                content: data(label);
                text-wrap: wrap;
                font-size: 14px;
                text-outline-width: 3px;
                text-outline-color: #888;
                text-valign: center;
                text-halign: center;
                color: #fc4e03;
                width: data(width);
                height: data(height);
                border-color: #000;
                shape: data(shape);
                text-background-opacity: 1;
                background-color: #888;
            }
            node.non_existing{
                display: none;
            }
            node.exactly_one  {
                border-width: 4px;
                border-style: solid;
            }
            node.at_least_one  {
                border-width: 8px;
                border-style: double;
            }
            node.at_most_one  {
                border-width: 3px;
                border-style: dotted;
            }
            node.node_unknown {
                border-width: 0px;
            }
            edge {
                content: data(label);
                target-arrow-shape: triangle;
                target-arrow-fill: filled;
                source-arrow-fill: filled;
            }
            edge.none_to_none {
                width: 4px;
                line-style: dashed;
                target-arrow-shape: triangle;
                target-arrow-fill: filled;
                source-arrow-fill: filled;
            }
            edge.all_to_all {
                width: 4px;
                line-style: solid;
            }
            edge.edge_unknown {
                width: 4px;
                line-style: dotted;
            }
            edge.total {
                source-arrow-shape: circle;
                source-arrow-fill: filled;
            }
            edge.functional {
                source-arrow-shape: square;
            }
            edge.injective {
                target-arrow-shape: triangle-backcurve;
            }
            edge.surjective {
                target-arrow-fill: filled;
            }
            node:selected {
                overlay-opacity: 0.2;
            }
            edge:selected {
                overlay-opacity: 0.2;
            }
            :parent {
                text-valign: top;
                text-halign: center;
            }`
            },
            {
              label: h('span', { class: 'fa fa-eye-slash' }, []),
              new_style: `node {
                content: data(label);
                text-wrap: wrap;
                font-size: 14px;
                text-outline-width: 3px;
                text-outline-color: #888;
                text-valign: center;
                text-halign: center;
                color: #fc4e03;
                width: data(width);
                height: data(height);
                border-color: #000;
                shape: data(shape);
                text-background-opacity: 1;
                background-color: #888;
            }
            node.non_existing{
                display: none;
            }
            node.exactly_one  {
                border-width: 4px;
                border-style: solid;
            }
            node.at_least_one  {
                border-width: 8px;
                border-style: double;
            }
            node.at_most_one  {
                border-width: 3px;
                border-style: dotted;
            }
            node.node_unknown {
                border-width: 0px;
            }
            edge {
                target-arrow-shape: triangle;
                target-arrow-fill: filled;
                source-arrow-fill: filled;
            }
            edge.none_to_none {
                width: 4px;
                line-style: dashed;
                target-arrow-shape: triangle;
                target-arrow-fill: filled;
                source-arrow-fill: filled;
            }
            edge.all_to_all {
                width: 4px;
                line-style: solid;
            }
            edge.edge_unknown {
                width: 4px;
                line-style: dotted;
            }
            edge.total {
                source-arrow-shape: circle;
                source-arrow-fill: filled;
            }
            edge.functional {
                source-arrow-shape: square;
            }
            edge.injective {
                target-arrow-shape: triangle-backcurve;
            }
            edge.surjective {
                target-arrow-fill: filled;
            }
            node:selected {
                overlay-opacity: 0.2;
            }
            edge:selected {
                overlay-opacity: 0.2;
            }
            :parent {
                text-valign: top;
                text-halign: center;
            }`
            }
          ]
      
          sliders.forEach(makeSlider)
      
          buttons.forEach(makeButton)
      
          function makeLayout(opts) {
            params.randomize = false
            params.edgeLength = function (e) {
              return params.edgeLengthVal / e.data('weight')
            }
      
            for (var i in opts) {
              params[i] = opts[i]
            }
      
            return cy.layout(params)
          }
      
          function makeSlider(opts) {
            var $input = h(
              'input',
              {
                id: 'slider-' + opts.param,
                type: 'range',
                min: opts.min,
                max: opts.max,
                step: 1,
                value: params[opts.param],
                class: 'slider'
              },
              []
            )
      
            var $param = h('div', { class: 'param' }, [])
      
            var $label = h('label', { class: 'label label-default', for: 'slider-' + opts.param }, [t(opts.label)])
      
            $param.appendChild($label)
            $param.appendChild($input)
      
            $config.appendChild($param)
      
            var update = _.throttle(function () {
              params[opts.param] = $input.value
      
              layout.stop()
              layout = makeLayout()
              layout.run()
            }, 1000 / 30)
      
            $input.addEventListener('input', update)
            $input.addEventListener('change', update)
          }
      
          function makeButton(opts) {
            var $button = h('button', { class: 'btn btn-default' }, [opts.label])
      
            $btnParam.appendChild($button)
      
            $button.addEventListener('click', function () {
              layout.stop()
      
              if (opts.fn) {
                opts.fn()
              }
              
              if(opts.layoutOpts) {
                layout = makeLayout(opts.layoutOpts)
                layout.run()
              }
              
              if(opts.new_style)
                cy.style(opts.new_style)
         
            })
          }
      
          var makeTippy = function (node, html) {
            return tippy(node.popperRef(), {
              html: html,
              trigger: 'manual',
              arrow: true,
              placement: 'bottom',
              hideOnClick: false,
              interactive: true
            }).tooltips[0]
          }
      
          var hideTippy = function (node) {
            var tippy = node.data('tippy')
      
            if (tippy != null) {
              tippy.hide()
            }
          }
      
          var hideAllTippies = function () {
            cy.nodes().forEach(hideTippy)
          }
      
          cy.on('tap', function (e) {
            if (e.target === cy) {
              hideAllTippies()
            }
          })
      
          cy.on('tap', 'edge', function (e) {
            hideAllTippies()
          })
      
          cy.on('zoom pan', function (e) {
            hideAllTippies()
          })
      
          cy.nodes().forEach(function (n) {
            var g = n.data('name')
      
            var $links = [
              {
                name: 'GeneCard',
                url: 'http://www.genecards.org/cgi-bin/carddisp.pl?gene=' + g
              },
              {
                name: 'UniProt search',
                url: 'http://www.uniprot.org/uniprot/?query=' + g + '&fil=organism%3A%22Homo+sapiens+%28Human%29+%5B9606%5D%22&sort=score'
              },
              {
                name: 'GeneMANIA',
                url: 'http://genemania.org/search/human/' + g
              }
            ].map(function (link) {
              return h('a', { target: '_blank', href: link.url, class: 'tip-link' }, [t(link.name)])
            })
      
            var tippy = makeTippy(n, h('div', {}, $links))
      
            n.data('tippy', tippy)
      
            n.on('click', function (e) {
              tippy.show()
      
              cy.nodes().not(n).forEach(hideTippy)
            })
          })
      
          $('#config-toggle').addEventListener('click', function () {
            $('body').classList.toggle('config-closed')
      
            cy.resize()
          })
      
          cy.cxtmenu({
            selector: 'node, edge',
      
            commands: [
              {
                content: '<span class="fa fa-flash fa-2x"></span>',
                select: function (ele) {
                  console.log(ele.id())
                }
              },
      
              {
                content: '<span class="fa fa-star fa-2x"></span>',
                select: function (ele) {
                  console.log(ele.data('name'))
                },
                enabled: false
              },
      
              {
                content: 'Text',
                select: function (ele) {
                  console.log(ele.position())
                }
              }
            ]
          })
      
          cy.cxtmenu({
            selector: 'core',
      
            commands: [
              {
                content: 'bg1',
                select: function () {
                  console.log('bg1')
                }
              },
      
              {
                content: 'bg2',
                select: function () {
                  console.log('bg2')
                }
              }
            ]
          })

        cy.on("mouseover", "node", function (e) {
          e.target.addClass("hover");
        });
        cy.on("mouseout", "node", function (e) {
          e.target.removeClass("hover");
        });

        },
        'json'
      )
    </script>
    -->
  </head>
  <body class="sb-nav-fixed">
    <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
      <!--  Navbar Brand
            https://www.w3schools.com/html/html5_draganddrop.asp
             -->
      <a class="navbar-brand ps-3" href="index.html">Panther</a>
      <!-- Sidebar Toggle -->
      <button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
      <!-- Navbar -->
      <ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
            <li>
              <a class="dropdown-item" href="#!">Settings</a>
            </li>
            <li>
              <a class="dropdown-item" href="#!">Activity Log</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
    <script>
      $(function () {
        $('.drag').draggable({
          appendTo: 'body',
          helper: 'clone'
        })
      
        $('#dropzone')
          .droppable({
            activeClass: 'active',
            hoverClass: 'hover',
            accept: ':not(.ui-sortable-helper)', // Reject clones generated by sortable
            drop: function (e, ui) {
              var $el = $('<div class="drop-item"><details><summary>' + ui.draggable.text() + '</summary><div><label>More Data</label><input type="text" /></div></details></div>')
              $el.append(
                $('<button type="button" class="btn btn-default btn-xs remove"><span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/><path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/></svg></span></button><div class="nested-code"></div>').click(function () {
                  $(this).parent().detach()
                })
              )
              $(this).append($el)
            }
          })
          .sortable({
            items: '.drop-item',
            sort: function () {
              // gets added unintentionally by droppable interacting with sortable
              // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
              $(this).removeClass('active')
            }
          })
        var checkbox = document.querySelector('input[name=server_enalble]')
        checkbox.addEventListener('change', function () {
          if (this.checked) {
            console.log('Checkbox is checked..')
            $('#server_enalble_label').text = 'Server'
            //$("#heading51").te
          } else {
            console.log('Checkbox is not checked..')
            $('#server_enalble_label').text = 'Client'
          }
        })
      })
    </script>
    <div id="layoutSidenav">
      <div id="layoutSidenav_nav">
        <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
          <div class="sb-sidenav-menu">
            <div class="nav">
              <div class="sb-sidenav-menu-heading">Core</div>
              <a class="nav-link" href="index.html">
                <div class="sb-nav-link-icon">
                  <i class="fas fa-tachometer-alt"></i>
                </div>QUIC tests
              </a>
              <a class="nav-link" href="creator.html">
                <div class="sb-nav-link-icon">
                  <i class="fas fa-tachometer-alt"></i>
                </div>QUIC editor
              </a>
              <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
                <div class="sb-nav-link-icon">
                  <i class="fas fa-columns"></i>
                </div>QUIC results<div class="sb-sidenav-collapse-arrow">
                  <i class="fas fa-angle-down"></i>
                </div>
              </a>
              <div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
                <nav class="sb-sidenav-menu-nested nav">
                  <a class="nav-link" href="results.html">
                    <div class="sb-nav-link-icon">
                      <i class="fas fa-tachometer-alt"></i>
                    </div>QUIC results viewer
                  </a>
                  <a class="nav-link" href="results-global.html">
                    <div class="sb-nav-link-icon">
                      <i class="fas fa-tachometer-alt"></i>
                    </div>QUIC results global
                  </a>
                </nav>
              </div>
            </div>
          </div>
          <div class="sb-sidenav-footer">version 0.1</div>
        </nav>
      </div>
      <div id="layoutSidenav_content">
        <main>
          <div class="container-fluid px-4">
            <h1 class="mt-4">QUIC Creator</h1>
            <div class="row">
              <div class="card mb-4" id="accordion">
                <div class="card-header" id="heading4">
                  <div class="row">
                    <div class="col-xl-6">
                      <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse4" aria-expanded="false" aria-controls="collapse4" role="button"><i class="fas fa-chart-bar me-1"></i></a>
                      Attacker - Man in the middle
                    </div>
                    <div class="col-xl-6">
                      <div class="form-check form-switch" style="right: 5%;position: absolute;">
                        <input class="form-check-input" type="checkbox" id="mim_enalble" />
                        <label class="form-check-label" for="mim_enalble">Enable</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-xl-6">
                        <div class="card mb-4" id="accordion">
                          <div class="card-header" id="heading5">
                            <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse5" aria-expanded="false" aria-controls="collapse5" role="button"><i class="fas fa-chart-bar me-1"></i></a>
                            Attack components
                          </div>
                          <div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordion">
                            <div class="card-body">
                              <div class="col-sm-6">
                                <div id="modules">
                                  <p class="drag" style="border: solid;">
                                    <a class="btn btn-default">Text</a>
                                  </p>

                                  <p class="drag" style="border: solid;">
                                    <a class="btn btn-default">Textarea</a>
                                  </p>

                                  <p class="drag" style="border: solid;">
                                    <a class="btn btn-default">Number</a>
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="card mb-4" id="accordion">
                          <div class="card-header" id="heading6">
                            <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse6" aria-expanded="false" aria-controls="collapse6" role="button"><i class="fas fa-chart-bar me-1"></i></a>
                            Attack timing
                          </div>
                          <div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordion">
                            <div class="card-body">
                              <div class="col-sm-6">
                                <div id="modules">
                                  <p class="drag" style="border: solid;">
                                    <a class="btn btn-default">Text</a>
                                  </p>

                                  <p class="drag" style="border: solid;">
                                    <a class="btn btn-default">Textarea</a>
                                  </p>

                                  <p class="drag" style="border: solid;">
                                    <a class="btn btn-default">Number</a>
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xl-6">
                        <div class="card mb-1" id="accordion">
                          <div class="card-header" id="heading8">
                            <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse8" aria-expanded="false" aria-controls="collapse8" role="button"><i class="fas fa-chart-bar me-1"></i></a>
                            Attacker module
                            <button class="btn btn-primary pull-right" style="right: 5%;position: absolute;">Save</button>
                          </div>
                          <div id="collapse8" class="collapse" aria-labelledby="heading8" data-parent="#accordion">
                            <div class="card-body">
                              <div id="dropzone">
                                <div class="container">
                                  <div class="nested-code">
                                    <div style="position: relative; left: 0px; top: 0px;">
                                      <details>
                                        <summary>Application components</summary>
                                        <div>
                                          <label>More Data</label>
                                          <input type="text" />
                                        </div>
                                      </details>

                                      <div class="nested-code">
                                        <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                          <details>
                                            <summary>app_send_event</summary>
                                            <div>
                                              <label>More Data</label>
                                              <input type="text" />
                                            </div>
                                          </details>
                                          <button type="button" class="btn btn-default btn-xs remove">
                                            <span>
                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                              </svg>
                                            </span>
                                          </button>
                                          <div class="nested-code">
                                            <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                              <details>
                                                <summary>Item 7</summary>
                                                <div>
                                                  <label>More Data</label>
                                                  <input type="text" />
                                                </div>
                                              </details>
                                              <button type="button" class="btn btn-default btn-xs remove">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                  </svg>
                                                </span>
                                              </button>
                                              <div class="nested-code"></div>
                                            </div>
                                            <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                              <details>
                                                <summary>Item 8</summary>
                                                <div>
                                                  <label>More Data</label>
                                                  <input type="text" />
                                                </div>
                                              </details>
                                              <button type="button" class="btn btn-default btn-xs remove">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                  </svg>
                                                </span>
                                              </button>
                                              <div class="nested-code"></div>
                                            </div>
                                            <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                              <details>
                                                <summary>Item 9</summary>
                                                <div>
                                                  <label>More Data</label>
                                                  <input type="text" />
                                                </div>
                                              </details>
                                              <button type="button" class="btn btn-default btn-xs remove">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                  </svg>
                                                </span>
                                              </button>
                                              <div class="nested-code"></div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                          <details>
                                            <summary>Item 5</summary>
                                            <div>
                                              <label>More Data</label>
                                              <input type="text" />
                                            </div>
                                          </details>
                                          <button type="button" class="btn btn-default btn-xs remove">
                                            <span>
                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                              </svg>
                                            </span>
                                          </button>
                                          <div class="nested-code"></div>
                                        </div>
                                        <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                          <details>
                                            <summary>Item 6</summary>
                                            <div>
                                              <label>More Data</label>
                                              <input type="text" />
                                            </div>
                                          </details>
                                          <button type="button" class="btn btn-default btn-xs remove">
                                            <span>
                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                              </svg>
                                            </span>
                                          </button>
                                          <div class="nested-code"></div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                      <details>
                                        <summary>Item 2</summary>
                                        <div>
                                          <label>More Data</label>
                                          <input type="text" />
                                        </div>
                                      </details>
                                      <button type="button" class="btn btn-default btn-xs remove">
                                        <span>
                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                          </svg>
                                        </span>
                                      </button>
                                      <div class="nested-code"></div>
                                    </div>
                                    <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                      <details>
                                        <summary>Item 3</summary>
                                        <div>
                                          <label>More Data</label>
                                          <input type="text" />
                                        </div>
                                      </details>
                                      <button type="button" class="btn btn-default btn-xs remove">
                                        <span>
                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                          </svg>
                                        </span>
                                      </button>
                                      <div class="nested-code"></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="card mb-1" id="accordion">
                          <div class="card-header" id="heading7">
                            <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse7" aria-expanded="false" aria-controls="collapse7" role="button"><i class="fas fa-chart-bar me-1"></i></a>
                            Attacker QUIC specification
                            <button class="btn btn-primary pull-right" style="right: 5%;position: absolute;">Save</button>
                          </div>
                          <div id="collapse7" class="collapse" aria-labelledby="heading7" data-parent="#accordion">
                            <div class="card-body">
                              <div id="dropzone">
                                <div class="container">
                                  <div class="nested-code">
                                    <div style="position: relative; left: 0px; top: 0px;">
                                      <details>
                                        <summary>Application components</summary>
                                        <div>
                                          <label>More Data</label>
                                          <input type="text" />
                                        </div>
                                      </details>

                                      <div class="nested-code">
                                        <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                          <details>
                                            <summary>app_send_event</summary>
                                            <div>
                                              <label>More Data</label>
                                              <input type="text" />
                                            </div>
                                          </details>
                                          <button type="button" class="btn btn-default btn-xs remove">
                                            <span>
                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                              </svg>
                                            </span>
                                          </button>
                                          <div class="nested-code">
                                            <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                              <details>
                                                <summary>Item 7</summary>
                                                <div>
                                                  <label>More Data</label>
                                                  <input type="text" />
                                                </div>
                                              </details>
                                              <button type="button" class="btn btn-default btn-xs remove">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                  </svg>
                                                </span>
                                              </button>
                                              <div class="nested-code"></div>
                                            </div>
                                            <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                              <details>
                                                <summary>Item 8</summary>
                                                <div>
                                                  <label>More Data</label>
                                                  <input type="text" />
                                                </div>
                                              </details>
                                              <button type="button" class="btn btn-default btn-xs remove">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                  </svg>
                                                </span>
                                              </button>
                                              <div class="nested-code"></div>
                                            </div>
                                            <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                              <details>
                                                <summary>Item 9</summary>
                                                <div>
                                                  <label>More Data</label>
                                                  <input type="text" />
                                                </div>
                                              </details>
                                              <button type="button" class="btn btn-default btn-xs remove">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                  </svg>
                                                </span>
                                              </button>
                                              <div class="nested-code"></div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                          <details>
                                            <summary>Item 5</summary>
                                            <div>
                                              <label>More Data</label>
                                              <input type="text" />
                                            </div>
                                          </details>
                                          <button type="button" class="btn btn-default btn-xs remove">
                                            <span>
                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                              </svg>
                                            </span>
                                          </button>
                                          <div class="nested-code"></div>
                                        </div>
                                        <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                          <details>
                                            <summary>Item 6</summary>
                                            <div>
                                              <label>More Data</label>
                                              <input type="text" />
                                            </div>
                                          </details>
                                          <button type="button" class="btn btn-default btn-xs remove">
                                            <span>
                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                              </svg>
                                            </span>
                                          </button>
                                          <div class="nested-code"></div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                      <details>
                                        <summary>Item 2</summary>
                                        <div>
                                          <label>More Data</label>
                                          <input type="text" />
                                        </div>
                                      </details>
                                      <button type="button" class="btn btn-default btn-xs remove">
                                        <span>
                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                          </svg>
                                        </span>
                                      </button>
                                      <div class="nested-code"></div>
                                    </div>
                                    <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                      <details>
                                        <summary>Item 3</summary>
                                        <div>
                                          <label>More Data</label>
                                          <input type="text" />
                                        </div>
                                      </details>
                                      <button type="button" class="btn btn-default btn-xs remove">
                                        <span>
                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                          </svg>
                                        </span>
                                      </button>
                                      <div class="nested-code"></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--
            <div class="row">
              <div style="display: flex;">
                <div style="flex: 50%;">
                  <b id="collapseAll" style="cursor: pointer; color: darkred;"
                    >Collapse all</b
                  >
                  |
                  <b id="expandAll" style="cursor: pointer; color: darkslateblue;"
                    >Expand all</b
                  >
                </div>
              </div>
              <div id="cy-attack"></div>
              <span class="fa fa-bars config-toggle" id="config-toggle"></span>
              
              <div id="config" class="config">
                <div class="preamble">
                  <span class="label label-info">Menu</span>
                </div>
              </div>
            </div> 
            -->
            <div class="row">
              <div class="card mb-4" id="accordion">
                <div class="card-header" id="heading41">
                  <div class="row">
                    <div class="col-xl-6">
                      <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse41" aria-expanded="false" aria-controls="collapse41" role="button"><i class="fas fa-chart-bar me-1"></i></a>
                      Ivy
                    </div>
                    <div class="col-xl-6">
                      <div class="form-check form-switch" style="right: 5%;position: absolute;">
                        <input class="form-check-input" type="checkbox" id="ivy_enalble" checked />
                        <label class="form-check-label" for="ivy_enalble">Enable</label>
                      </div>
                      <div class="form-check form-switch" style="right: 15%;position: absolute; display: none">
                        <input class="form-check-input" type="checkbox" id="server_enalble" checked />
                        <label class="form-check-label" for="server_enalble" id="server_enalble_label">Server</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="collapse41" class="collapse" aria-labelledby="heading41" data-parent="#accordion">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-xl-6">
                        <div class="card mb-4" id="accordion">
                          <div class="card-header" id="heading51">
                            <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse51" aria-expanded="false" aria-controls="collapse51" role="button"><i class="fas fa-chart-bar me-1"></i></a>
                            Server components
                          </div>
                          <div id="collapse51" class="collapse" aria-labelledby="heading51" data-parent="#accordion">
                            <div class="card-body">
                              <div class="col-sm-6">
                                <div id="modules">
                                  <p class="drag" style="border: solid;">
                                    <a class="btn btn-default">Text</a>
                                  </p>

                                  <p class="drag" style="border: solid;">
                                    <a class="btn btn-default">Textarea</a>
                                  </p>

                                  <p class="drag" style="border: solid;">
                                    <a class="btn btn-default">Number</a>
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="card mb-4" id="accordion">
                          <div class="card-header" id="heading61">
                            <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse61" aria-expanded="false" aria-controls="collapse61" role="button"><i class="fas fa-chart-bar me-1"></i></a>
                            Server timing
                          </div>
                          <div id="collapse61" class="collapse" aria-labelledby="heading6" data-parent="#accordion">
                            <div class="card-body">
                              <div class="col-sm-6">
                                <div id="modules">
                                  <p class="drag" style="border: solid;">
                                    <a class="btn btn-default">Text</a>
                                  </p>

                                  <p class="drag" style="border: solid;">
                                    <a class="btn btn-default">Textarea</a>
                                  </p>

                                  <p class="drag" style="border: solid;">
                                    <a class="btn btn-default">Number</a>
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xl-6">
                        <div class="card mb-1" id="accordion">
                          <div class="card-header" id="heading81">
                            <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse81" aria-expanded="false" aria-controls="collapse81" role="button"><i class="fas fa-chart-bar me-1"></i></a>
                            Server test
                            <button class="btn btn-primary pull-right" style="right: 5%;position: absolute;">Save</button>
                          </div>
                          <div id="collapse81" class="collapse" aria-labelledby="heading81" data-parent="#accordion">
                            <div class="card-body">
                              <div id="dropzone">
                                <div class="container">
                                  <div class="nested-code">
                                    <div style="position: relative; left: 0px; top: 0px;">
                                      <details>
                                        <summary>Application components</summary>
                                        <div>
                                          <label>More Data</label>
                                          <input type="text" />
                                        </div>
                                      </details>

                                      <div class="nested-code">
                                        <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                          <details>
                                            <summary>app_send_event</summary>
                                            <div>
                                              <label>More Data</label>
                                              <input type="text" />
                                            </div>
                                          </details>
                                          <button type="button" class="btn btn-default btn-xs remove">
                                            <span>
                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                              </svg>
                                            </span>
                                          </button>
                                          <div class="nested-code">
                                            <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                              <details>
                                                <summary>Item 7</summary>
                                                <div>
                                                  <label>More Data</label>
                                                  <input type="text" />
                                                </div>
                                              </details>
                                              <button type="button" class="btn btn-default btn-xs remove">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                  </svg>
                                                </span>
                                              </button>
                                              <div class="nested-code"></div>
                                            </div>
                                            <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                              <details>
                                                <summary>Item 8</summary>
                                                <div>
                                                  <label>More Data</label>
                                                  <input type="text" />
                                                </div>
                                              </details>
                                              <button type="button" class="btn btn-default btn-xs remove">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                  </svg>
                                                </span>
                                              </button>
                                              <div class="nested-code"></div>
                                            </div>
                                            <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                              <details>
                                                <summary>Item 9</summary>
                                                <div>
                                                  <label>More Data</label>
                                                  <input type="text" />
                                                </div>
                                              </details>
                                              <button type="button" class="btn btn-default btn-xs remove">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                  </svg>
                                                </span>
                                              </button>
                                              <div class="nested-code"></div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                          <details>
                                            <summary>Item 5</summary>
                                            <div>
                                              <label>More Data</label>
                                              <input type="text" />
                                            </div>
                                          </details>
                                          <button type="button" class="btn btn-default btn-xs remove">
                                            <span>
                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                              </svg>
                                            </span>
                                          </button>
                                          <div class="nested-code"></div>
                                        </div>
                                        <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                          <details>
                                            <summary>Item 6</summary>
                                            <div>
                                              <label>More Data</label>
                                              <input type="text" />
                                            </div>
                                          </details>
                                          <button type="button" class="btn btn-default btn-xs remove">
                                            <span>
                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                              </svg>
                                            </span>
                                          </button>
                                          <div class="nested-code"></div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                      <details>
                                        <summary>Item 2</summary>
                                        <div>
                                          <label>More Data</label>
                                          <input type="text" />
                                        </div>
                                      </details>
                                      <button type="button" class="btn btn-default btn-xs remove">
                                        <span>
                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                          </svg>
                                        </span>
                                      </button>
                                      <div class="nested-code"></div>
                                    </div>
                                    <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                      <details>
                                        <summary>Item 3</summary>
                                        <div>
                                          <label>More Data</label>
                                          <input type="text" />
                                        </div>
                                      </details>
                                      <button type="button" class="btn btn-default btn-xs remove">
                                        <span>
                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                          </svg>
                                        </span>
                                      </button>
                                      <div class="nested-code"></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="card mb-1" id="accordion">
                          <div class="card-header" id="heading71">
                            <a class="btn btn-link" data-bs-toggle="collapse" href="#collapse71" aria-expanded="false" aria-controls="collapse71" role="button"><i class="fas fa-chart-bar me-1"></i></a>
                            QUIC specification
                            <button class="btn btn-primary pull-right" style="right: 5%;position: absolute;">Save</button>
                          </div>
                          <div id="collapse71" class="collapse" aria-labelledby="heading71" data-parent="#accordion">
                            <div class="card-body">
                              <div id="dropzone">
                                <div class="container">
                                  <div class="nested-code">
                                    <div style="position: relative; left: 0px; top: 0px;">
                                      <details>
                                        <summary>Application components</summary>
                                        <div>
                                          <label>More Data</label>
                                          <input type="text" />
                                        </div>
                                      </details>

                                      <div class="nested-code">
                                        <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                          <details>
                                            <summary>app_send_event</summary>
                                            <div>
                                              <label>More Data</label>
                                              <input type="text" />
                                            </div>
                                          </details>
                                          <button type="button" class="btn btn-default btn-xs remove">
                                            <span>
                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                              </svg>
                                            </span>
                                          </button>
                                          <div class="nested-code">
                                            <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                              <details>
                                                <summary>Item 7</summary>
                                                <div>
                                                  <label>More Data</label>
                                                  <input type="text" />
                                                </div>
                                              </details>
                                              <button type="button" class="btn btn-default btn-xs remove">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                  </svg>
                                                </span>
                                              </button>
                                              <div class="nested-code"></div>
                                            </div>
                                            <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                              <details>
                                                <summary>Item 8</summary>
                                                <div>
                                                  <label>More Data</label>
                                                  <input type="text" />
                                                </div>
                                              </details>
                                              <button type="button" class="btn btn-default btn-xs remove">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                  </svg>
                                                </span>
                                              </button>
                                              <div class="nested-code"></div>
                                            </div>
                                            <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                              <details>
                                                <summary>Item 9</summary>
                                                <div>
                                                  <label>More Data</label>
                                                  <input type="text" />
                                                </div>
                                              </details>
                                              <button type="button" class="btn btn-default btn-xs remove">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                  </svg>
                                                </span>
                                              </button>
                                              <div class="nested-code"></div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                          <details>
                                            <summary>Item 5</summary>
                                            <div>
                                              <label>More Data</label>
                                              <input type="text" />
                                            </div>
                                          </details>
                                          <button type="button" class="btn btn-default btn-xs remove">
                                            <span>
                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                              </svg>
                                            </span>
                                          </button>
                                          <div class="nested-code"></div>
                                        </div>
                                        <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                          <details>
                                            <summary>Item 6</summary>
                                            <div>
                                              <label>More Data</label>
                                              <input type="text" />
                                            </div>
                                          </details>
                                          <button type="button" class="btn btn-default btn-xs remove">
                                            <span>
                                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                              </svg>
                                            </span>
                                          </button>
                                          <div class="nested-code"></div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                      <details>
                                        <summary>Item 2</summary>
                                        <div>
                                          <label>More Data</label>
                                          <input type="text" />
                                        </div>
                                      </details>
                                      <button type="button" class="btn btn-default btn-xs remove">
                                        <span>
                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                          </svg>
                                        </span>
                                      </button>
                                      <div class="nested-code"></div>
                                    </div>
                                    <div class="drop-item" style="position: relative; left: 0px; top: 0px;">
                                      <details>
                                        <summary>Item 3</summary>
                                        <div>
                                          <label>More Data</label>
                                          <input type="text" />
                                        </div>
                                      </details>
                                      <button type="button" class="btn btn-default btn-xs remove">
                                        <span>
                                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                          </svg>
                                        </span>
                                      </button>
                                      <div class="nested-code"></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div style="display: flex;">
                <div style="flex: 50%;">
                  <b id="collapseAll" style="cursor: pointer; color: darkred;"
                    >Collapse all</b
                  >
                  |
                  <b id="expandAll" style="cursor: pointer; color: darkslateblue;"
                    >Expand all</b
                  >
                </div>
              </div>
              <div id="cy"></div>
              <span class="fa fa-bars config-toggle" id="config-toggle"></span>
              
              <div id="config" class="config">
                <div class="preamble">
                  <span class="label label-info">Menu</span>
                </div>
              </div>
            </div>
          </div>
          <footer class="py-4 bg-light mt-auto">
            <div class="container-fluid px-4">
              <div class="d-flex align-items-center justify-content-between small">
                <div class="text-muted">Copyright &copy; QUIC Ivy 2022 - Christophe Crochet</div>
                <div>
                  <a href="#">Privacy Policy</a>
                  &middot;
                  <a href="#">Terms &amp; Conditions</a>
                </div>
              </div>
            </div>
          </footer>
        </main>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="/static/js/scripts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
    <script src="/static/assets/demo/chart-area-demo.js"></script>
    <script src="/static/assets/demo/chart-bar-demo.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
    <script src="/static/js/datatables-simple-demo.js"></script>
  </body>
</html>
