Add the search for articles for the admin panel.

views/admin_panel.hbs

@@ -1,4 +1,4 @@
-<main class="bg-white dark:bg-gray-800 grow">
+<main class="bg-white dark:bg-gray-600 grow">
   <section class="bg-gray-300 dark:bg-gray-600 p-3 sm:p-5 antialiased">
     <div class="mx-auto max-w-screen-2xl px-4 lg:px-12">
       <div class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden">
@@ -17,17 +17,24 @@
         </div>
         <div class="flex flex-col md:flex-row items-stretch md:items-center md:space-x-3 space-y-3 md:space-y-0 justify-between mx-4 py-4 border-t dark:border-gray-700">
           <div class="w-full md:w-1/2">
-          <form class="flex items-center">
-            <label for="simple-search" class="sr-only">Search</label>
+          <div class="flex items-center">
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                 <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" />
                 </svg>
               </div>
-              <input type="text" id="simple-search" placeholder="Search for article" required="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
+              <input type="text"
+                     id="search"
+                     name="search"
+                     hx-post="/htmx/admin/search/articles/"
+                     hx-trigger="input changed delay:500ms, search"
+                     hx-target="#articles"
+                     hx-swap="outerHTML"
+                     placeholder="Search articles by title or content"
+                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
             </div>
-          </form>
+          </div>
           </div>
           <div class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0">
             <button type="button"
@@ -52,11 +59,7 @@
                 <th scope="col" class="p-4"></th>
               </tr>
             </thead>
-            <tbody id="articles">
-              {{#each articles as |article|}}
-                {{> article_row article=article }}
-              {{/each}}
-            </tbody>
+            {{> article_rows articles=articles }}
           </table>
         </div>
         <nav class="flex flex-col md:flex-row justify-between items-start md:items-center space-y-3 md:space-y-0 p-4" aria-label="Table navigation">
@@ -170,3 +173,6 @@
     </div>
   </div>
 </main>
+
+{{> search_articles_update_param_script }}
+

views/partials/article_rows.hbs

@@ -0,0 +1,5 @@
+<tbody id="articles">
+  {{#each articles as |article| }}
+    {{> article_row article=article }}
+  {{/each}}
+</tbody>