{% extends "base.html" %}
{% block title %}Contacts List{% endblock %}
{% block content %}
<h1 id="title"
    class="inline-block pb-0 mx-auto mt-8 mb-0 text-6xl 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 - INFINITE
</h1>

<p class='text-3xl font-bold mt-0 mb-16 max-w-xl text-center prose-xl'>
    Contacts List
</p>

<ul id="persons" class="flex flex-col gap-4 mb-16">
    {% include "infinite/persons_partial.html" %}
</ul>

<div id='persons-loading' class='spinner mb-24 animate-bounce'>
    <p class='text-xl prose-xl'>loading more contacts</p>
    <p class='text-xl prose-xl'>
        <em class='text-red-500'>with simulated slow down</em>
    </p>
</div>

{% endblock %}