{% extends "base.html" %}

{% block content %}
<!-- main content -->
<main class="px-16 py-6 bg-gray-100 md:col-span-3">
    <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>
        <h2 class="text-gray-600 text-6xl font-semibold">Recipes</h2>
        <h3 class="text-2xl font-semibold pl-1">For Techies</h3>
    </header>

    <div>
        <h4 class="font-bold mt-12 pb-2 border-b border-gray-200">Latest Recipes</h4>
        <div class="mt-8 grid md:grid-cols-3 gap-10">
            {% for recipe in recipies %}
            {{ recipe|safe }}
            {% endfor %}
        </div>

        <div class="flex justify-center mt-8">
            <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 %}