{{define "body"}} <form hx-get="/recipes_search" hx-trigger="submit, input changed delay:500ms from:input, search, change from:input" hx-target="#recipes-mount" hx-indicator=".htmx-indicator" hx-swap="outerHTML" > <input type="search" name="s" placeholder="search" value="{{.SearchValue}}"> <input type="hidden" name="full-reset" value="true"> <span class="htmx-indicator">loading...</span> <details> <summary>Search options</summary> <div>Search in:</div> <input id="t-title" name="t" type="checkbox" value="1" {{if .SearchTypeTitle}}checked{{end}}> <label for="t-title">Title</label> <input id="t-ing" name="t" type="checkbox" value="2" {{if .SearchTypeIng}}checked{{end}}> <label for="t-ing">Ingredients</label> <input id="t-ins" name="t" type="checkbox" value="4" {{if .SearchTypeIns}}checked{{end}}> <label for="t-ins">Instructions</label> <input id="t-by" name="t" type="checkbox" value="8" {{if .SearchTypeBy}}checked{{end}}> <label for="t-by">By</label> <input id="t-src" name="t" type="checkbox" value="16" {{if .SearchTypeSrc}}checked{{end}}> <label for="t-src">Source</label> </details> </form> <ul id="recipes-mount"> {{range .Items}}<li>{{ .Title }}<a href="/recipes/{{.Id}}">More</a></li>{{else}}<div><strong>no rows</strong></div>{{end}} {{if .HasNextPage}} <li id="recipes-replace"> <button class="action" hx-get="/recipes_search?{{.NextQuery}}" hx-target="#recipes-replace" hx-swap="outerHTML" >load more</button> </li> {{end}} </ul> {{end}}