{% include 'header.html' %}
    
    <h1 class=" my-2 text-2xl text-center font-bold text-green-400">
        Available Sources
    </h1>
    <div class="mx-auto my-2 p-2 w-full break-words">
        <div class="block md:flex flex-wrap justify-center w-full">
            {% for chat in chats %}
                <li class="w-full md:w-2/5 lg:w-1/4 border border-blue-300 rounded bg-blue-100 hover:bg-blue-200 p-3 my-3 md:mx-1 shadow-md"> <a href="/{{chat.id}}" > {{chat.name}} </a> </li>
            {% endfor %}
        </div>
    </div>

{% include 'footer.html' %}