Simple antler template

---
layout: provider
---
{{ current_provider =  id }}
{{ current_provider }}



<div class="mx-auto my-4 max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex flex-wrap -mx-2">

        <!-- Games associated with this provider -->
        <div class="w-full px-2">
            <h2 class="text-xl font-bold my-4">Games of {{ title }}</h2>

            {{ collection:games paginate="10"  as="game" }}
               
                <div class="flex flex-wrap -mx-2">

                    {{ if no_results }}
                    <div class="w-full text-center py-10">
                        <p class="text-gray-600 mb-4">No games found.</p>
                        <a href="/" class="inline-block bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-700 transition-colors">Go to Home Page</a>
                    </div>
                    {{ /if }}

                    {{ game }}
                        <div class="w-full md:w-1/4 px-2 mb-4">
                            <div class="bg-white p-4 rounded-lg shadow">
                                {{ if image }}
                                <img src="{{ image:url }}" alt="{{ title }}" class="w-full h-auto mb-2">
                                {{ /if }}
                                <h3 class="text-lg text-black font-bold">{{ title }}</h3>

                            </div>
                        </div>
                    {{ /game }}

                </div>

            {{ paginate }}
                <nav class="mx-auto my-4 max-w-screen-xl px-4 sm:px-6 lg:px-8">
                    <div class="-mt-px  flex w-0 flex-1">
                        <a href="{{ prev_page }}" class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4  font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
                            <svg class="mr-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z" clip-rule="evenodd" />
                            </svg>
                            Previous
                        </a>
                    </div>

                    <div class="ml-4 md:-mt-px md:flex">
                        <p class=" font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">Current page: {{ current_page }}</p>
                    </div>

                    <div class="-mt-px flex w-0 flex-1 ml-4">
                        <a href="{{ next_page }}" class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4  font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
                            Next
                            <svg class="ml-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
                            </svg>
                        </a>
                    </div>
                </nav>
            {{ /paginate }}

            {{ /collection:games }}
        </div>
    </div>
</div>