{% extends "base.jinja" %}

{% block content %}
<main class="md:col-span-3 flex flex-col gap-4 m-4 w-full">
    {{ TopBar::new(session)|safe }}

    <header class="flex flex-col gap-2">
        <h2 class="text-gray-600 text-6xl font-semibold text-center">Create recipe</h2>
    </header>
    <div class="flex flex-col gap-8">
        <div class="flex flex-wrap gap-8 justify-center">
            <form action="/search" method="post" class="flex flex-col gap-4">
                <label for="title" class="flex gap-4">
                    <span>Title:</span>
                    <input id="title" name="title" class="input border border-solid border-gray-200 rounded-lg" type="search" value="{{title}}" />
                </label>
                <label for="summary" class="flex gap-4">
                    <span>Summary:</span>
                    <textarea id="summary" name="summary" class="input border border-solid border-gray-200 rounded-lg" type="search" value="{{summary}}" />
                </label>
                <label for="ingeredients" class="flex gap-4">
                    <span>Ingeredients:</span>
                    <textarea id="ingeredients" name="ingeredients" class="input border border-solid border-gray-200 rounded-lg" type="search" value="{{summary}}" />
                </label>
                <label for="steps" class="flex gap-4">
                    <span>Steps:</span>
                    <textarea id="steps" name="steps" class="input border border-solid border-gray-200 rounded-lg" type="search" value="{{summary}}" />
                </label>
                <div></div>
                <label for="tags" class="flex gap-4">
                    <span>Tags:</span>
                    <textarea id="tags" name="tags" class="input border border-solid border-gray-200 rounded-lg" type="search" value="{{summary}}" />
                </label>
            </form>
        </div>
    </div>
</main>
{% endblock %}