<!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/"
    }
  }
</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>

  <div class="hamburger-menu">
    <input id="menu__toggle" type="checkbox" />
    <label class="menu__btn" for="menu__toggle">
      <span></span>
    </label>

    <ul class="menu__box">
      <h1 class="menu__header">ZnDraw</h1>
      <div class="accordion" id="accordionPanelsStayOpenExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="panelsStayOpen-headingOne">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false"
              aria-controls="panelsStayOpen-collapseOne">
              Settings
            </button>
          </h2>
          <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse"
            aria-labelledby="panelsStayOpen-headingOne">
            <div class="container">
              <div class="accordion-body">
                <div class="row">
                  <div class="col-sm">
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" value="" id="selectAtoms" checked>
                      <label class="form-check-label" for="selectAtoms">
                        Select Atoms
                      </label>
                    </div>
                    <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" value="" id="autoRestart">
                      <label class="form-check-label" for="autoRestart">
                        Auto Restart
                      </label>
                    </div>

                    <select class="form-select" aria-label="Default select example" id="materialSelect">
                      <option selected>Select Material</option>
                    </select>

                    <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" value="" id="wireframe">
                      <label class="form-check-label" for="wireframe">
                        Wireframe
                      </label>
                    </div>
                  </div>
                  <div class="col-sm">
                    <div class="row">
                      <div class="col-sm-3">
                        <div class="row">Max FPS</div>
                        <div class="row">POST</div>

                        <div class="row">1. Light</div>
                        <div class="row">2. Light</div>
                      </div>
                      <div class="col-sm-2">
                        <div class="row"><output id="max_fps_output">{{ config.max_fps }}</output></div>
                        <div class="row"><output id="frames_per_post_output">{{ config.frames_per_post }}</output></div>

                        <div class="row"><output id="spotLightIntensity_output">1</output></div>
                        <div class="row"><output id="hemisphereLightIntensity_output">0.1</output></div>
                      </div>
                      <div class="col-sm">
                        <div class="row"><input type="range" class="form-range" min="1" max="100" step="0.5"
                            id="max_fps" value="{{ config.max_fps }}" , oninput="max_fps_output.value = this.value">
                        </div>
                        <div class="row"><input type="range" class="form-range" min="1" max="500" id="frames_per_post"
                            value="{{ config.frames_per_post }}" , oninput="frames_per_post_output.value = this.value">
                        </div>

                        <div class="row"><input type="range" class="form-range" min="0" max="1" step="0.01"
                            id="spotLightIntensity" value="1"></div>
                        <div class="row"><input type="range" class="form-range" min="0" max="1" step="0.01"
                            id="hemisphereLightIntensity" value="0.1"></div>
                      </div>
                      <div class="col-sm-1"><!-- Padding on the right --></div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
              aria-controls="panelsStayOpen-collapseTwo">
              Controls
            </button>
          </h2>
          <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
            aria-labelledby="panelsStayOpen-headingTwo">
            <div class="accordion-body">

              <div class="container">
                <div class="row">
                  <div class="col-sm">

                    <div class="btn-group-vertical" role="group" aria-label="Basic example">
                      <button type="button" class="btn btn-secondary" id="animate" {% if config.update_function %}
                        disabled {% endif %}>Load Animation</button>
                      <button type="button" class="btn btn-secondary" id="reset_selection">Reset Selection</button>
                      <button type="button" class="btn btn-secondary" id="hide_selection" disabled>Hide
                        Selection</button>
                      <button type="button" class="btn btn-secondary" id="reset">Reset Scene</button>
                    </div>
                  </div>
                  <div class="col-sm">
                    <div class="btn-group-vertical" role="group" aria-label="Basic example">
                      <button type="button" class="btn btn-outline-dark" id="sphere_plus">+</button>
                      <button type="button" class="btn btn-outline-dark" id="bond_plus">+</button>
                      <button type="button" class="btn btn-outline-dark" id="resolution_plus">+</button>
                    </div>
                    <div class="btn-group-vertical" role="group" aria-label="Basic example">
                      <button type="button" class="btn btn-outline-dark" disabled>Particles</button>
                      <button type="button" class="btn btn-outline-dark" disabled>Bonds</button>
                      <button type="button" class="btn btn-outline-dark" disabled>Resolution</button>
                    </div>
                    <div class="btn-group-vertical" role="group" aria-label="Basic example">
                      <button type="button" class="btn btn-outline-dark" id="sphere_minus">-</button>
                      <button type="button" class="btn btn-outline-dark" id="bond_minus">-</button>
                      <button type="button" class="btn btn-outline-dark" id="resolution_minus">-</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="panelsStayOpen-headingThree">
            <button class="accordion-button" type="button" data-bs-toggle="collapse"
              data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="true"
              aria-controls="panelsStayOpen-collapseThree">
              Info
            </button>
          </h2>
          <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse show"
            aria-labelledby="panelsStayOpen-headingThree">
            <div class="accordion-body">
              <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>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="panelsStayOpen-headingFour">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="false"
              aria-controls="panelsStayOpen-collapseFour">
              Manipulate Particles
            </button>
          </h2>
          <div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse"
            aria-labelledby="panelsStayOpen-headingFour">
            <div class="accordion-body">
              <div id="python_class_control"></div>
            </div>
          </div>
        </div>
      </div>
    </ul>
  </div>

  <div id="loading">
    <div class="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>
  <div id="info"></div>
  <div id="progressBar"></div>
  <div id="bufferBar"></div>
  <div id="greyOut"></div>
  <div id="right_btn_group">
    <img id="help_btn" src="https://openmoji.org/data/color/svg/2139.svg" />
    <img id="add_btn" src="https://openmoji.org/data/color/svg/2795.svg" />
  </div>


  <div class="container py-4" id="help_container" style="display: none; opacity: 0.9;">
    <div class="h-100 p-5 bg-light rounded-3 border border-primary">
      <h2>ZnDraw Help</h2>
      <br>
      <div class="rounded-3 bg-white" , style="padding-left: 10px;">
        <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">run update function</dt>
          <dd class="col-sm-9"><code>keypress enter</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>

        </dl>
      </div>
    </div>
  </div>

  <div id="add_class">
    <div class="container py-4" id="help_container">
      <div class="h-100 p-5 bg-light rounded-3 border border-primary">
        <div class="form-group">
          <label for="newPythonClass">Add path to python module</label>
          <input class="form-control" id="newPythonClass" placeholder="zndraw.examples.Duplicate">
          <br>
          <button id="newPythonClassBtn" class="btn btn-primary">Add to Scene</button>
        </div>
      </div>
    </div>
  </div>



</body>

</html>