{% layout 'layout.liquid' %}

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

{% block content %}
<main class="p-4 mx-auto flex-1 max-w-[800px]">
    <h1 class="text-5xl my-4">Depyth</h1>
    
    <form hx-post="/api/dependency" hx-target="#displaybox" hx-swap="innerHTML" class="flex flex-col">
        <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>



    <div class="flex flex-col w-full my-8" id="displaybox">


        <!--<div class="p-2 w-full border border-black">
            <p class="text-2xl font-mono">torch <span class="text-sm">158kb</span></p>
            <p>Tensors and Dynamic neural networks in Python with strong GPU acceleration.</p>

            <ul class="mt-2">
                <div class="p-2 w-full border border-black">
                    <p class="text-2xl font-mono">filelock <span class="text-sm">33kb</span></p>
                    <p>A platform independent file lock.</p>
                </div>
            </ul>
        </div>-->
    </div>
</main>
{% endblock %}