<!DOCTYPE html>
<html>


<head lang="en">
  <meta charset="utf-8">
  <title>ZnDraw</title>
  <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" type="button" data-bs-toggle="collapse"
              data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
              aria-controls="panelsStayOpen-collapseOne">
              Settings
            </button>
          </h2>
          <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
            aria-labelledby="panelsStayOpen-headingOne">
            <div class="container">
              <div class="row">
                <div class="col-sm">

                  <div class="accordion-body">
                    <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>

                    <div class="row">
                      <div class="col-auto">
                        <label for="max_fps" class="form-label">Max FPS</label>
                        <output id="max_fps_output">{{ config.max_fps }}</output>
                      </div>
                      <div class="col-auto">
                        <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>
                  </div>

                </div>
                <div class="col-sm">
                  <div class="row">
                    <div class="col-auto">
                      <label for="frame_buffer" class="form-label">Initial Buffer Size</label>
                      <output id="frame_buffer_output">{{ config.frame_buffer }}</output>
                    </div>
                    <div class="col-auto">
                      <input type="range" class="form-range" min="1" max="1000" id="frame_buffer"
                        value="{{ config.frame_buffer }}" , oninput="frame_buffer_output.value = this.value">
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-auto">
                      <label for="frames_per_post" class="form-label">POST Request Size</label>
                      <output id="frames_per_post_output">{{ config.frames_per_post }}</output>
                    </div>
                    <div class="col-auto">
                      <input type="range" class="form-range" min="1" max="100" id="frames_per_post"
                        value="{{ config.frames_per_post }}" , oninput="frames_per_post_output.value = this.value">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
            <button class="accordion-button" type="button" data-bs-toggle="collapse"
              data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="true"
              aria-controls="panelsStayOpen-collapseTwo">
              Controls
            </button>
          </h2>
          <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse show"
            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="text-center">
                      <div class="btn-group" role="group" aria-label="Basic example">
                        <button type="button" class="btn btn-primary" id="sphere_plus">+</button>
                        <button type="button" class="btn btn-primary" disabled>Particles</button>
                        <button type="button" class="btn btn-primary" id="sphere_minus">-</button>
                      </div>
                      <p></p>
                      <div class="btn-group" role="group" aria-label="Basic example">
                        <button type="button" class="btn btn-primary" id="bond_plus">+</button>
                        <button type="button" class="btn btn-primary" disabled>Bonds</button>
                        <button type="button" class="btn btn-primary" id="bond_minus">-</button>
                      </div>
                      <p></p>
                      <div class="btn-group" role="group" aria-label="Basic example">
                        <button type="button" class="btn btn-primary" id="resolution_plus">+</button>
                        <button type="button" class="btn btn-primary" disabled>Resolution</button>
                        <button type="button" class="btn btn-primary" id="resolution_minus">-</button>
                      </div>
                    </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">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>
    </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>

</body>

</html>