✨ sample layout for advanced search

ref #12

src/components/Users.svelte

@@ -7,7 +7,7 @@
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    Users
+    {$_('users')}
     <button
       on:click={() => {
         modal_open = true;

src/components/UsersOverview.svelte

@@ -8,6 +8,7 @@
   import UsersEmptyState from "./UsersEmptyState.svelte";
   $: searchvalue = "";
   $: userscache = [];
+  $: advanced_search = false;
   usersstore.subscribe((val) => {
     userscache = val;
   });
@@ -27,6 +28,9 @@
 {:then users}
   {#if userscache.length === 0}
     <UsersEmptyState />
+  {:else}
+    {#if advanced_search}
+      advanced search
     {:else}
       <input
         type="search"
@@ -34,6 +38,17 @@
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
         class="gridjs-input gridjs-search-input mb-4" />
+    {/if}
+    <button
+      on:click={() => {
+        advanced_search = !advanced_search;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">
+      {#if advanced_search}
+        toggle simple search
+      {:else}toggle advanced search{/if}
+    </button>
     <div
       class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
       <table class="divide-y divide-gray-200 w-full">
@@ -61,7 +76,10 @@
         </thead>
         <tbody class="divide-y divide-gray-200">
           {#each users as u}
-            {#if Object.values(u).toString().toLowerCase().includes(searchvalue)}
+            {#if Object.values(u)
+              .toString()
+              .toLowerCase()
+              .includes(searchvalue)}
               <tr>
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="flex items-center">