{% 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]" id="main">
	<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 thing</p>
	</header>

	<h2 class="text-4xl my-3">Inspect a requirements.txt file</h2>

	<form hx-post="/api/upload-requirements" class="flex flex-col" id="requirements-form" hx-encoding="multipart/form-data" hx-target="#main" hx-swap="outerHTML">
		<div class="flex">
			<input type='file' name='requirementsFile' class="flex-1 border-2 border-black">
			<button class="h-full w-fit px-2 py-1 bg-cyan-700 text-white flex border-2 border-black">
				Upload
			</button>
		</div>

		<div class="htmx-indicator flex flex-col w-full min-h-72 items-center justify-center">
			<img src="/static/bars.svg" width="64" height="64"/> 
			<p class="text-center">Analysing your (quite bloated) requirements...</p>
		</div>

	</form>

	{% if false %}
		<h2 class="text-4xl my-3">Inspect a package</h2>

		<form hx-post="/api/dependency-tree-non-infinite" hx-target="#noinfinite-displaybox" hx-swap="innerHTML" class="flex flex-col">
			<input type="hidden" name="isfirst" value="true"/>
			<label for="package-name-input" class="block my-1">Enter the name of the package to inspect</label>
			<div class="flex h-min w-full">
				<input
						type="text"
						placeholder="torch"
						id="package-name-input"
						name="package"
						autofocus
						required
						class="border-2 border-black border-r-0 px-2 py-1 flex-1"
						>
						<button class="h-full w-fit px-2 py-1 bg-cyan-700 text-white flex border-2 border-black">submit</button>
			</div>
		</form>
	{% endif %}



	</div>
</main>
{% endblock %}