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

    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon/favicon.ico') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon/favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon/favicon-16x16.png') }}">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <div class="graph-wrapper">
        <!-- Graph container -->
        <div id="graph-container"></div>

        <!-- Top left: Title -->
        <div class="floating-panel top-left">
            <h1 class="graph-title">{{ title }}</h1>
        </div>

        <!-- Status message -->
        <div id="status-message" class="floating-panel status-panel alert d-none"></div>

        <!-- Top center: Graph stats -->
        <div class="floating-panel top-center">
            <span>Nodes: <span id="node-count">0</span>, Edges: <span id="edge-count">0</span></span>
        </div>

        <!-- Top right: Search & Trace -->
        <div class="floating-panel top-right">
            <h5 class="panel-title">Search & Filter</h5>
            <div class="panel-body">
                <label for="trace-attribute" class="form-label small">Search Attribute:</label>
                <div class="input-group mb-2">
                    <input type="text" id="search-nodes" class="form-control form-control-sm" placeholder="Search...">
                    <button class="btn btn-sm btn-outline-secondary" type="button" id="clear-search">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
                <div class="mb-2">
                    <label for="trace-attribute" class="form-label small">Trace Attribute:</label>
                    <select id="trace-attribute" class="form-select form-select-sm">
                        <option value="">No trace</option>
                    </select>
                </div>
                <div class="mb-2">
                    <label for="filter-attribute" class="form-label small">Hide Attribute:</label>
                    <select id="filter-attribute" class="form-select form-select-sm">
                        <option value="">Show all</option>
                    </select>
                </div>
                <div class="form-check mt-2 d-none" id="show-origins-container">
                    <input class="form-check-input" type="checkbox" id="show-origins" value="">
                    <label class="form-check-label small" for="show-origins">
                        trace origins
                    </label>
                </div>
            </div>
        </div>

        <!-- Right side: Node/Edge details panel -->
        <div class="floating-panel right-side d-none" id="node-details">
            <div class="panel-header">
                <h5 class="mb-0" id="node-details-title">Details</h5>
            </div>
            <div class="panel-body" id="node-details-content">
                <!-- Content populated dynamically -->
            </div>
        </div>

        <!-- Bottom center: Spring length slider -->
        <div class="floating-panel bottom-center d-none" id="spring-length-control">
            <input type="range" class="form-range" id="spring-length-slider"
                   min="50" max="400" step="10" value="200"
                   data-bs-toggle="tooltip" data-bs-placement="top" title="Spring Length">
            <span id="spring-length-value" class="ms-2">200</span>
        </div>

        <!-- Bottom right: Control buttons -->
        <div class="floating-panel bottom-right">
            <button id="reset-zoom" class="btn btn-sm btn-outline-secondary">Reset View</button>
            <span class="divider">|</span>

            <!-- Layout dropdown -->
            <div class="dropdown d-inline-block">
                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
                        id="layoutDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    Layout: <span id="current-layout">fCoSE</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="layoutDropdown">
                    <li><h6 class="dropdown-header">Physics</h6></li>
                    <li><a class="dropdown-item layout-option" href="#" data-layout="fcose">fCoSE</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><h6 class="dropdown-header">Hierarchical</h6></li>
                    <li><a class="dropdown-item layout-option" href="#" data-layout="breadthfirst">Breadth-First Tree</a></li>
                    <li><a class="dropdown-item layout-option" href="#" data-layout="dagre">Dagre (DAG)</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><h6 class="dropdown-header">Other</h6></li>
                    <li><a class="dropdown-item layout-option" href="#" data-layout="circle">Circle</a></li>
                    <li><a class="dropdown-item layout-option" href="#" data-layout="concentric">Concentric</a></li>
                    <li><a class="dropdown-item layout-option" href="#" data-layout="grid">Grid</a></li>
                </ul>
            </div>
            <span class="divider">|</span>
            <button id="export-graph" class="btn btn-sm btn-outline-secondary">Export</button>
        </div>
    </div>

    <!-- Graph tooltip -->
    <div class="graph-tooltip" style="opacity: 0;"></div>

    <!-- Socket.IO -->
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Cytoscape.js and extensions -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>

    <!-- Layout extensions -->
    <script src="https://unpkg.com/layout-base@2.0.1/layout-base.js"></script>
    <script src="https://unpkg.com/cose-base@2.2.0/cose-base.js"></script>
    <script src="https://unpkg.com/cytoscape-fcose@2.2.0/cytoscape-fcose.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.min.js"></script>
    <script src="https://unpkg.com/cytoscape-dagre@2.5.0/cytoscape-dagre.js"></script>

    <!-- Keep utils.js for backward compatibility if needed -->
    <script src="{{ url_for('static', filename='js/utils.js') }}"></script>

    <!-- Main application - ES6 modules -->
    <script type="module" src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>