{% extends "base.html" %}

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

    <header class="flex flex-col gap-2">
        <h2 class="text-gray-600 text-6xl font-semibold text-center">Search</h2>
    </header>
    <div class="flex flex-col gap-8">
        <div class="flex flex-wrap gap-8 justify-center">
            <form action="/search" method="post">
                <input name="q" class="input input-search" type="search" />
            </form>
        </div>
    </div>

    <div class="flex flex-col gap-8">
        <div class="flex flex-wrap gap-8 justify-center">
            {% for recipe in recipies %}
            {{ recipe|safe }}
            {% endfor %}
        </div>
        <div class="flex gap-4 flex-wrap">
            {% match count %}
            {% when 0 %}
            {% when _ %}
                {% for page in 0..count %}
                    <a class="btn" href="/?page={{page}}">{{page}}</a>
                {% endfor %}
            {% endmatch %}
        </div>
    </div>
</main>
{% endblock %}