{% extends "base.html" %}
{% block content %}
<h1 id="title"
    class="inline-block pb-0 mx-auto mb-0 text-8xl font-black leading-tight leading-loose text-transparent bg-clip-text bg-gradient-to-r from-red-600 via-pink-500 to-yellow-400 ring-red-500 text-shadow-xl text-shadow-zinc-950 ring-5">
    HTMX PATTERNS
</h1>

<p class='text-3xl font-bold mt-0 mb-16 max-w-xl text-center prose-xl'>
    A collection of HTMX patterns
</p>

<ul id="patterns" class="grid grid-cols-3 gap-4">
    {% for link, url in links.items() %}
    <li class='w-full'>
        <a href="{{ url }}"
            class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full">
            {{ link }}
        </a>
    </li>
    {% endfor %}
    <!-- <a href="{{ url_for('infinite') }}" -->
    <!--     class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded"> -->
    <!--     Infinite Scroll -->
    <!-- </a> -->

    <!-- Ajaxify - https://hypermedia.systems/htmx-in-action/#_ajax_ifying_our_application -->
    <!-- Using HTTP verbs -->
    <!-- Validation -->
    <!-- Pagination -->
    <!-- Modals -->
    <!-- Active Search -->
    <!-- Lazy Loading -->
    <!-- Inline Delete -->
    <!-- Bulk Delete -->

</ul>

{% endblock %}