Now this is a TODO APP !!!

templates/page1.html

@@ -1,20 +1,20 @@
 {% extends "base.html" %}
 
-{% block content %}
+{% block content %} 
 <div class="w-small w-2/3 mx-auto py-10 text-gray-600">
-  <input
-    type="text"
-    name="search"
-    hx-post="/search"
-    hx-trigger="keyup changed delay:250ms"
-    hx-indicator=".htmx-indicator"
-    hx-target="#todo-results"
-    placeholder="Search"
-    class="bg-white h-10 px-5 pr-10 rounded-full text-2xl focus:outline-none"
-  >
-  <span class="htmx-indicator">Searching...</span>
+    <input
+        type="text"
+        name="search"
+        hx-post="/search"
+        hx-trigger="keyup changed delay:250ms"
+        hx-indicator=".htmx-indicator"
+        hx-target="#todo-results"
+        placeholder="Search"
+        class="bg-white h-10 px-5 pr-10 rounded-full text-2xl focus:outline-none"
+    >
+    <span class="htmx-indicator">Searching...</span>
 </div>
- suppss
+suppss 
 
 
 <table class="border-collapse w-small w-2/3 mx-auto">
@@ -26,7 +26,7 @@
     </tr>
   </thead>
   <tbody id="todo-results">
-    
+    {% include 'todo.html' %}
   </tbody>
 </table>
 {% endblock content %}

templates/todo.html

@@ -0,0 +1,15 @@
+{% if todos|length>0 %}
+  {% for todo in todos %}
+    <tr class="bg-white lg:hover:bg-gray-100 flex lg:table-row flex-row lg:flex-row flex-wrap lg:flex-no-wrap mb-10 lg:mb-0">
+      <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">{{todo.id}}</td>
+      <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">{{todo.title}}</td>
+      <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">
+        {% if todo.completed %}
+          <span class="rounded bg-green-400 py-1 px-3 text-xs font-bold">Yes</span>
+        {% else %}
+          <span class="rounded bg-red-400 py-1 px-3 text-xs font-bold">No</span>
+        {% endif %}
+      </td>
+    </tr>
+  {% endfor %}
+{% endif %}