{% extends "base.html" %}
{% set active = "graph" %}
{% block title %}Cortex — Knowledge Graph{% endblock %}

{% block head %}
<script src="https://unpkg.com/cytoscape@3.30.4/dist/cytoscape.min.js"></script>
{% endblock %}

{% block content %}
<h2 class="page-title">Knowledge Graph</h2>

<div class="alert alert-warning">This page is currently under development. For a better way to explore connections, try the <a href="/explore">Explore</a> page.</div>

<div class="card">
    <div class="form-row">
        <div>
            <label for="gf-project">Project</label>
            <select id="gf-project">
                <option value="">All</option>
                {% for p in project_names %}
                <option value="{{ p }}">{{ p }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label for="gf-type">Type</label>
            <select id="gf-type">
                <option value="">All</option>
                <option value="decision">Decision</option>
                <option value="lesson">Lesson</option>
                <option value="fix">Fix</option>
                <option value="session">Session</option>
                <option value="research">Research</option>
                <option value="idea">Idea</option>
            </select>
        </div>
        <button class="btn btn-primary btn-sm" onclick="loadGraph(false)">Apply</button>
    </div>
</div>

<button id="load-more" class="btn btn-sm hidden" style="margin-bottom: 1rem;" onclick="loadGraph(true)">Load more nodes</button>

<div id="cy"></div>

<div id="node-detail" class="card hidden" style="margin-top: 1rem;">
    <div class="card-header">Selected Node</div>
    <div id="node-info"></div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/graph.js"></script>
{% endblock %}