{% extends 'base.html.twig' %}

{% block body %}

<h1 class="text-center my-8 text-2xl text-slate-800 font-bold">Query for your Fortune</h1>
<p class="text-center">Review categories for available cookie fortunes</p>
<div class="xl:container xl:mx-auto grid grid-cols-2 gap-6 px-10 mt-8 mb-10">
    {% for category in categories %}
        <a class="bg-orange-400 hover:bg-orange-500 text-white text-center rounded-full p-4" href="{{ path('app_category_show', {'id':  category.id}) }}">
            <span class="fa {{ category.iconKey }}"></span> <span class="font-bold text-lg">{{ category.name }}</span>  ({{ category.fortuneCookies|length }})
        </a>
    {% else %}
        <h3>Hmm... there don't seem to be any fortunes</h3>
    {% endfor %}
</div>
{% endblock %}
