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

package templates

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

templ interactiveButtonsSection() {
	<h3 class="mb-3">
		Interactive buttons
	</h3>
	<button
		type="button"
		class="btn btn-info 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-warning 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-danger 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 InteractiveSwapContent(pc PageContext, contentIndex int) {
	switch contentIndex {
		case 1:
			<p class="alert alert-info">
				Bacon ipsum dolor amet t-bone meatball corned beef hamburger cupim rump drumstick tri-tip doner pastrami kielbasa salami pig. Pork loin doner leberkas, jerky fatback chuck corned beef cow rump strip steak shoulder pork belly. Flank hamburger porchetta shank sirloin bresaola chislic pork chop. Chicken jerky strip steak tongue jowl brisket cupim. Shankle t-bone short ribs fatback burgdoggen buffalo cupim prosciutto meatball pig doner boudin.
			</p>
		case 2:
			<p class="alert alert-warning">
				Rump venison tenderloin, picanha ribeye cupim pork belly sirloin landjaeger jerky prosciutto filet mignon alcatra. Short ribs pork chop rump kevin t-bone ground round hamburger, chislic tenderloin bacon sirloin filet mignon turducken beef pork loin. Buffalo picanha ground round pork chop. Venison cupim pork belly, andouille pastrami tail shankle pancetta. Picanha leberkas cupim turkey buffalo filet mignon pork belly pork chop rump sausage pork loin. Short ribs burgdoggen porchetta hamburger, cupim ribeye capicola shoulder. Pork drumstick kevin, turkey hamburger ground round burgdoggen chuck jerky bacon sausage chislic leberkas.
			</p>
		case 3:
			<p class="alert alert-danger">
				Biltong ham hock tongue, beef pork andouille fatback flank pork loin ribeye. Rump short loin porchetta, ground round buffalo hamburger salami pig venison beef ribs. Chislic beef ribs sausage fatback pork belly. Ribeye porchetta leberkas, tail hamburger biltong landjaeger short loin filet mignon chicken salami flank.
			</p>
		default:
			<p>
				Some new content with unknown index...
			</p>
	}
}

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

templ RenderInteractiveForm(content ValidateFormContent) {
	<div class="row" id="validation-form-content">
		<div class="col">
			<div class="mb-3">
				<label for="validation-form-number" class="form-label">Enter number 0..100</label>
				<input
					type="text"
					class={ "form-control",
						templ.KV("is-invalid", content.HasNumValueError),
						templ.KV("is-valid", content.Validated && !content.HasNumValueError) }
					name="number-value"
					id="validation-form-number"
					value={ content.NumValue }
				/>
				if content.HasNumValueError {
					<div class="invalid-feedback">{ content.NumValueError }</div>
				}
			</div>
		</div>
		<div class="col">
			<div class="mb-3">
				<label for="validation-form-string" class="form-label">Enter string, length 5..10</label>
				<input
					type="text"
					class={ "form-control",
						templ.KV("is-invalid", content.HasStrValueError),
						templ.KV("is-valid", content.Validated && !content.HasStrValueError) }
					name="string-value"
					id="validation-form-string"
					value={ content.StrValue }
				/>
				if content.HasStrValueError {
					<div class="invalid-feedback">{ content.StrValueError }</div>
				}
			</div>
		</div>
	</div>
}

templ interactiveFormSection() {
	<h3 class="mb-3">
		Form validation
	</h3>
	<form
		hx-post="/interactive/validate-form"
		hx-target="#validation-form-content"
		hx-swap="outerHTML"
	>
		<div class="card p-4">
			@RenderInteractiveForm(ValidateFormContent{})
			<div class="d-flex">
				<button type="submit" class="btn btn-success ms-auto">
					Submit
				</button>
			</div>
		</div>
	</form>
}

templ Interactive(pc PageContext, catBreeds []types.CatBreed) {
	@baseLayout(pc) {
		<div class="row">
			<div class="col">
				@interactiveButtonsSection()
			</div>
			<div class="col">
				@interactiveFormSection()
			</div>
		</div>
		@catBreedsSection(catBreeds)
	}
}