go-htmx-templ/app/templates/interactive.templ

package templates

import (
	"templ-tests/app/types"
	"templ-tests/app/data"
	"slices"
	"sort"
)

templ interactiveButtons() {
	<h3 class="mb-3">
		Interactive buttons
	</h3>
	<button
		type="button"
		class="btn btn-primary mb-3"
		hx-get="/interactive/swap-content?content=1"
		hx-target="#swap-content-target"
	>
		Swap to content 1
	</button>
	<button
		type="button"
		class="btn btn-primary mb-3"
		hx-get="/interactive/swap-content?content=2"
		hx-target="#swap-content-target"
	>
		Swap to content 2
	</button>
	<button
		type="button"
		class="btn btn-primary mb-3"
		hx-get="/interactive/swap-content?content=3"
		hx-target="#swap-content-target"
	>
		Swap to content 3
	</button>
	<p id="swap-content-target">
		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.
	</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()
		@catBreedsSection(catBreeds)
	}
}

templ InteractiveSwapContent(pc PageContext, contentIndex int) {
	switch contentIndex {
		case 1:
			<p>
				Some new content 1...
			</p>
		case 2:
			<p>
				Some new content 2...
			</p>
		case 3:
			<p>
				Some new content 3...
			</p>
		default:
			<p>
				Some new content with unknown index...
			</p>
	}
}

templ RenderCatBreedsTable(catBreeds []types.CatBreed) {
	@catBreedsTable(catBreeds)
}