{% extends "base.jinja" %}

{% block head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.3/marked.min.js" integrity="sha512-kZ9BCD8vqCw2vJ1XG3EVZN5M5aRNxxMK3+uYuZPWc+TtW2Z1zSgmFlTIVHYHaWH0bH2lp2dUlB/1+M1h+lvfeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{% endblock %}

{% 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="/create" method="post" class="flex flex-col gap-4 md:w-1/2 md:mb-10">
                <label for="title" class="flex gap-4">
                    <span class="w-24 shrink-0">Title:</span>
                    <input id="title" name="title" class="input border border-solid border-gray-200 rounded-lg" type="text" value="{{title}}" />
                </label>

                <label for="summary" class="flex gap-4">
                    <span class="w-24 shrink-0">Summary:</span>
                    <div class="flex gap-2 w-full">
                        <textarea id="summary" name="summary" class="textarea-with-view">{{summary}}</textarea>
                        <div class="content w-1/2"></div>
                    </div>
                </label>

                <blockquote class="w-full">
                    <p class="text-base font-semibold">Summary supports Markdown</p>
                </blockquote>

                <label for="ingeredients" class="flex gap-4">
                    <span class="w-24 shrink-0">Ingeredients:</span>
                    <div class="flex gap-2 w-full">
                        <textarea id="ingeredients" name="ingeredients" class="textarea-without-view">{{ingeredients}}</textarea>
                    </div>
                </label>

                <details class="w-full collapse collapse-arrow">
                    <summary class="text-base font-semibold collapse-title">Ingeredients should be listed as list of AMOUNT UNIT INGEREDIENT. Example:</summary>

                    <div class="flex flex-col gap-1 font-normal collapse-content">
                        <div>1 KG Potato</div>
                        <div>200 G Sugar</div>
                        <div>3 Bananas</div>
                    </div>
                </details>

                <label for="steps" class="flex gap-4">
                    <span class="w-24 shrink-0">Steps:</span>
                    <div class="flex gap-2 w-full">
                        <textarea id="steps" name="steps" class="textarea-with-view">{{steps}}</textarea>
                        <div class="content w-1/2"></div>
                    </div>
                </label>

                <details class="w-full">
                    <summary class="text-base font-semibold">Syntax for steps:</summary>
                    <div>
                    <p class="text-base"><code>*</code> is step</p>
                    <p class="text-base"><code>&gt;</code> is hint for step</p>
                    </div>
                </details>

                <label for="tags" class="flex gap-4">
                    <span class="w-24 shrink-0">Tags:</span>
                    <div class="flex gap-2 w-full">
                        <textarea id="tags" name="tags" class="textarea-with-view">{{tags}}</textarea>
                        <div class="content w-1/2">&nbsp;</div>
                    </div>
                </label>
                <div>
                    <input type="submit" class="btn w-full" value="Save" />
                </div>
            </form>
            <script type="module">
                Array.from(document.body.querySelectorAll('textarea')).forEach(el => {
                    if (!el.parentElement.querySelector('.content')) return;
                    el.parentElement.querySelector('div').innerHTML = marked.parse(el.value);
                    el.addEventListener('keyup', () => {
                        el.parentElement.querySelector('div').innerHTML = marked.parse(el.value);
                    });
                });
            </script>
        </div>
    </div>
</main>
{% endblock %}