Functional demo

app/data/catbreeds.go

@@ -62,7 +62,7 @@ var CatBreeds []types.CatBreed = []types.CatBreed{
 	},
 	{
 		Breed:   "Asian",
-		Country: "developed in the United Kingdom (founding stock from Asia)",
+		Country: "United Kingdom",
 		Origin:  "",
 		Coat:    "Short",
 		Pattern: "Evenly solid",
@@ -76,7 +76,7 @@ var CatBreeds []types.CatBreed = []types.CatBreed{
 	},
 	{
 		Breed:   "Balinese",
-		Country: "developed in the United States (founding stock from Thailand)",
+		Country: "United States",
 		Origin:  "Crossbreed",
 		Coat:    "Long",
 		Pattern: "Colorpoint",
@@ -90,21 +90,21 @@ var CatBreeds []types.CatBreed = []types.CatBreed{
 	},
 	{
 		Breed:   "Bengal",
-		Country: "developed in the United States (founding stock from Asia)",
+		Country: "United States",
 		Origin:  "Hybrid",
 		Coat:    "Short",
 		Pattern: "Spotted/Marbled",
 	},
 	{
 		Breed:   "Birman",
-		Country: "developed in France (founding stock from Burma)",
+		Country: "France",
 		Origin:  "Natural",
 		Coat:    "Semi Long",
 		Pattern: "Colorpoint",
 	},
 	{
 		Breed:   "Bombay",
-		Country: "developed in the United States (founding stock from Asia)",
+		Country: "United States",
 		Origin:  "Crossbred",
 		Coat:    "Short",
 		Pattern: "Solid",
@@ -186,13 +186,6 @@ var CatBreeds []types.CatBreed = []types.CatBreed{
 		Coat:    "Short",
 		Pattern: "Spotted",
 	},
-	{
-		Breed:   "Colorpoint Shorthair",
-		Country: "",
-		Origin:  "",
-		Coat:    "Short",
-		Pattern: "",
-	},
 	{
 		Breed:   "Cornish Rex",
 		Country: "United Kingdom (England)",
@@ -669,13 +662,6 @@ var CatBreeds []types.CatBreed = []types.CatBreed{
 		Coat:    "Semi-long",
 		Pattern: "All but colorpoint",
 	},
-	{
-		Breed:   "Turkish Van",
-		Country: "developed in the United Kingdom (founding stock from Turkey)",
-		Origin:  "Natural",
-		Coat:    "Semi-long",
-		Pattern: "Van",
-	},
 	{
 		Breed:   "Ukrainian Levkoy",
 		Country: "Ukraine",

app/handlers/interactive.go

@@ -2,8 +2,10 @@ package handlers
 
 import (
 	"strconv"
+	"strings"
 	"templ-tests/app/data"
 	"templ-tests/app/templates"
+	"templ-tests/app/types"
 
 	"github.com/gin-gonic/gin"
 )
@@ -25,3 +27,26 @@ func InteractiveSwapContent(c *gin.Context) {
 	}
 	templates.InteractiveSwapContent(pcInteractive, contentIndex).Render(c, c.Writer)
 }
+
+func FilterCatBreeds(c *gin.Context) {
+	breedQuery := strings.ToLower(c.Query("breed"))
+	countryQuery := c.Query("country")
+
+	var catBreeds []types.CatBreed = []types.CatBreed{}
+
+	for _, cb := range data.CatBreeds {
+		appendToList :=
+			(len(breedQuery) > 0 &&
+				strings.Contains(strings.ToLower(cb.Breed), breedQuery) ||
+				len(breedQuery) == 0) &&
+				((len(countryQuery) > 0 &&
+					cb.Country == countryQuery) ||
+					len(countryQuery) == 0)
+
+		if appendToList {
+			catBreeds = append(catBreeds, cb)
+		}
+	}
+
+	templates.RenderCatBreedsTable(catBreeds).Render(c, c.Writer)
+}

app/router/router.go

@@ -26,6 +26,7 @@ func initRouter() *gin.Engine {
 	{
 		interactiveRouter.GET("", handlers.Interactive)
 		interactiveRouter.GET("/swap-content", handlers.InteractiveSwapContent)
+		interactiveRouter.GET("/filter-cat-breeds", handlers.FilterCatBreeds)
 	}
 
 	router.Use(static.Serve("/static", static.LocalFile(STATIC_PATH, false)))

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/>
+		@catBreedsSection(catBreeds)
-		@catBreedsTable(catBreeds)
 	}
 }
 
@@ -93,3 +157,7 @@ templ InteractiveSwapContent(pc PageContext, contentIndex int) {
 			</p>
 	}
 }
+
+templ RenderCatBreedsTable(catBreeds []types.CatBreed) {
+	@catBreedsTable(catBreeds)
+}

app/templates/interactive_templ.go

@@ -11,10 +11,13 @@ import "io"
 import "bytes"
 
 import (
+	"slices"
+	"sort"
+	"templ-tests/app/data"
 	"templ-tests/app/types"
 )
 
-func catBreedsTable(catBreeds []types.CatBreed) templ.Component {
+func interactiveButtons() templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -31,53 +34,222 @@ func catBreedsTable(catBreeds []types.CatBreed) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Var2 := `Cat breeds`
+		templ_7745c5c3_Var2 := `Interactive buttons`
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3><table class=\"table\"><thead><tr><th>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3><button type=\"button\" class=\"btn btn-primary mb-3\" hx-get=\"/interactive/swap-content?content=1\" hx-target=\"#swap-content-target\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Var3 := `Breed`
+		templ_7745c5c3_Var3 := `Swap to content 1`
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</th><th>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button> <button type=\"button\" class=\"btn btn-primary mb-3\" hx-get=\"/interactive/swap-content?content=2\" hx-target=\"#swap-content-target\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Var4 := `Country`
+		templ_7745c5c3_Var4 := `Swap to content 2`
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var4)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</th><th>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button> <button type=\"button\" class=\"btn btn-primary mb-3\" hx-get=\"/interactive/swap-content?content=3\" hx-target=\"#swap-content-target\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Var5 := `Origin`
+		templ_7745c5c3_Var5 := `Swap to content 3`
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var5)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</th><th>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button><p id=\"swap-content-target\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Var6 := `Coat`
+		templ_7745c5c3_Var6 := `Bacon ipsum dolor amet cow capicola pancetta picanha biltong brisket filet mignon turducken beef ribs burgdoggen landjaeger meatball venison shank. Capicola ham pork chop, biltong kielbasa pancetta short loin jowl cupim pig jerky drumstick turducken burgdoggen beef. Spare ribs flank ribeye cow doner, shank chuck bacon ham hock porchetta kielbasa tri-tip. Ham t-bone chislic, capicola andouille ham hock frankfurter tri-tip sausage kevin landjaeger shank ribeye. Swine tri-tip spare ribs, rump flank bresaola kevin tail. Meatball tail picanha cow, frankfurter ribeye sirloin pork belly short loin pig. Filet mignon spare ribs pastrami, tri-tip ball tip tongue fatback pork chop.`
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var6)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+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
+}
+
+func catBreedsSection(catBreeds []types.CatBreed) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var7 == nil {
+			templ_7745c5c3_Var7 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h3 class=\"mt-5 mb-3\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Var8 := `Cat breeds`
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</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\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Var9 := `Breed:`
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var9)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</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=&#39;country&#39;]\"></div><div class=\"col-auto\"><label class=\"form-label\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Var10 := `Country:`
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var10)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</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=&#39;breed&#39;]\"><option value=\"\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Var11 := `- All -`
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var11)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</option> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, opt := range getCatCountriesOptions() {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<option value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(opt))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var12 string
+			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(opt)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 96, Col: 13}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</option>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></div></form></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = catBreedsTable(catBreeds).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func catBreedsTable(catBreeds []types.CatBreed) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var13 == nil {
+			templ_7745c5c3_Var13 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<table class=\"table\" id=\"cat-breeds-table\"><thead><tr><th>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Var14 := `Breed`
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var14)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</th><th>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Var7 := `Pattern`
+		templ_7745c5c3_Var15 := `Country`
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var7)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var15)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</th><th>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Var16 := `Origin`
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var16)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</th><th>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Var17 := `Coat`
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var17)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</th><th>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Var18 := `Pattern`
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var18)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -90,12 +262,12 @@ func catBreedsTable(catBreeds []types.CatBreed) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var8 string
+			var templ_7745c5c3_Var19 string
-			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(breed.Breed)
+			templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(breed.Breed)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 23, Col: 22}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 121, Col: 22}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -103,12 +275,12 @@ func catBreedsTable(catBreeds []types.CatBreed) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var9 string
+			var templ_7745c5c3_Var20 string
-			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(breed.Country)
+			templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(breed.Country)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 24, Col: 24}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 122, Col: 24}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -116,12 +288,12 @@ func catBreedsTable(catBreeds []types.CatBreed) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var10 string
+			var templ_7745c5c3_Var21 string
-			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(breed.Origin)
+			templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(breed.Origin)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 25, Col: 23}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 123, Col: 23}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -129,12 +301,12 @@ func catBreedsTable(catBreeds []types.CatBreed) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var11 string
+			var templ_7745c5c3_Var22 string
-			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(breed.Coat)
+			templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(breed.Coat)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 26, Col: 21}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 124, Col: 21}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -142,12 +314,12 @@ func catBreedsTable(catBreeds []types.CatBreed) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var12 string
+			var templ_7745c5c3_Var23 string
-			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(breed.Pattern)
+			templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(breed.Pattern)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 27, Col: 24}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/templates/interactive.templ`, Line: 125, Col: 24}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -167,75 +339,6 @@ func catBreedsTable(catBreeds []types.CatBreed) templ.Component {
 	})
 }
 
-func interactiveButtons() templ.Component {
-	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
-		if !templ_7745c5c3_IsBuffer {
-			templ_7745c5c3_Buffer = templ.GetBuffer()
-			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var13 == nil {
-			templ_7745c5c3_Var13 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h3 class=\"mb-3\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var14 := `Interactive buttons`
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var14)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3><button type=\"button\" class=\"btn btn-primary mb-3\" hx-get=\"/interactive/swap-content?content=1\" hx-target=\"#swap-content-target\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var15 := `Swap to content 1`
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var15)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button> <button type=\"button\" class=\"btn btn-primary mb-3\" hx-get=\"/interactive/swap-content?content=2\" hx-target=\"#swap-content-target\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var16 := `Swap to content 2`
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var16)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button> <button type=\"button\" class=\"btn btn-primary mb-3\" hx-get=\"/interactive/swap-content?content=3\" hx-target=\"#swap-content-target\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var17 := `Swap to content 3`
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var17)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button><p id=\"swap-content-target\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Var18 := `Bacon ipsum dolor amet cow capicola pancetta picanha biltong brisket filet mignon turducken beef ribs burgdoggen landjaeger meatball venison shank. Capicola ham pork chop, biltong kielbasa pancetta short loin jowl cupim pig jerky drumstick turducken burgdoggen beef. Spare ribs flank ribeye cow doner, shank chuck bacon ham hock porchetta kielbasa tri-tip. Ham t-bone chislic, capicola andouille ham hock frankfurter tri-tip sausage kevin landjaeger shank ribeye. Swine tri-tip spare ribs, rump flank bresaola kevin tail. Meatball tail picanha cow, frankfurter ribeye sirloin pork belly short loin pig. Filet mignon spare ribs pastrami, tri-tip ball tip tongue fatback pork chop.`
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var18)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		if !templ_7745c5c3_IsBuffer {
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
 func Interactive(pc PageContext, catBreeds []types.CatBreed) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
@@ -244,12 +347,12 @@ func Interactive(pc PageContext, catBreeds []types.CatBreed) templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var19 := templ.GetChildren(ctx)
+		templ_7745c5c3_Var24 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var19 == nil {
+		if templ_7745c5c3_Var24 == nil {
-			templ_7745c5c3_Var19 = templ.NopComponent
+			templ_7745c5c3_Var24 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var20 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Var25 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 			if !templ_7745c5c3_IsBuffer {
 				templ_7745c5c3_Buffer = templ.GetBuffer()
@@ -259,11 +362,11 @@ func Interactive(pc PageContext, catBreeds []types.CatBreed) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <hr>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = catBreedsTable(catBreeds).Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = catBreedsSection(catBreeds).Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -272,7 +375,7 @@ func Interactive(pc PageContext, catBreeds []types.CatBreed) templ.Component {
 			}
 			return templ_7745c5c3_Err
 		})
-		templ_7745c5c3_Err = baseLayout(pc).Render(templ.WithChildren(ctx, templ_7745c5c3_Var20), templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = baseLayout(pc).Render(templ.WithChildren(ctx, templ_7745c5c3_Var25), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -291,9 +394,9 @@ func InteractiveSwapContent(pc PageContext, contentIndex int) templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var21 := templ.GetChildren(ctx)
+		templ_7745c5c3_Var26 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var21 == nil {
+		if templ_7745c5c3_Var26 == nil {
-			templ_7745c5c3_Var21 = templ.NopComponent
+			templ_7745c5c3_Var26 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		switch contentIndex {
@@ -302,8 +405,8 @@ func InteractiveSwapContent(pc PageContext, contentIndex int) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Var22 := `Some new content 1...`
+			templ_7745c5c3_Var27 := `Some new content 1...`
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var22)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var27)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -316,8 +419,8 @@ func InteractiveSwapContent(pc PageContext, contentIndex int) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Var23 := `Some new content 2...`
+			templ_7745c5c3_Var28 := `Some new content 2...`
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var23)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var28)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -330,8 +433,8 @@ func InteractiveSwapContent(pc PageContext, contentIndex int) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Var24 := `Some new content 3...`
+			templ_7745c5c3_Var29 := `Some new content 3...`
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var24)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var29)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -344,8 +447,8 @@ func InteractiveSwapContent(pc PageContext, contentIndex int) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Var25 := `Some new content with unknown index...`
+			templ_7745c5c3_Var30 := `Some new content with unknown index...`
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var25)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var30)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -360,3 +463,27 @@ func InteractiveSwapContent(pc PageContext, contentIndex int) templ.Component {
 		return templ_7745c5c3_Err
 	})
 }
+
+func RenderCatBreedsTable(catBreeds []types.CatBreed) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var31 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var31 == nil {
+			templ_7745c5c3_Var31 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = catBreedsTable(catBreeds).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}