<!DOCTYPE html>
<html>


<head lang="en">
  <meta charset="utf-8">
  <title>ZnDraw</title>
  <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favion-192x192.png') }}">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
  <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
  <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.151.3/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.151.3/examples/jsm/",
      "./modules/": "{{ url_for('static', filename='/modules/') }}"
    }
  }
</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.21.0/plotly.min.js"
    integrity="sha512-oalOW03buJpcBKtaooDOM2XrfQXI4ifCNBaFgYfY6UCQBGCFPsiwsrQVdAnENOJwjwEwLiVAgy3Ljyt7cN2LJw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
  <script type="module" src="{{ url_for('static', filename='main.js') }}"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
    crossorigin="anonymous"></script>

  <!-- Loading Spinner -->
  <div class="atom-spinner" , id="atom-spinner">
    <div class="spinner-inner">
      <div class="spinner-line"></div>
      <div class="spinner-line"></div>
      <div class="spinner-line"></div>
      <!--Chrome renders little circles malformed :(-->
      <div class="spinner-circle">
        &#9679;
      </div>
    </div>
  </div>
  <div id="greyOut"></div>


  <!-- Navigation -->

  <nav class="navbar fixed-top navbar-expand-sm bg-light"> <!-- navbar-expand to use smaller breakpoint -->
    <div class="container-fluid">
      <a class="navbar-brand">
        <!-- <img src="{{ url_for('static', filename='favion-192x192.png') }}" alt="ZnDraw Logo" width="30" height="24"> -->
        ZnDraw
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item mx-1">
            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas"
              data-bs-target="#particleCanvas" aria-controls="particleCanvas" onclick="document.activeElement.blur();">
              Particles
            </button>
          </li>
          <li class="nav-item mx-1">
            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas"
              data-bs-target="#interactionCanvas" aria-controls="interactionCanvas" onclick="document.activeElement.blur();">
              Interaction
            </button>
          </li>
          <li class="nav-item mx-1">
            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas"
              data-bs-target="#sceneCanvas" aria-controls="sceneCanvas" onclick="document.activeElement.blur();">
              Scene
            </button>
          </li>
          <li class="nav-item mx-1">
            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas"
              data-bs-target="#drawCanvas" aria-controls="drawCanvas" onclick="document.activeElement.blur();">
              Draw
            </button>
          </li>
          <li class="nav-item mx-1">
            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas"
              data-bs-target="#analyseCanvas" aria-controls="analyseCanvas" onclick="document.activeElement.blur();">
              Analyse
            </button>
          </li>
        </ul>
        <form class="d-flex">
          <button class="btn btn-outline-primary mx-1" type="button" data-bs-toggle="collapse"
            data-bs-target="#helpBoxCollapse" aria-expanded="false" aria-controls="helpBoxCollapse">
            Help
          </button>
          <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse"
            data-bs-target="#infoBoxCollapse" aria-expanded="false" aria-controls="infoBoxCollapse">
            Info
          </button>
        </form>
      </div>
    </div>
  </nav>

  <!-- Off Canvas -->
  <!-- Particles -->
  <div class="offcanvas offcanvas-start canvasControl" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
    id="particleCanvas" aria-labelledby="particleCanvasLabel">
    <div class="offcanvas-border"></div>
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="particleCanvasLabel">Particles</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">

      <div class="mb-3">
        <label for="materialSelect" class="form-label">Select particle material</label>
        <select class="form-select" id="materialSelect">
        </select>
        <div id="materialSelectHelp" class="form-text">Change the material of the particles and bonds..</div>
      </div>
      <div class="mb-3">
        <input class="form-check-input" type="checkbox" value="" id="wireframe">
        <label for="wireframe" class="form-label">Wireframe material</label>
      </div>
      <div class="mb-3">
        <label for="sphereRadius" class="form-label" id="sphereRadiusLabel">Sphere radius: {{ config['sphere_size']
          }}</label>
        <input type="range" class="form-range" id="sphereRadius" min="0.1" max="4" step="0.1"
          value="{{ config['sphere_size'] }}">
      </div>
      <div class="mb-3">
        <label for="bondDiameter" class="form-label" id="bondDiameterLabel">Bond diameter: {{ config['bond_size']
          }}</label>
        <input type="range" class="form-range" id="bondDiameter" min="0.1" max="2.0" step="0.1"
          value="{{ config['bond_size'] }}">
      </div>
      <div class="mb-3">
        <label for="resolution" class="form-label" id="resolutionLabel">Resolution: {{ config['resolution'] }}</label>
        <input type="range" class="form-range" id="resolution" min="1" max="20" step="1"
          value="{{ config['resolution'] }}">
      </div>

    </div>
  </div>

  <!-- Interaction -->
  <div class="offcanvas offcanvas-start canvasControl" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
    id="interactionCanvas" aria-labelledby="interactioneCanvasLabel">
    <div class="offcanvas-border"></div>
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="interactionCanvasLabel">Interaction</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body" id="interactionOffCanvasBody">

      <div class="mb-3">
        <label for="selection-method" class="form-label">Selection Method</label>
        <select class="form-select" aria-label="Default select example" id="selection-method">
          <option selected, value="particles">Particles</option>
          <option value="species">Species</option>
          <option value="connected">Connected Particles</option>
          <option value="none">None</option>
        </select>
        <div id="selection-methodHelp" class="form-text">Select single particles, whole molecules or disable selection.
        </div>
      </div>
      <div class="mb-3">
        <button type="button" class="btn btn-secondary" id="reset_selection">Reset Selection</button>
      </div>
      <div class="mb-3">
        <input class="form-check-input" type="checkbox" value="" id="multiselect">
        <label for="multiselect" class="form-label">Select multiple particles</label>
      </div>
      <div class="d-grid gap-2 col-6 mx-auto mb-3">
        <button type="button" class="btn btn-secondary" id="sceneModifierBtn">Modify</button>
      </div>
      <div class="mb-3">
        <label for="addSceneModifier" class="form-label">Select scene modifier</label>
        <select class="form-select" aria-label="Default select example" id="addSceneModifier">
          <option selected, value="none"> </option>
          <option value="add">Add New</option>
        </select>
        <div id="addSceneModifierHelp" class="form-text">Load a Python class to modify the scene
        </div>
      </div>
      <div id="sceneModifierSettings"></div>
    </div>
  </div>

  <!-- Scene -->
  <div class="offcanvas offcanvas-start canvasControl" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
    id="sceneCanvas" aria-labelledby="sceneCanvasLabel">
    <div class="offcanvas-border"></div>
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="sceneCanvasLabel">Scene</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <div class="mb-3">
        <label for="cameraLightIntensity" class="form-label" id="cameraLightIntensityLabel">Camera light intensity:
          1.0</label>
        <input type="range" class="form-range" min="0" max="1" step="0.01" id="cameraLightIntensity" value="1">
      </div>
      <div class="mb-3">
        <label for="spotLightIntensity" class="form-label" id="spotLightIntensityLabel">Spot light intensity:
          0.0</label>
        <input type="range" class="form-range" min="0" max="1" step="0.01" id="spotLightIntensity" value="0">
      </div>
      <div class="mb-3">
        <label for="hemisphereLightIntensity" class="form-label" id="hemisphereLightIntensityLabel">Hemisphere light
          intensity: 1.0</label>
        <input type="range" class="form-range" min="0" max="1" step="0.01" id="hemisphereLightIntensity" value="0.1">
      </div>
      <div class="mb-3">
        <label for="max_fps" class="form-label" id="max_fpsLabel">Max FPS: {{ config.max_fps }}</label>
        <input type="range" class="form-range" min="1" max="100" step="0.5" id="max_fps" value="{{ config.max_fps }}" ,
          oninput="max_fpsLabel.innerHTML = 'Max FPS: ' + this.value">
      </div>
      <div class="mb-3">
        <input class="form-check-input" type="checkbox" value="" id="autoRestart">
        <label class="form-check-label" for="autoRestart">
          Auto Restart
        </label>
      </div>
      <div class="mb-3">
        <input class="form-check-input" type="checkbox" value="" id="continuousLoading" {{ "checked" if
          config['continuous_loading'] }}>
        <label class="form-check-label" for="continuousLoading">
          Continuous Loading of new data.
        </label>
      </div>
      <div class="mb-3">
        <input class="form-check-input" type="checkbox" value="" id="showBox">
        <label for="showBox" class="form-label">Show Box (static)</label>
      </div>
      <div class="mb-3">
        <button type="button" class="btn btn-secondary" id="reset">Reset Scene</button>
        <button type="button" class="btn btn-secondary" id="animate" {% if config.update_function %} disabled {% endif
          %}>Load Animation</button>
      </div>
    </div>
  </div>

  <!-- Draw -->
  <div class="offcanvas offcanvas-start canvasControl" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
    id="drawCanvas" aria-labelledby="drawCanvasLabel">
    <div class="offcanvas-border"></div>
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="drawCanvasLabel">Draw</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">

      <div class="mb-3">
        <button type="button" class="btn btn-secondary" id="drawAddAnchor">Add anchor point</button>
        <button type="button" class="btn btn-secondary" id="drawRemoveLine">Remove Line</button>
      </div>
    </div>
  </div>

  <!-- Analyse -->
  <div class="offcanvas offcanvas-start canvasControl" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
    id="analyseCanvas" aria-labelledby="analyseCanvasLabel">
    <div class="offcanvas-border"></div>
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="analyseCanvasLabel">Analyse</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <div class="d-grid gap-2 col-6 mx-auto mb-3">
        <button type="button" class="btn btn-secondary" id="analyseBtn">Analyse</button>
      </div>
      <div class="mb-3">
        <label for="addAnalysis" class="form-label">Select analysis method</label>
        <select class="form-select" aria-label="Default select example" id="addAnalysis">
          <option selected, value="none"> </option>
          <option value="add">Add New</option>
        </select>
        <div id="addAnalysisHelp" class="form-text">Load a Python class to analyse the data
        </div>
      </div>
      <div id="analysisSettings"></div>
      <div id="analysePlot"></div>
    </div>
  </div>


  <!-- Info Box -->
  <div class="collapse" id="infoBoxCollapse">
    <div class="container-fluid rounded border border-dark" id="infoBox">
      <dl class="row">
        <dt class="col-sm-3">File</dt>
        <dd class="col-sm-9"><code>{{ config.file }}</code></dd>
        <dt class="col-sm-3">FPS</dt>
        <dd class="col-sm-9" id="FPS">-</dd>
        <dt class="col-sm-3">Particles</dt>
        <dd class="col-sm-9" id="n_particles">-</dd>
        <dt class="col-sm-3">Bonds</dt>
        <dd class="col-sm-9" id="n_bonds">-</dd>
        <dt class="col-sm-3">Selected IDs</dt>
        <dd class="col-sm-9" id="lst_selected_ids"></dd>
        {% if config.update_function %}
        <dt class="col-sm-3">Function</dt>
        <dd class="col-sm-9" id="lst_selected_ids"><code>{{ config.update_function }}</code></dd>
        {% endif %}
      </dl>
    </div>
  </div>

  <!-- Help Box -->
  <div class="collapse" id="helpBoxCollapse">
    <div class="container-fluid bg-light rounded border border-primary pt-2" id="helpBox">
      <h2>ZnDraw Help</h2>
      <div class="rounded-3 bg-white px-2 pt-2">
        <dl class="row">
          <dt class="col-sm-3">move light to camera position</dt>
          <dd class="col-sm-9"><code>keypress L</code></dd>
          <dt class="col-sm-3">play / pause</dt>
          <dd class="col-sm-9"><code>keypress space</code></dd>
          <dt class="col-sm-3">frame forwards / backwards</dt>
          <dd class="col-sm-9"><code>keypress &#9654;\&#9664; </code></dd>
          <dt class="col-sm-3">jump forwards / backwards</dt>
          <dd class="col-sm-9"><code>keypress &#9650;\&#9660; </code></dd>
          <dt class="col-sm-3">center camera around selected particle</dt>
          <dd class="col-sm-9"><code>keypress C</code></dd>
          <dt class="col-sm-3">reload animation</dt>
          <dd class="col-sm-9"><code>keypress Q</code></dd>
          <dt class="col-sm-3">select multiple particles</dt>
          <dd class="col-sm-9"><code>keydown shift</code></dd>
          <dt class="col-sm-3">show particle index</dt>
          <dd class="col-sm-9"><code>keydown I</code></dd>
        </dl>
      </div>
    </div>
  </div>

  <!-- Add Scene Modifer -->
  <div class="modal" tabindex="-1" id="addModifierModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Add Scene Modifier</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="addSceneModifierImport" class="form-label">Path to modifier <code>class</code></label>
            <input type="email" class="form-control" id="addSceneModifierImport"
              aria-describedby="addSceneModifierImportHelp">
            <div id="addSceneModifierImportHelp" class="form-text">The input should be <code>module.cls</code> such
              that
              <code> from module import cls</code> works.
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="addSceneModifierImportBtn">Load</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Add Analysis -->
  <div class="modal" tabindex="-1" id="addAnalysisModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Add Analysis</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="addAnalysisImport" class="form-label">Path to modifier <code>class</code></label>
            <input type="email" class="form-control" id="addAnalysisImport"
              aria-describedby="addAnalysisImportHelp">
            <div id="addAnalysisImportHelp" class="form-text">The input should be <code>module.cls</code> such
              that
              <code> from module import cls</code> works.
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="addAnalysisImportBtn">Load</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Progress Bar -->
  <div id="info"></div>
  <input id="frame-slider" class="frame-slider" type="range" value="0" min="0" max="100">

</body>

</html>