<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    {% if upgrade_insecure_requests %}
    <meta
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests"
    />
    {% endif %}
    <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.min.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.min.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-min/plotly.min.js') }}"></script>

    <script
      defer
      src="{{ url_for('static', filename='node_modules/@fortawesome/fontawesome-free/js/brands.min.js') }}"
    ></script>
    <script
      defer
      src="{{ url_for('static', filename='node_modules/@fortawesome/fontawesome-free/js/solid.min.js') }}"
    ></script>
    <script
      defer
      src="{{ url_for('static', filename='node_modules/@fortawesome/fontawesome-free/js/regular.min.js') }}"
    ></script>
    <script
      defer
      src="{{ url_for('static', filename='node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.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">
          <button
            type="button"
            class="btn btn-outline-primary"
            data-bs-toggle="modal"
            data-bs-target="#codeModal"
          >
            <i class="fa-solid fa-code"></i>
          </button>

          <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-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 class="row py-1">
              <a
                href="https://github.com/zincware/ZnDraw"
                class="btn btn-light"
                role="button"
                target="”_blank”"
                ><i class="fa-brands fa-github"></i
              ></a>
            </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"></div>
            <div class="col col-md-auto">
              <button
                type="button"
                class="btn-close"
                aria-label="Close"
                id="interactionMenuClose"
              ></button>
            </div>
          </div>
          <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 D</code></dd>
                <dt class="col-sm-3">switch transform control mode</dt>
                <dd class="col-sm-9"><code>keypress T</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>

    <div
      class="modal fade"
      id="codeModal"
      tabindex="-1"
      aria-labelledby="codeModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="codeModalLabel">
              ZnDraw Code Access
            </h1>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <h3>Python Code</h3>
            <code id="python-code-block"> </code>
            <br />
            <h3>Share Link</h3>
            <code id="share-link-block"></code>
            <br />
            <a
              class="btn btn-primary"
              href="{{ url_for('token', token=token) }}"
              role="button"
              id="btnShareLink"
              >Copy link to clipboard</a
            >
            <script>
              document.getElementById(
                "python-code-block",
              ).innerHTML = `from zndraw import ZnDraw <br>vis = ZnDraw(url="${window.location.href}", token="{{ token }}")`;
              // url but without trailing slash
              const url = window.location.href.replace(/\/$/, "");
              const target_href = "{{ url_for('token', token=token) }}";
              const full_url = url + target_href;

              document.getElementById("share-link-block").innerHTML = full_url;

              document.getElementById("btnShareLink").onclick = function (
                event,
              ) {
                event.preventDefault();
                navigator.clipboard.writeText(full_url);
              };
            </script>
          </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>

    <!-- Play / Pause Button -->
    <div id="playPauseCtrl">
      <div class="btn-group btn-group-lg" role="group" id="playPauseBtn">
        <button type="button" class="btn btn-outline-primary" id="backwardBtn">
          <i class="fa-solid fa-backward"></i>
        </button>
        <button type="button" class="btn btn-outline-primary" id="playBtn">
          <i class="fa-solid fa-play"></i>
        </button>
        <button type="button" class="btn btn-outline-primary" id="forwardBtn">
          <i class="fa-solid fa-forward"></i>
        </button>
      </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>
