<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FIND Viewer</title>

    <!-- Load CSS stylesheets first -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/vendor/bootstrap.min.css') }}">
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/vendor/all.min.css') }}">
    <!-- Bootstrap Slider CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/vendor/bootstrap-slider.min.css') }}">
    <!-- Bootstrap Select CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/vendor/bootstrap-select.min.css') }}">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

    <!-- Load JavaScript libraries -->
    <!-- JQuery -->
    <script src="{{ url_for('static', filename='js/vendor/jquery-3.5.1.min.js') }}"></script>
    <!-- Popper JS -->
    <script src="{{ url_for('static', filename='js/vendor/popper.min.js') }}"></script>
    <!-- Bootstrap JS -->
    <script src="{{ url_for('static', filename='js/vendor/bootstrap.min.js') }}"></script>
    <!-- Plotly JS -->
    <script src="{{ url_for('static', filename='js/vendor/plotly-latest.min.js') }}"></script>
    <!-- Bootstrap-slider JS -->
    <script src="{{ url_for('static', filename='js/vendor/bootstrap-slider.min.js') }}"></script>
    <!-- Bootstrap-select JS -->
    <script src="{{ url_for('static', filename='js/vendor/bootstrap-select.min.js') }}"></script>
    <!-- HTML2Canvas -->
    <script src="{{ url_for('static', filename='js/vendor/html2canvas.min.js') }}"></script>
</head>
<body>
  <!-- Upload Modal -->
  {% include 'components/modals/uploadModal.html' %}
  <!-- Upload Error Modal -->
  {% include 'components/modals/uploadErrorModal.html' %}

  <!-- Parent Visualization Container -->
  <div id="parent-container" class="container-fluid mt-5" style="display: none;">
    <!-- Spinner overlay for upload, preprocessing, and analysis wait -->
    <div id="spinner-overlay" class="spinner-overlay"></div>
    <!-- Analytics Toolbox Container -->
    <div id="analytics-toolbox-container" class="row justify-content-center">
      <!-- Analytics Toolbox Card -->
      {% include 'components/analyticsToolbox.html' %}
    </div>
    <!-- FMRI Container -->
    <div id="fmri-container" class='row justify-content-center mt-1'>
      <div class="col-2 pr-1">
        <!-- FMRI User Options Container -->
        <div id="fmri-user-options-container" class="h-100">
          <!-- Visualization Options -->
          {% include 'components/fmriVisualizationOptions.html' %}
          <!-- Preprocessing Options -->
          {% include 'components/fmriPreprocessingOptions.html' %}
        </div>
      </div>
      <div class="col-10 pr-2">
        <!-- Visualization Container -->
        <div id="fmri-visualization-container" class="h-100">
          <!-- fmri visualization card -->
          {% include 'components/fmriVisualizationCard.html' %}
        </div>
      </div>
      <!-- Spinner wheel for upload, preprocessing, and analysis wait -->
      <div class="spinner-container d-flex justify-content-center">
        <div id="spinner-wheel" class="spinner-wheel"></div>
      </div>
    </div>
    <!-- Time Course Container -->
    <div id="time-course-container" class='row justify-content-center mt-2' style="visibility: hidden;">
      <div class="col-2 pr-1">
        <!-- Time Course User Options Container -->
        <div id="time-course-user-options-container" class="h-100">
          <!-- Visualization Options -->
          {% include 'components/timeCourseVisualizationOptions.html' %}
          <!-- Time Marker Options -->
          {% include 'components/timeCourseMarkerOptions.html' %}
          <!-- Preprocessing Options -->
          {% include 'components/timeCoursePreprocessingOptions.html' %}
        </div>
      </div>
      <div class="col-10 pr-2">
        <div id='time-course-visualization-container' class="h-100">
          <!-- time course visualization card -->
          {% include 'components/timeCourseVisualizationCard.html' %}
        </div>
      </div>
    </div>
    <!-- Viewer Error Modal -->
    {% include 'components/modals/viewerErrorModal.html' %}
    
  </div>

  <!-- Include the main JavaScript module -->
  <script type="module" src="static/js/main.js"></script>

</body>
</html>
