<!doctype html>
<html lang="en" data-bs-theme="light">

<head>
  <meta charset="utf-8" />
  {% if upgrade_insecure_requests %}
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
  {% endif %}
  <title>ZnDraw{% if simgen %} + SiMGen{% endif %}</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>
</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 src="{{ url_for('static', filename='node_modules/marked/marked.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="token" data-token="{{ token }}"></div>
  <div id="scene-container"></div>
  <div class="overlay" id="overlay">
    <h1 class="overlay-text">Upload File</h1>
  </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 navbar-expand-md fixed-top bg-body-tertiary main-navbar">
    <div class="container-fluid">
      <div class="navbar-brand" href="#"><a class="btn fs-5 px-0" href="https://github.com/zincware/zndraw" target="_blank" rel="noopener noreferrer">ZnDraw</a>{% if simgen %} + <a class="btn fs-5 px-0" href="https://github.com/rokasel/simgen" target="_blank" rel="noopener noreferrer">SiMGen</a>{% endif %}</div>
      <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav me-auto">
        {% if token is not none%}
        <li class="nav-item mx-1">
            <a type="button" class="btn btn-outline-danger btn-single-row" id="newTokenBtn" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-title="Reset Scene" href="/reset">
            <i class="fa-solid fa-power-off"></i></a>
          </li>
          {% endif %}

          <li class="nav-item mx-1">
            <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
              <input type="checkbox" class="btn-check" id="drawingSwitch" autocomplete="off">
              <label class="btn btn-outline-primary" for="drawingSwitch" data-bs-placement="bottom"
                data-bs-toggle="tooltip" data-bs-title="Activate Drawing Tool"><i
                  class="fa-solid fa-pencil"></i></label>
            </div>
          </li>
          <li class="nav-item mx-1">
            <button type="button" class="btn btn-outline-primary" id="trashBtn" data-bs-placement="bottom"
              data-bs-toggle="tooltip" data-bs-title="Remove all guiding points and canvases."><i
                class="fa-solid fa-hand-sparkles"></i></button>
          </li>
          {% if simgen %}
          <li class="nav-item mx-1">
            <div data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-title="Connect selected atoms (shift click)">
            <button type="button" class="btn btn-success btn-single-row" id="simgen-link-btn" disabled><img
                src="{{ url_for('static', filename='misc/linking.svg') }}" alt="*" height="20px">
              <b>Connect</b></button>
            </div>
          </li>
          <li class="nav-item mx-1">
            <button type="button" class="btn btn-success btn-single-row" id="simgen-run-btn" data-bs-placement="bottom"
              data-bs-toggle="tooltip" data-bs-title="Run SiMGen molecule generation"><i
                class="fa-solid fa-rocket"></i> <b>Generate</b></button>
          </li>
          <li class="nav-item mx-1">
            <button type="button" class="btn btn-success btn-single-row" id="simgen-canvas-btn" data-bs-placement="bottom"
              data-bs-toggle="tooltip" data-bs-title="Replace scene with empty canvas and enter drawing mode"><i class="fa-solid fa-file-circle-plus"></i> <b>New canvas</b></button>
          </li>
          {% endif %}
        </ul>
      </div>
      <div class="mx-auto order-0">
        {# Some Center Text #}
      </div>

      <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ms-auto">
          {% if tutorial %}
          <li class="nav-item mx-1">
            <button type="button" class="btn btn-warning btn-single-row" data-bs-toggle="modal"
              data-bs-target="#tutorialModal">Tutorial <i class="fa-solid fa-film"></i></button>
          </li>
          {% endif %}
          <li class="nav-item mx-1">
            <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
              <input type="checkbox" class="btn-check" id="ZnDrawConsoleSwitch" autocomplete="off"
                data-bs-toggle="collapse" data-bs-target="#ZnDrawConsole" aria-controls="ZnDrawConsole"
                aria-expanded="false">
              <label class="btn btn-outline-primary" for="ZnDrawConsoleSwitch" data-bs-placement="bottom"
                data-bs-toggle="tooltip" data-bs-title="Console"><i class="fa-solid fa-terminal"></i></i></label>
            </div>
          </li>
          <li class="nav-item mx-1">
            <div data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-title="Python Access">
              <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#codeModal">
                <i class="fa-solid fa-code"></i>
              </button>
            </div>
          </li>
          <li class="nav-item  mx-1">
            <button type="button" class="btn btn-outline-primary" id="downloadBtn" data-bs-toggle="tooltip"
              data-bs-title="Download scene" data-bs-placement="bottom">
              <i class="fas fa-download"></i>
            </button>
          </li>
           <li class="nav-item mx-1">
            <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 " for="fileInput" data-bs-toggle="tooltip"
                data-bs-title="Upload file (max 1 MB)" data-bs-placement="bottom"><i class="fas fa-upload"></i></label>
            </form>
          </li>

          {# <li class="nav-item mx-1" data-bs-toggle="tooltip" data-bs-title="Open available files"
            data-bs-placement="bottom">
            <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#filesModal">
              <i class="fa-solid fa-folder-open"></i>
            </button>
          </li> #}

          <li class="nav-item mx-1" data-bs-toggle="tooltip" data-bs-title="ZnDraw help" data-bs-placement="bottom">
            <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>
          </li>
          <li class="nav-item mx-1" data-bs-toggle="tooltip" data-bs-title="Change color mode"
            data-bs-placement="bottom">
            <button type="button" class="btn btn-outline-secondary" id="colorModeSwitch"><i
                class="fa-solid fa-sun"></i></button>
          </li>
          {% if token is none%}
          <li class="nav-item mx-1">
            <a class="btn btn-outline-info " href="/" role="button"><i class="fa-solid fa-rotate-right"></i></a>
          </li>
          <li class="nav-item mx-1">
            <a class="btn btn-outline-danger" id="ExitBtn" href="/exit">
              <i class="fa-solid fa-circle-xmark"></i>
            </a>
          </li>
          {% else %}
          <li class="nav-item mx-1">
            <div class="dropdown dropstart">
              <button class="btn btn-outline-info dropdown-toggle" type="button" data-bs-toggle="dropdown"
                data-bs-auto-close="outside" aria-expanded="false">
                <i class="fa-solid fa-users"></i>
              </button>
              <ul class="dropdown-menu" style="width: 400px;">
                <div class="container text-center" id="connectedUsersDropdown">
                  <div class="row">
                    <div class="col-6">
                      User
                    </div>
                    <div class="col">
                      Camera
                    </div>
                  </div>
                  <hr class="dropdown-divider">
                </div>
                <hr class="dropdown-divider">
                <div class="d-grid gap-2 px-2">
                  <button class="btn btn-outline-primary" type="button" id="copyTokenUrlBtn">Share (copy URL to clipboard)</button>
                </div>
              </ul>
            </div>
          </li>
          {% endif %}
        </ul>
      </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 px-1">
        <div class="py-1" data-bs-toggle="collapse" data-bs-target="#collapseSelectionCard" aria-expanded="false"
          aria-controls="collapseSelectionCard">
          <input type="radio" class="btn-check" name="leftMenuInput" id="option1" autocomplete="off"
            value="collapseSelectionCard">
          <label class="btn" for="option1" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Selection">
            <i class="fa-regular fa-hand-pointer"></i>
          </label>
        </div>

        <div class="py-1" data-bs-toggle="collapse" data-bs-target="#collapseInteractionCard" aria-expanded="false"
          aria-controls="collapseInteractionCard">
          <input type="radio" class="btn-check" name="leftMenuInput" id="option2" autocomplete="off"
            value="collapseInteractionCard">
          <label class="btn" for="option2" data-bs-toggle="tooltip" data-bs-placement="right"
            data-bs-title="Interaction">
            <i class="fa-solid fa-circle-nodes"></i>
          </label>
        </div>
        <div class="py-1" data-bs-toggle="collapse" data-bs-target="#collapseSceneCard" aria-expanded="false"
          aria-controls="collapseSceneCard">
          <input type="radio" class="btn-check" name="leftMenuInput" id="option3" autocomplete="off"
            value="collapseSceneCard">
          <label class="btn" for="option3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Scene">
            <i class="fas fa-cube"></i>
          </label>
        </div>

        <div class="py-1" data-bs-toggle="collapse" data-bs-target="#collapseDrawCard" aria-expanded="false"
          aria-controls="collapseDrawCard">
          <input type="radio" class="btn-check" name="leftMenuInput" id="option4" autocomplete="off"
            value="collapseDrawCard">
          <label class="btn" for="option4" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Geometry">
            <i class="fa-regular fa-map"></i>
          </label>
        </div>
        <div class="py-1" data-bs-toggle="collapse" data-bs-target="#collapseAnalyseCard" aria-expanded="false"
          aria-controls="collapseAnalyseCard">
          <input type="radio" class="btn-check" name="leftMenuInput" id="option5" autocomplete="off"
            value="collapseAnalyseCard">
          <label class="btn" for="option5" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Analyse">
            <i class="fas fa-chart-bar"></i>
          </label>
        </div>
        <div class="py-1" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Source Code">
          <a href="https://github.com/zincware/ZnDraw" class="btn" role="button" target="”_blank”"><i
              class="fa-brands fa-github"></i></a>
        </div>
      </div>
    </div>
  </div>

  <div id="leftMenuCards">
    <!-- Selection -->
    <div class="collapse" id="collapseSelectionCard" data-bs-parent="#leftMenuCards">
      <div class="card h-100 rounded-0 position-fixed top-0 start-0 fixed-left-menu rounded-end" id="selectionMenu">
        <div class="card-body">
          <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>
        </div>
      </div>
    </div>

    <!-- Interaction -->
    <div class="collapse" id="collapseInteractionCard" data-bs-parent="#leftMenuCards">
      <div class="card h-100 rounded-0 position-fixed top-0 start-0 fixed-left-menu rounded-end" id="interactionMenu">
        <div class="card-body">
          <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>
    </div>

    <!-- Scene -->
    <div class="collapse" id="collapseSceneCard" data-bs-parent="#leftMenuCards">
      <div class="card h-100 rounded-0 position-fixed top-0 start-0 fixed-left-menu rounded-end" id="sceneMenu">
        <div class="card-body">
          <div id="scene-json-editor"></div>
        </div>
      </div>
    </div>

    <!-- Draw -->
    <div class="collapse" id="collapseDrawCard" data-bs-parent="#leftMenuCards">
      <div class="card h-100 rounded-0 position-fixed top-0 start-0 fixed-left-menu rounded-end" id="drawMenu">
        <div class="card-body">
          <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>
    </div>

    <!-- Analyse -->
    <div class="collapse" id="collapseAnalyseCard" data-bs-parent="#leftMenuCards">
      <div class="card h-100 rounded-0 position-fixed top-0 start-0 fixed-left-menu rounded-end" id="analysisMenu">
        <div class="card-body" style="width: 500px">
          <div id="analysis-json-editor"></div>
          <button type="button" id="analysis-json-editor-submit" class="btn btn-primary w-100">
            <i class="fa-solid fa-play"></i> Analyse
          </button>
          <div id="analysisPlot"></div>
        </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" id="helpModalBody">
        </div>
      </div>
    </div>
  </div>

  <!-- Files Selection -->
  <div class="modal fade" id="filesModal" 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">Select File</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="container text-center">
          <h3>There are currently no files to select from.</h3>
        </div>
      </div>
    </div>
  </div>
  </div>

  <!-- Tutorial -->

  {% if tutorial %}
  <div class="modal fade" id="tutorialModal" tabindex="-1" aria-labelledby="tutorialModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="tutorialModalLabel">ZnDraw Tutorial</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="tutorialModalBody">
          <iframe src="{{ tutorial }}" id="tutorialIframe" scrolling="no" frameborder="0" webkitallowfullscreen
            mozallowfullscreen allowfullscreen></iframe>
          </button>
        </div>
      </div>
    </div>
  </div>
  </div>
  {% endif %}

  <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">
          <div id="codeModalContent"></div>
        </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>

  <!-- ZnDraw Console -->

  <div class="collapse" id="ZnDrawConsole" style="transition: 0s;">
    <div class="card" id="ZnDrawConsoleCard">
      <div class="card-header">
        <div class="row">
          <div class="col">Console</div>
          <div class="col col-md-auto">
            <button type="button" class="btn-close" id="ZnDrawConsoleExitBtn"
              onclick="document.getElementById('ZnDrawConsoleSwitch').click();"></button>
          </div>
        </div>
      </div>
      <div class="card-body overflow-y-auto" id="ZnDrawConsoleBody">
      </div>
    </div>
  </div>

  <!-- Pointer Info Box -->

  <div class="card" id="pointerInfoBox">
    <div class="card-body px-2 py-1" id="pointerInfoBoxBody">
      This is some text within a card body.
    </div>
  </div>


  <!-- Progress Bar -->
  <button id="info" type="button" class="btn position-absolute bottom-0 start-50 translate-middle-x my-1"
    data-bs-toggle="modal" data-bs-target="#frameInputModal">0 / 0</button>

  <div class="modal fade" id="frameInputModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5">Change Frame</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <input type="number" class="form-control" id="frameInput" />
        </div>
      </div>
    </div>
  </div>

  <div class="fixed-bottom" style="width: 100%;">
    <div class="progress" id="frameProgress" role="progressbar" aria-label="Basic example" aria-valuenow="50"
      aria-valuemin="0" aria-valuemax="100" style="height: 12px">
      <div class="progress-bar bg-primary" id="frameProgressBar" style="width: 0%; transition: none;"></div>
    </div>
  </div>

  <!-- Progress Bar Bookmarks -->
  <div id="bookmarks">
    {# <button type="button" class="btn btn-link"><i class="fa-regular fa-bookmark"></i></button> #}
  </div>

   <!-- toast -->
  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">INFO</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body" id="toastBody">
      </div>
    </div>
  </div>

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

</html>
