added search

YongeStreet/Views/Home/City.cshtml

@@ -12,7 +12,8 @@
 <div class="uk-height-large uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" 
      style=""
      id="leaflet-map"
-     data-city="@Model.City">
+     data-city="@Model.City"
+     data-date="@Model.Date.ToString("yyyy-MM-dd")">
 </div>
 
 <table class="uk-table uk-table-striped">
@@ -50,4 +51,6 @@
     </tbody>
 </table>
 
-<script src="~/js/quebec-province-map.js" type="module"></script>
+<script src="~/js/quebec-province-map.js" type="module"></script>
+
+

YongeStreet/Views/Home/CityList_Partial.cshtml

@@ -0,0 +1,16 @@
+@model YongeStreet.Controllers.IndexModel
+
+@{
+    Layout = "";
+}
+
+
+
+@foreach(var city in Model.Cities)
+{
+    <tr>
+        <td>@Html.ActionLink(city.Name, "City", "Home",  new {City=city.Name})</td>
+        <td>@((city.TotalStreetSize / 1000 ).ToString("N"))</td>
+        <td>@string.Join(", ", city.AvailableDates)</td>
+    </tr>
+}

YongeStreet/Views/Home/Index.cshtml

@@ -6,6 +6,22 @@
 }
 
 
+<p>
+    Le Québec possède un reseau routier impréssionant.
+</p>
+
+
+<div class="uk-form-horizontal uk-margin-large">
+    <div class="uk-margin">
+        <label class="uk-form-label" for="city-name">Nom de Ville</label>
+        <div class="uk-form-controls">
+            <input class="uk-input" id="city-name" type="text" name="search" placeholder="Rimouski" hx-get="/Home/CityList_Partial"
+                   hx-trigger="keyup changed delay:500ms"
+                   hx-target="#city-table-body"
+                   hx-swap="innerHTML">
+        </div>
+    </div>
+</div>
 
 <table class="uk-table uk-table-striped">
     <thead>
@@ -15,16 +31,10 @@
         <th></th>
     </tr>
     </thead>
-    <tbody>
-    @foreach(var city in Model.Cities)
-    {
-        <tr>
-            <td>@Html.ActionLink(city.Name, "City", "Home",  new {City=city.Name})</td>
-            <td>@((city.TotalStreetSize / 1000 ).ToString("N"))</td>
-            <td>@string.Join(", ", city.AvailableDates)</td>
-        </tr>
-    }
-    
-    
+    <tbody id="city-table-body"
+           hx-get="/Home/CityList_Partial"
+           hx-trigger="load"
+           hx-target="#city-table-body"
+           hx-swap="innerHTML">
     </tbody>
 </table>