replace slippers with django-cotton

main reason: slippers cannot pass request via context inside its
components, making it annoying to use template takes that take request.
more reasons: not actively worked on, no named slots, having to define
components in components.yaml + new components do not get registered
without restarting server

games/templates/cotton/button.html

@@ -0,0 +1,4 @@
+<button type="button"
+        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 mt-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+    {{ text }}
+</button>

games/templates/cotton/button_group_button_sm.html

@@ -0,0 +1,20 @@
+<c-vars color="gray" />
+<a href="{{ href }}"
+   class="[&:first-of-type_button]:rounded-s-lg [&:last-of-type_button]:rounded-e-lg">
+    {% if color == "gray" %}
+        <button type="button"
+                class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
+            {{ text }}
+        </button>
+    {% elif color == "red" %}
+        <button type="button"
+                class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-red-500 hover:text-white focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:border-red-700 dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white">
+            {{ text }}
+        </button>
+    {% elif color == "green" %}
+        <button type="button"
+                class="px-2 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 hover:bg-green-500 hover:border-green-600 hover:text-white focus:z-10 focus:ring-2 focus:ring-green-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:border-green-700 dark:hover:bg-green-600 dark:focus:ring-green-500 dark:focus:text-white">
+            {{ text }}
+        </button>
+    {% endif %}
+</a>

games/templates/cotton/button_group_sm.html

@@ -0,0 +1,6 @@
+<c-vars color="gray" />
+<div class="inline-flex rounded-md shadow-sm" role="group">
+    {% for button in buttons %}
+        <c-button-group-button-sm :href=button.href :text=button.text :color=button.color />
+    {% endfor %}
+</div>

games/templates/cotton/button_old.html

@@ -0,0 +1,13 @@
+{% comment %}
+title
+text
+{% endcomment %}
+<a href="{{ link }}"
+   title="{{ title }}"
+   class="truncate max-w-xs py-1 px-2 text-xs bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-sm">
+    {% comment %} <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="self-center w-6 h-6 inline">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" /> 
+    </svg>
+    {% endcomment %}
+    {{ text }}
+</a>

games/templates/cotton/button_start.html

@@ -0,0 +1,18 @@
+{% comment %}
+title
+text
+{% endcomment %}
+<button type="button"
+        title="{{ title }}"
+        autofocus
+        class="truncate max-w-xs sm:max-w-md lg:max-w-lg py-1 px-2 bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         fill="none"
+         viewBox="0 0 24 24"
+         stroke-width="1.5"
+         stroke="currentColor"
+         class="self-center w-6 h-6 inline">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
+    </svg>
+    {{ text }}
+</button>

games/templates/cotton/gamelink.html

@@ -0,0 +1,10 @@
+<span class="truncate-container">
+    <a class="underline decoration-slate-500 sm:decoration-2"
+       href="{% url 'view_game' game_id %}">
+        {% if slot %}
+            {{ slot }}
+        {% else %}
+            {{ name }}
+        {% endif %}
+    </a>
+</span>

games/templates/cotton/h1.html

@@ -0,0 +1,8 @@
+<h1 class="{% if badge %}flex items-center {% endif %}mb-4 text-3xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-white">
+    {{ slot }}
+    {% if badge %}
+        <span class="bg-blue-100 text-blue-800 text-2xl font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ms-2">
+            {{ badge }}
+        </span>
+    {% endif %}
+</h1>

games/templates/cotton/popover.html

@@ -0,0 +1,7 @@
+<div data-popover
+     id="{{ id }}"
+     role="tooltip"
+     class="absolute z-10 invisible inline-block text-sm text-white transition-opacity duration-300 bg-white border border-purple-200 rounded-lg shadow-sm opacity-0 dark:text-white dark:border-purple-600 dark:bg-purple-800">
+    <div class="px-3 py-2">{{ slot }}</div>
+    <div data-popper-arrow></div>
+</div>

games/templates/cotton/simple_table.html

@@ -0,0 +1,50 @@
+{% load param_utils %}
+<div class="shadow-md sm:rounded-lg" hx-boost="false">
+    <div class="relative overflow-x-auto sm:rounded-lg">
+        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                <tr>
+                    {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
+                </tr>
+            </thead>
+            <tbody>
+                {% for row in rows %}<c-table-row :data=row />{% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% if page_obj and elided_page_range %}
+        <nav class="flex items-center flex-column md:flex-row justify-between px-6 py-4"
+             aria-label="Table navigation">
+            <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.start_index }}</span>—<span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.end_index }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
+            <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
+                <li>
+                    {% if page_obj.has_previous %}
+                        <a href="?{% param_replace page=page_obj.previous_page_number %}"
+                           class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
+                    {% else %}
+                        <a aria-current="page"
+                           class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-300 bg-white border border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-600">Previous</a>
+                    {% endif %}
+                    {% for page in elided_page_range %}
+                        <li>
+                            {% if page != page_obj.number %}
+                                <a href="?{% param_replace page=page %}"
+                                   class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{ page }}</a>
+                            {% else %}
+                                <a aria-current="page"
+                                   class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-white border bg-gray-400 border-gray-300 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-200">{{ page }}</a>
+                            {% endif %}
+                        </li>
+                    {% endfor %}
+                    {% if page_obj.has_next %}
+                        <a href="?{% param_replace page=page_obj.next_page_number %}"
+                           class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
+                    {% else %}
+                        <a aria-current="page"
+                           class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-300 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-600">Next</a>
+                    {% endif %}
+                </li>
+            </ul>
+        </nav>
+    {% endif %}
+</div>

games/templates/cotton/table.html

@@ -0,0 +1,12 @@
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+                {% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
+            </tr>
+        </thead>
+        <tbody>
+            {{ slot }}
+        </tbody>
+    </table>
+</div>

games/templates/cotton/table_row.html

@@ -0,0 +1,16 @@
+<tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 border-b">
+    {% if slot %}
+        {{ slot }}
+    {% else %}
+        {% for td in data %}
+            {% if forloop.first %}
+                <th scope="row"
+                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">{{ td }}</th>
+            {% else %}
+                <c-table-td>
+                {{ td }}
+                </c-table-td>
+            {% endif %}
+        {% endfor %}
+    {% endif %}
+</tr>

games/templates/cotton/table_td.html

@@ -0,0 +1 @@
+<td class="px-6 py-4 min-w-20-char max-w-20-char">{{ slot }}</td>