<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  {{ headContent() }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.3/bootbox.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/cytoscape/cytoscape.js-panzoom@master/cytoscape.js-panzoom.css">
  <!-- todo check remove -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
  <!-- it fixes customized built-in element in Safari and older browsers -->
  <script src="//cdn.jsdelivr.net/npm/@ungap/custom-elements"></script>


  <style>
    #data-modal-2 .modal-dialog,
    #data-modal-extend-results .modal-dialog {
      width: 90%;
      height: 90%;
      margin: auto;
    }

    #data-modal-2 .modal-body,
    #data-modal-extend-results .modal-body {
      overflow-x: auto;
      max-height: calc(100vh - 75px);
      overflow-y: auto;
    }


    #picker {
      position: absolute;
      z-index: 1000;
      display: none;
    }

    #upload-modal .input-group,
    #upload-modal .control-label {
      display: none;
    }

    .upload-width {
      width: 200px;
      /* Adjust the percentage as needed */
    }

    .dialogWide>.modal-dialog {
      width: 70% !important;
    }
  </style>

  </script>
  <script type="module" crossorigin src="./assets/index-e0991477.js"></script>
  <link rel="modulepreload" crossorigin href="./assets/svelte-d0c1ce0e.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-c32909fe.js">
  <link rel="modulepreload" crossorigin href="./assets/core-js-2d8c9565.js">
  <link rel="modulepreload" crossorigin href="./assets/functional-red-black-tree-9a31655a.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-grid-guide-f9af0e3b.js">
  <link rel="modulepreload" crossorigin href="./assets/lodash.memoize-3ade426c.js">
  <link rel="modulepreload" crossorigin href="./assets/lodash.throttle-ffc5cd0d.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-edgehandles-492d93fd.js">
  <link rel="modulepreload" crossorigin href="./assets/uuid-4a60fe23.js">
  <link rel="modulepreload" crossorigin href="./assets/lodash-60a95ce7.js">
  <link rel="modulepreload" crossorigin href="./assets/graphlib-fb07f523.js">
  <link rel="modulepreload" crossorigin href="./assets/dagre-d1376a01.js">
  <link rel="modulepreload" crossorigin href="./assets/jszip-d6a40c37.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-svg-007c0459.js">
  <link rel="modulepreload" crossorigin href="./assets/file-saver-db54ffa7.js">
  <link rel="modulepreload" crossorigin href="./assets/@babel-6419d65b.js">
  <link rel="modulepreload" crossorigin href="./assets/fflate-79449187.js">
  <link rel="modulepreload" crossorigin href="./assets/iobuffer-57f3551f.js">
  <link rel="modulepreload" crossorigin href="./assets/pako-d51e0120.js">
  <link rel="modulepreload" crossorigin href="./assets/fast-png-e349d887.js">
  <link rel="modulepreload" crossorigin href="./assets/jspdf-31ff80fb.js">
  <link rel="modulepreload" crossorigin href="./assets/cssesc-12b6f755.js">
  <link rel="modulepreload" crossorigin href="./assets/font-family-papandreou-68aa6c85.js">
  <link rel="modulepreload" crossorigin href="./assets/svgpath-39d7fd42.js">
  <link rel="modulepreload" crossorigin href="./assets/specificity-c7128631.js">
  <link rel="modulepreload" crossorigin href="./assets/svg2pdf.js-e8de51e2.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-dagre-3ff1744a.js">
  <link rel="modulepreload" crossorigin href="./assets/layout-base-b8dad132.js">
  <link rel="modulepreload" crossorigin href="./assets/cose-base-a00aebd9.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-fcose-ab07e4d1.js">
  <link rel="modulepreload" crossorigin href="./assets/webcola-aa723311.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-cola-07b57262.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-context-menus-94745aa4.js">
  <link rel="modulepreload" crossorigin href="./assets/@jaames-324f80d4.js">
  <link rel="modulepreload" crossorigin href="./assets/jquery-c6c8cbf9.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-panzoom-3ae164df.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-undo-redo-cb1f98a5.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-automove-1d03c186.js">
  <link rel="modulepreload" crossorigin href="./assets/konva-f9762ddf.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-node-editing-6999870e.js">
  <link rel="modulepreload" crossorigin href="./assets/cytoscape-edge-editing-bf93633c.js">
  <link rel="modulepreload" crossorigin href="./assets/dexie-978df543.js">
  <link rel="stylesheet" href="./assets/cytoscape-context-menus-1313501e.css">
  <link rel="stylesheet" href="./assets/index-07680a7c.css">
</head>

<body>
  <div class="modal fade" tabindex="-1" role="dialog" id="data-modal-2">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">Data Viewer (Double click on column name to change)</h4>
        </div>
        <div class="modal-body">
          {{ DT::DTOutput(shiny::NS("dataViewer","tbl_data"), width = "100%", height = "auto") }}
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" tabindex="-1" role="dialog" id="data-modal-extend-results">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {{ lavaangui:::extendResultsUI("extend") }}
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" tabindex="-1" role="dialog" id="upload-modal">
    <div class="modal-dialog upload-width" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">Data Upload Status</h4>
        </div>
        <div class="modal-body">
          {{ shiny::fileInput("dataUpload-fileInput", "Uploading Status", accept=c(".csv,.sav, .xlsx, .rds", ".txt"))}}
        </div>
      </div>
    </div>
  </div>



  <div id="picker"></div>

  <div id="app"></div>
  
</body>

</html>