Functional demo

app/templates/interactive.templ

@@ -2,36 +2,11 @@ package templates
 
 import (
 	"templ-tests/app/types"
+	"templ-tests/app/data"
+	"slices"
+	"sort"
 )
 
-templ catBreedsTable(catBreeds []types.CatBreed) {
-	<h3 class="mb-3">
-		Cat breeds
-	</h3>
-	<table class="table">
-		<thead>
-			<tr>
-				<th>Breed</th>
-				<th>Country</th>
-				<th>Origin</th>
-				<th>Coat</th>
-				<th>Pattern</th>
-			</tr>
-		</thead>
-		<tbody>
-			for _, breed := range catBreeds {
-				<tr>
-					<td>{ breed.Breed }</td>
-					<td>{ breed.Country }</td>
-					<td>{ breed.Origin }</td>
-					<td>{ breed.Coat }</td>
-					<td>{ breed.Pattern }</td>
-				</tr>
-			}
-		</tbody>
-	</table>
-}
-
 templ interactiveButtons() {
 	<h3 class="mb-3">
 		Interactive buttons
@@ -65,11 +40,100 @@ templ interactiveButtons() {
 	</p>
 }
 
+func getCatCountriesOptions() []string {
+	var res []string = []string{}
+
+	for _, cb := range data.CatBreeds {
+		if len(cb.Country) > 0 && !slices.Contains(res, cb.Country) {
+			res = append(res, cb.Country)
+		}
+	}
+
+	sort.Strings(res)
+
+	return res
+}
+
+templ catBreedsSection(catBreeds []types.CatBreed) {
+	<h3 class="mt-5 mb-3">
+		Cat breeds
+	</h3>
+	<div class="card mb-2">
+		<div class="card-body">
+			<form
+				class="row g-3 align-items-center"
+			>
+				<div class="col-auto">
+					<label class="form-label">Breed:</label>
+				</div>
+				<div class="col-auto">
+					<input
+						type="text"
+						name="breed"
+						class="form-control"
+						hx-get="/interactive/filter-cat-breeds"
+						hx-target="#cat-breeds-table"
+						hx-trigger="keyup"
+						hx-include="select[name='country']"
+					/>
+				</div>
+				<div class="col-auto">
+					<label class="form-label">Country:</label>
+				</div>
+				<div class="col-auto">
+					<select
+						name="country"
+						class="form-select"
+						hx-get="/interactive/filter-cat-breeds"
+						hx-target="#cat-breeds-table"
+						hx-trigger="change"
+						hx-include="input[name='breed']"
+					>
+						<option value="">
+							- All -
+						</option>
+						for _, opt := range getCatCountriesOptions() {
+							<option value={ opt }>
+								{ opt }
+							</option>
+						}
+					</select>
+				</div>
+			</form>
+		</div>
+	</div>
+	@catBreedsTable(catBreeds)
+}
+
+templ catBreedsTable(catBreeds []types.CatBreed) {
+	<table class="table" id="cat-breeds-table">
+		<thead>
+			<tr>
+				<th>Breed</th>
+				<th>Country</th>
+				<th>Origin</th>
+				<th>Coat</th>
+				<th>Pattern</th>
+			</tr>
+		</thead>
+		<tbody>
+			for _, breed := range catBreeds {
+				<tr>
+					<td>{ breed.Breed }</td>
+					<td>{ breed.Country }</td>
+					<td>{ breed.Origin }</td>
+					<td>{ breed.Coat }</td>
+					<td>{ breed.Pattern }</td>
+				</tr>
+			}
+		</tbody>
+	</table>
+}
+
 templ Interactive(pc PageContext, catBreeds []types.CatBreed) {
 	@baseLayout(pc) {
 		@interactiveButtons()
-		<hr/>
-		@catBreedsTable(catBreeds)
+		@catBreedsSection(catBreeds)
 	}
 }
 
@@ -93,3 +157,7 @@ templ InteractiveSwapContent(pc PageContext, contentIndex int) {
 			</p>
 	}
 }
+
+templ RenderCatBreedsTable(catBreeds []types.CatBreed) {
+	@catBreedsTable(catBreeds)
+}