<!doctype html>
<html lang="en" class="">
  <head>
    <meta charset="UTF-8" />
    <title>ZnDraw</title>
    <link
      rel="icon"
      type="image/x-icon"
      href="{{ url_for('static', filename='favion-192x192.png') }}"
    />
  </head>

  <body>
    <!-- We use the double body for json-forms / bootstrap to work -->
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>ZnDraw</title>
        <link
          rel="icon"
          type="image/x-icon"
          href="{{ url_for('static', filename='favion-192x192.png') }}"
        />
        <script type="importmap">
          {
            "imports": {
              "three": "{{ url_for('static', filename='/node_modules/three/build/three.module.js') }}",
              "three/": "{{ url_for('static', filename='/node_modules/three/') }}"
            }
          }
        </script>
        <link
          rel="stylesheet"
          href="{{ url_for('static', filename='main.css') }}"
        />
        <!-- Bootstrap -->
        <link
          rel="stylesheet"
          href="{{ url_for('static', filename='node_modules/bootstrap/dist/css/bootstrap.min.css') }}"
        />
      </head>

      <body>
        <script src="{{ url_for('static', filename='node_modules/@json-editor/json-editor/dist/jsoneditor.js') }}"></script>
        <script src="{{ url_for('static', filename='node_modules/socket.io/client-dist/socket.io.js') }}"></script>
        <script src="{{ url_for('static', filename='node_modules/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
        <script src="{{ url_for('static', filename='node_modules/plotly.js-dist/plotly.js') }}"></script>

        <script
          defer
          src="{{ url_for('static', filename='node_modules/@fortawesome/fontawesome-free/js/brands.js') }}"
        ></script>
        <script
          defer
          src="{{ url_for('static', filename='node_modules/@fortawesome/fontawesome-free/js/solid.js') }}"
        ></script>
        <script
          defer
          src="{{ url_for('static', filename='node_modules/@fortawesome/fontawesome-free/js/regular.js') }}"
        ></script>
        <script
          defer
          src="{{ url_for('static', filename='node_modules/@fortawesome/fontawesome-free/js/fontawesome.js') }}"
        ></script>

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

        <noscript>
          <div class="alert alert-danger" role="alert" id="js-blocker-warning">
            <h4 class="alert-heading">
              Please enable JavaScript to use ZnDraw.
            </h4>
          </div>
        </noscript>

        <div id="scene-container"></div>

        <!-- 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 main-navbar">
          <div class="container-fluid">
            <a class="navbar-brand" id="HelpBtn">
              <!-- <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"></div>
            <div class="d-flex">
              <form id="uploadForm" method="post" enctype="multipart/form-data">
                <input
                  type="file"
                  name="file"
                  id="fileInput"
                  style="display: none"
                />
                <input
                  type="submit"
                  value="Upload"
                  id="uploadBtn"
                  style="display: none"
                />
                <label class="btn btn-outline-primary mx-1" for="fileInput"
                  ><i class="fas fa-upload"></i> Upload</label
                >
              </form>

              <button
                type="button"
                class="btn btn-outline-primary mx-1"
                id="downloadBtn"
              >
                <i class="fas fa-download"></i> Download
              </button>
              <button
                type="button"
                class="btn btn-outline-primary"
                data-bs-toggle="modal"
                data-bs-target="#helpModal"
              >
                <i class="fa-solid fa-circle-info"></i>
              </button>
              <a class="btn btn-outline-info mx-1" href="/" role="button"
                ><i class="fa-solid fa-rotate-right"></i> Reload</a
              >
              <button class="btn btn-outline-danger mx-1" id="ExitBtn">
                <i class="fa-solid fa-circle-xmark"></i> EXIT
              </button>
            </div>
          </div>
        </nav>

        <div class="fixed-left-container">
          <!-- Content for the fixed left container -->
          <div class="card h-100 rounded-0">
            <!-- <div class="card-header text-center">
      <h4>ZnDraw</h4>
    </div> -->
            <div class="card-body">
              <div class="col">
                <div class="row py-1">
                  <button
                    class="btn btn-light"
                    type="button"
                    id="selectionMenuBtn"
                    data-placement="right"
                    data-bs-container="body"
                    data-bs-content="Selection"
                    data-target="selectionMenu"
                  >
                    <i class="fa-regular fa-hand-pointer"></i>
                  </button>
                </div>
                <div class="row py-1">
                  <button
                    class="btn btn-light"
                    type="button"
                    id="interactionMenuBtn"
                    data-placement="right"
                    data-bs-container="body"
                    data-bs-content="Interaction"
                    data-target="interactionMenu"
                  >
                    <i class="fas fa-retweet"></i>
                  </button>
                </div>
                <div class="row py-1">
                  <button
                    class="btn btn-light"
                    type="button"
                    id="sceneMenuBtn"
                    data-placement="right"
                    data-bs-container="body"
                    data-bs-content="Scene"
                    data-target="sceneMenu"
                  >
                    <i class="fas fa-cube"></i>
                  </button>
                </div>
                <div class="row py-1">
                  <button
                    class="btn btn-light"
                    type="button"
                    id="drawMenuBtn"
                    data-placement="right"
                    data-bs-container="body"
                    data-bs-content="Drawing"
                    data-target="drawMenu"
                  >
                    <i class="fas fa-pencil-alt"></i>
                  </button>
                </div>
                <div class="row py-1">
                  <button
                    class="btn btn-light"
                    type="button"
                    id="analysisMenuBtn"
                    data-placement="right"
                    data-bs-container="body"
                    data-bs-content="Analysis"
                    data-target="analysisMenu"
                  >
                    <i class="fas fa-chart-bar"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="fixed-left-menu">
          <!-- Selection -->
          <div
            class="card h-100 rounded-0"
            id="selectionMenu"
            style="display: none"
          >
            <div class="card-body">
              <div class="row">
                <div class="col"></div>
                <div class="col col-md-auto">
                  <button
                    type="button"
                    class="btn-close"
                    aria-label="Close"
                    id="selectionMenuClose"
                  ></button>
                </div>
              </div>
              <div id="selection-json-editor"></div>
              <div class="row my-3">
                <div class="col">
                  <button
                    type="button"
                    id="selection-json-editor-submit"
                    class="btn btn-primary w-100"
                  >
                    <i class="fa-solid fa-circle-check"></i> Apply
                  </button>
                </div>
                <div class="col">
                  <a
                    class="btn btn-secondary w-100"
                    role="button"
                    id="downloadSelectedBtn"
                    ><i class="fa-solid fa-download"></i> Download</a
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- Interaction -->
          <div
            class="card h-100 rounded-0"
            id="interactionMenu"
            style="display: none"
          >
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h4>Interaction</h4>
                </div>
                <div class="col col-md-auto">
                  <button
                    type="button"
                    class="btn-close"
                    aria-label="Close"
                    id="interactionMenuClose"
                  ></button>
                </div>
              </div>
              <select
                class="form-select"
                aria-label="Select Modifier"
                id="modifier-select"
              >
                <option selected value="">Select Interaction Method</option>
              </select>
              <hr />
              <div id="interaction-json-editor"></div>
              <button
                type="button"
                id="interaction-json-editor-submit"
                class="btn btn-primary w-100"
              >
                <i class="fa-solid fa-play"></i> Run Modifier
              </button>
            </div>
          </div>

          <!-- Scene -->
          <div
            class="card h-100 rounded-0"
            id="sceneMenu"
            style="display: none"
          >
            <div class="card-body">
              <div class="row">
                <div class="col"></div>
                <div class="col col-md-auto">
                  <button
                    type="button"
                    class="btn-close"
                    aria-label="Close"
                    id="sceneMenuClose"
                  ></button>
                </div>
              </div>
              <div id="scene-json-editor"></div>
            </div>
          </div>

          <!-- Draw -->
          <div class="card h-100 rounded-0" id="drawMenu" style="display: none">
            <div class="card-body">
              <div class="row">
                <div class="col"></div>
                <div class="col col-md-auto">
                  <button
                    type="button"
                    class="btn-close"
                    aria-label="Close"
                    id="drawMenuClose"
                  ></button>
                </div>
              </div>
              <div id="draw-json-editor"></div>

              <div class="row my-3">
                <div class="col">
                  <button
                    type="button"
                    class="btn btn-primary w-100"
                    id="drawAddCanvas"
                  >
                    <i class="fa-solid fa-plus"></i> Add
                  </button>
                </div>
                <div class="col">
                  <button
                    type="button"
                    class="btn btn-danger w-100"
                    id="drawRemoveCanvas"
                  >
                    <i class="fa-solid fa-trash"></i> Remove
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Analyse -->
          <div
            class="card h-100 rounded-0"
            id="analysisMenu"
            style="display: none"
          >
            <div class="card-body" style="width: 500px">
              <div class="row">
                <div class="col">
                  <h4>Analysis</h4>
                </div>
                <div class="col col-md-auto">
                  <button
                    type="button"
                    class="btn-close"
                    aria-label="Close"
                    id="analysisMenuClose"
                  ></button>
                </div>
              </div>
              <select
                class="form-select"
                aria-label="Select Modifier"
                id="analysis-select"
              >
                <option selected value="">Select Analysis Method</option>
              </select>
              <hr />
              <div id="analysis-json-editor"></div>
              <button
                type="button"
                id="analysis-json-editor-submit"
                class="btn btn-primary w-100"
              >
                Analyse
              </button>
              <div id="analysisPlot"></div>
            </div>
          </div>
        </div>

        <!-- Modal -->
        <div
          class="modal fade"
          id="helpModal"
          tabindex="-1"
          aria-labelledby="helpModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog modal-xl">
            <div class="modal-content">
              <div class="modal-header">
                <h1 class="modal-title fs-5" id="helpModalLabel">
                  ZnDraw Help
                </h1>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">
                <div class="rounded-3 bg-white px-2 pt-2">
                  <dl class="row">
                    <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">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>
                    <dt class="col-sm-3">toggle canvas movement</dt>
                    <dd class="col-sm-9"><code>keypress F</code></dd>
                    <dt class="col-sm-3">duplicate selected anchor point</dt>
                    <dd class="col-sm-9"><code>keypress T</code></dd>
                    <dt class="col-sm-3">switch transform control mode</dt>
                    <dd class="col-sm-9"><code>keypress D</code></dd>
                    <dt class="col-sm-3">select / scale drawing geometry</dt>
                    <dd class="col-sm-9">
                      <code>keypress shift</code> + <code>mousewheel</code>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Add Scene Modifier -->
        <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>

        <!-- Add Bonds -->
        <div class="modal" tabindex="-1" id="addBondsModal">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Add Bonds</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="addBondsImport" class="form-label"
                    >Path to bonds <code>class</code></label
                  >
                  <input
                    type="email"
                    class="form-control"
                    id="addBondsImport"
                    aria-describedby="addBondsImportHelp"
                  />
                  <div id="addBondsImportHelp" 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="addBondsImportBtn"
                >
                  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"
        />

        <!-- Additional info bars -->
        <div class="alert alert-secondary" role="alert" id="alertBoxDrawing">
          <h4 class="alert-heading">Drawing Mode</h4>
          <p>
            You are moving the manifold: toggle with <code>keypress F</code>.
          </p>
        </div>

        <div class="alert alert-secondary" role="alert" id="alertBoxCamera">
          <h4 class="alert-heading">Camera Locked</h4>
          <p>
            The camera target is locked (camera pan is disabled): toggle with
            <code>keypress c</code>.
          </p>
        </div>
      </body>
    </html>
  </body>
</html>
