feat: Add location search

templates/static/index.html

@@ -35,8 +35,47 @@
         </div>
     </template>
 
-    <input type='text'
-           x-model='locationId'>
+    <div class='location-search'>
+        <input type='search'
+               class='location-search__input'
+               placeholder='Search location...'
+               x-model='searchQuery'
+               @input='onSearchInput'
+               @focus='searchOpen = searchResults.length > 0'
+               @click.outside='searchOpen = false'>
+
+        <template x-if='searchOpen'>
+            <div class='location-search__dropdown'>
+                <template x-if='searchLoading'>
+                    <div class='location-search__state'>Searching...</div>
+                </template>
+
+                <template x-if='!searchLoading && searchError'>
+                    <div class='location-search__state'
+                         x-text='searchError'></div>
+                </template>
+
+                <template x-if='!searchLoading && !searchError && searchResults.length === 0'>
+                    <div class='location-search__state'>No results</div>
+                </template>
+
+                <template x-if='!searchLoading && !searchError && searchResults.length > 0'>
+                    <ul class='location-search__results'>
+                        <template x-for='location in searchResults'
+                                  :key='location.id'>
+                            <li>
+                                <button type='button'
+                                        class='location-search__item'
+                                        @click='selectLocation(location)'>
+                                    <span x-text='formatLocationLabel(location)'></span>
+                                </button>
+                            </li>
+                        </template>
+                    </ul>
+                </template>
+            </div>
+        </template>
+    </div>
 
     <template x-if='todayTimes'>
         <div class='current-salath text--center'>
@@ -95,4 +134,4 @@
     </div>
 </div>
 </body>
-</html>
+</html>