{% extends "base.html" %}

{% block content %}
<main class="md:col-span-3 flex flex-col gap-4 m-4">
    <div class="flex justify-center md:justify-end">
        <a href="/sign-in" class="btn text-primary border-primary md:border-2 hover:shadow-lg transition ease-out duration-300">Login</a>
    </div>

    <header class="flex flex-col gap-2">
        <h2 class="text-gray-600 text-6xl font-semibold text-center">Recipes</h2>
    </header>

    <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 justify-center">
            <div class="btn bg-secondary-100 text-secondary-200 hover:shadow-inner transform hover:scale-110 hover:bg-opacity-60 transition ease-out duration-300">Load More</div>
        </div>
    </div>
</main>
{% endblock %}