{% extends "base.html" %}
{% block content %}
<h1 id="title"
    class="inline-block px-4 pb-0 mx-auto mb-0 text-center text-6xl sm:text-8xl font-thin text-transparent bg-clip-text bg-gradient-to-r from-terminal-600 via-terminal-500 to-terminal-900 ring-red-700 text-shadow-xl text-shadow-zinc-950 ring-5 leading-none">
    HTMX PATTERNS
</h1>

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

<p class='text-xl px-2 mt-0 mb-16 max-w-xl prose-xl text-terminal-500 font-extralight'>
    These are patterns that I have written based on content from the <a
        href="https://hypermedia.systems/htmx-in-action/">hypermedia.systems</a>
    book. There is lots of code duplication as each pattern is meant to be standalone.
</p>

<p class='text-xl px-2 mt-0 mb-16 max-w-xl prose-xl text-terminal-500 font-extralight'>
    I currently make use of htmx with fastapi, sqlmodel, sqlite, and tailwindcss
    for many of my projects. These patterns are here to serve for reference to
    myself implemented using this stack in the most pure way possible to remain
    simple and understandable. Sometimes real projects get complicated and are
    hard to bring in new features correctly. This is a playground with completely
    separate routers, models, and templates for each project.
</p>

<ul id="patterns" class="flex flex-col sm:grid grid-cols-3 gap-4">
    {% for link, url in links.items() %}
    <li class='w-full'>
        <a href="{{ url }}"
            class="cursor-pointer block text-center bg-terminal-950 hover:bg-terminal-900 hover:text-terminal-400 text-terminal-500 font-bold py-2 px-4 rounded w-full ring-terminal-300 ring-1 shadow-lg shadow-terminal-300/20 hover:shadow-terminal-300/30">
            {{ 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 %}