{% extends "base.html" %} {% block content %}
<link rel="stylesheet" href="/static/css/casestudies.css" />
<!-- Breadcrumbs  -->
<nav class="navbar navbar-expand-lg bg-body-tertiary" style="--bs-breadcrumb-divider:'/'" aria-label="breadcrumb">
  <ol class="breadcrumb p-3 m-0" id="breadcrumbs">
</nav>


<!-- Sticky Workflow Header -->
  <div class="workflow-header">
    <h5>Process Flow</h5>
    <div class="step-tracker">
      <div class="step-item" data-step="1" data-type="regulatory-question">
        <div class="step-icon">1</div>
        <span class="step-text">Regulatory Question</span>
      </div>
      <div class="step-line"></div>

      <div class="step-item" data-step="2" data-type="workflow-step">
        <div class="step-icon">2</div>
        <span class="step-text">Safety Assessment Workflow Step</span>
      </div>
      <div class="step-line"></div>

      <div class="step-item" data-step="3" data-type="process-flow-step">
        <div class="step-icon">3</div>
        <span class="step-text">Case Study Step</span>
      </div>
      <div class="step-line"></div>

      <div class="step-item" data-step="4" data-type="workflow-substep">
        <div class="step-icon">4</div>
        <span class="step-text">Case Study Substep</span>
      </div>
      <div class="step-line"></div>

      <div class="step-item" data-step="5" data-type="tool">
        <div class="step-icon">5</div>
        <span class="step-text">Tools, Models and Data</span>
      </div>
    </div>
  </div>

<!-- Steps Wrapper -->
<div class="overflow-x-hidden d-flex flex-row py-md-5 py-3" id="stepsWrapper">
  <!-- Step 1 -->
  <div class="w-100 min-vw-100">
    <div class="container">
      <div id="step1-content">
        <!-- Content will be injected here -->
      </div>
    </div>
    <div class="container">
      <div id="step1-bottom-content">
        <!-- Content will be injected here -->
      </div>
    </div>
  </div>
  <!-- Step 2 -->
  <div class="w-100 min-vw-100">
    <div class="container">
      <!-- Dynamic content for Step 2 -->
      <div id="step2-content">
        <!-- Content will be injected here -->
      </div>
    </div>
    <div class="container">
      <div id="step2-bottom-content">
        <!-- Content will be injected here -->
      </div>
    </div>
  </div>
  <!-- Step 3 -->
  <div class="w-100 min-vw-100">
    <div class="container">
      <div id="step3-content">
        <!-- Content will be injected here -->
      </div>
    </div>
    <div class="container">
      <div id="step3-bottom-content">
        <!-- Content will be injected here -->
      </div>
    </div>
  </div>
  <!-- Step 4 -->
  <div class="w-100 min-vw-100">
    <div class="container">
      <div id="step4-content">
        <!-- Content will be injected here -->
      </div>
    </div>
    <div class="container">
      <div id="step4-bottom-content">
        <!-- Content will be injected here -->
      </div>
    </div>
  </div>
  <!-- Step 5 -->
  <div class="w-100 min-vw-100">
    <div class="container">
      <div id="step5-content">
        <!-- Content will be injected here -->
      </div>
    </div>
    <div class="container">
      <div id="step5-bottom-content">
        <!-- Content will be injected here -->
      </div>
    </div>
  </div>
  <!-- Step 6 -->
  <div class="w-100 min-vw-100">
    <div class="container">
      <div id="step6-content">
        <!-- Content will be injected here -->
      </div>
    </div>
    <div class="container">
      <div id="step6-bottom-content">
        <!-- Content will be injected here -->
      </div>
    </div>
  </div>
</div>

<!-- Feedback button to link to the GitHub issue page so users can submit issues/feedback -->
<a href="https://github.com/VHP4Safety/ui-casestudy-config/issues/new">
  <button class="btn btn-vhppink-distinct ms-2" style="position: fixed; bottom: 20px; right: 20px;">Give Us feedback</button>
</a>

<script src="/static/js/casestudies.js"></script>
{% endblock %}