<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python dependency graph</title>
    <link rel="stylesheet" href="static/css/styles.css">
</head>
<body>
    <!-- Control Panel for Sliders -->
    <div id="controlPanel">
        <div class="slider-container">
            <label for="linkForceSlider">Link Force:</label>
            <input type="range" id="linkForceSlider" min="0.1" max="2" step="0.001" value="0.7">
        </div>
        <div class="slider-container">
            <label for="repelForceSlider">Repel Force:</label>
            <input type="range" id="repelForceSlider" min="100" max="3000" step="0.1" value="1500">
        </div>
        <div class="slider-container">
            <label for="centerForceSlider">Center Force:</label>
            <input type="range" id="centerForceSlider" min="0.01" max="0.1" step="0.001" value="0.02">
        </div>
        <div class="slider-container">
            <label for="linkLengthSlider">Link Length:</label>
            <input type="range" id="linkLengthSlider" min="50" max="500" step="0.1" value="100">
        </div>
        <button id="resetZoomButton">Reset Zoom</button>
    </div>
    <svg width="100%" height="100%"></svg> <!-- Ensure SVG is large enough to render the graph -->

    <!-- Pass graph data from Flask to JS -->
    <script>
        const graphData = {{ graph_data | tojson }};
    </script>

    <!-- Load D3.js -->
    <script src="https://d3js.org/d3.v7.min.js"></script>

    <!-- Reference the external simulate_graph.js file -->
    <script src="static/js/simulate_graph.js"></script>
</body>
</html>
