<!doctype html>
<!-- Copyright (c) Microsoft Corporation.
 Licensed under the MIT License. -->

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamic Web Plan Visualizer</title>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
      integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK"
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <!-- App wrapper for the responsive layout -->
    <div class="app-wrapper">
      <!-- Container with responsive layout -->
      <div class="container">
        <!-- Enhanced Header section -->
        <div class="plan-header">
          <div class="plan-info">
            <h1 id="plan-title" class="plan-title">
              Dynamic Web Plan Visualizer
            </h1>
            <p
              id="plan-description"
              class="plan-description"
              style="display: none"
            ></p>
          </div>

          <div class="view-mode-toggle">
            <button id="view-mode-dynamic" class="view-toggle-btn active">
              <span class="toggle-label"><i class="fas fa-sitemap"></i></span>
            </button>
            <button id="view-mode-static" class="view-toggle-btn">
              <span class="toggle-label"
                ><i class="fas fa-project-diagram"></i
              ></span>
            </button>
          </div>

          <div class="node-selector">
            <label for="node-select"
              ><i class="fas fa-map-marker-alt"></i
            ></label>
            <select id="node-select"></select>
          </div>

          <!-- Close button for action view mode -->
          <button
            id="close-modal-button"
            class="icon-button"
            title="Close"
            style="display: none"
          >
            <i class="fas fa-times"></i>
          </button>
        </div>

        <!-- Status message -->
        <div id="status-message" class="status-message"></div>

        <!-- Main content area with the visualization canvas -->
        <div class="main-content">
          <!-- Cytoscape container will resize both horizontally and vertically -->
          <div id="cy-container"></div>

          <!-- Floating Controls - positioned outside cytoscape container -->
          <div class="plan-floating-controls">
            <!-- View & Navigation Group -->
            <div class="plan-control-group">
              <button
                id="zoom-in-button"
                class="plan-control-btn"
                title="Zoom In"
              >
                +
              </button>
              <button
                id="zoom-out-button"
                class="plan-control-btn"
                title="Zoom Out"
              >
                −
              </button>
              <button
                id="zoom-fit-button"
                class="plan-control-btn"
                title="Fit to View"
              >
                ⤢
              </button>
              <button
                id="center-button"
                class="plan-control-btn"
                title="Center Graph"
              >
                ⊙
              </button>
            </div>

            <!-- Path & Selection Group -->
            <div class="plan-control-group">
              <button
                id="show-path-button"
                class="plan-control-btn"
                title="Show/Hide Path"
              >
                <i class="fas fa-route"></i>
              </button>
              <button
                id="go-to-current-button"
                class="plan-control-btn"
                title="Go to Current Node"
              >
                <label for="node-select"
                  ><i class="fas fa-map-marker-alt"></i
                ></label>
              </button>
              <button
                id="reset-view-button"
                class="plan-control-btn"
                title="Reset View"
              >
                ↻
              </button>
            </div>

            <!-- Export & Tools Group -->
            <div class="plan-control-group">
              <button
                id="screenshot-button"
                class="plan-control-btn"
                title="Screenshot"
              >
                ◉
              </button>
              <button
                id="export-button"
                class="plan-control-btn"
                title="Export Data"
              >
                ↓
              </button>
            </div>
          </div>
        </div>

        <!-- Tooltip element for hover information -->
        <div class="tooltip" id="tooltip"></div>
      </div>

      <!-- Modals and flyouts positioned outside the main container -->
      <!-- Form for uploading screenshots -->
      <div id="screenshot-upload-modal" class="modal">
        <div class="modal-content">
          <div class="modal-header">
            <h2>Upload Screenshot</h2>
            <button class="close-modal"><i class="fas fa-times"></i></button>
          </div>
          <div class="modal-body">
            <p>
              Upload a screenshot for the selected node:
              <strong id="upload-node-name"></strong>
            </p>

            <div class="upload-container">
              <input type="file" id="screenshot-file" accept="image/*" />
              <div class="drop-area" id="drop-area">
                <p>Drag & drop an image here or click to select</p>
                <div class="preview-container" id="preview-container">
                  <img id="preview-image" src="" alt="Preview" />
                </div>
              </div>
            </div>

            <div class="modal-actions">
              <button id="upload-screenshot-button" disabled>
                Upload Screenshot
              </button>
              <button class="cancel-modal">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="module" src="app.ts"></script>
  </body>
</html>
