{% include 'header.html' %}

<h1 class=" my-2 text-2xl text-center font-bold text-green-400">
    Available Sources
</h1>

<div class="mx-auto my-1 p-1 w-full">
    <div class="flex flex-wrap gap-4 justify-center w-full">
        {% for chat in chats %}
        <a title="{{chat.name}}" href="/{{chat.page_id}}"
            class="justify-items-center min-h-full w-5/12 sm:w-1/4 md:w-1/5 lg:w-1/6 rounded p-2 text-center break-words shadow hover:shadow-md hover:bg-blue-100 dark:bg-red-700 dark:hover:bg-red-500">

            <img src="/{{chat.page_id}}/logo?big=1" class="w-full rounded-full">
            <div class="p-1 mt-2 rounded text-white bg-blue-500 dark:bg-yellow-500">{{chat.name}}</div>

        </a>
        {% endfor %}
    </div>
</div>

{% include 'footer.html' %}