{% layout 'layout.liquid' %}

{% block head %}
<script src="/static/lib/sigma.min.js"></script>
<script src="/static/lib/graphology.umd.min.js"></script>

<title>Depyth</title>
{% endblock %}

{% block content %}
<main class="p-4 mx-auto flex-1 max-w-[800px]">
	<header class="w-fit mx-auto mb-8">
		<h1 class="text-5xl my-4 text-center">Depyth</h1>
		<p class="italic text-center">Dumb python packages things</p>
	</header>

	<h2 class="text-4xl my-3">{{packagename}}</h2>

	<h3 class="text-3xl my-2">General info</h3>

	<p>Installing this package means installing up to <span id="total-packages-installed" class="font-bold">0</span> packages</p>
	<p>Installing this package means installing up to <span id="total-weight" class="font-bold">0</span><span id="total-weight-unit">kb</span>.</p>

	<h3 class="text-3xl my-2">Dependency graph</h3>

	<div id="graph" class="w-full h-[600px] bg-white border border-black"></div>




	<script>
		// Create a graphology graph
		fetch("/api/graph/{{packagename}}").then( res => res.json() ).then( json => {
			console.log(json);

			document.getElementById('total-packages-installed').innerText = '?';
			document.getElementById('total-weight').innerText = json.weight;
			document.getElementById('total-weight-unit').innerText = json.weightUnit;


			const graph = new graphology.Graph();

			graph.import( json.graph );

			// Instantiate sigma.js and render the graph
			const sigmaInstance = new Sigma(graph, document.getElementById("graph"));
		})

	</script>

</main>
{% endblock %}