{{/* anchor props */}}
{{/* required: .AnchorTag, .AnchorID, .AnchorClickedEventName, .AnchorContent */}}
{{/* optional: .AnchorClass, .AnchorStyle */}}
{{/* popover props */}}
{{/* required: .PopoverID, PopoverContentIDPrefix, .PopoverContents: [](string|HTML) */}}
{{/* optional: .PopoverStyle */}}

{{- $dot := . }}
{{- $anchorTag := or .AnchorTag "div" }}
{{printf "<%s" $anchorTag | rawHTML}}
	{{if .AnchorID}}id="{{.AnchorID}}"{{end}}
	{{if .AnchorClass}}class="{{.AnchorClass}}"{{end}}
	style="anchor-name: --{{.AnchorID}}; {{.AnchorStyle}}"
	_="
		on click
			set popover to the #{{.PopoverID}}
			send {{.AnchorClickedEventName}} to #{{.PopoverID}}
	"
{{ rawHTML ">" }}
	{{ .AnchorContent }}
{{printf "</%s>" $anchorTag | rawHTML}}
<div
	popover="manual"
	id={{.PopoverID}}
	class="
		max-w-[80vw]
		p-[1em]
		mt-[1.5em]

		bg-card
		animate-pulse
		border-[1px] border-sidebar-border rounded-lg
		cursor-default

		open:grid

		{{.AnchorClass}}
	"
	{{/* TODO: move this style into the class, if possible */}}
	style="
		position: fixed;
		position-anchor: --{{.AnchorID}};
		position-area: bottom;

		grid-template-columns: 1fr max-content;
		grid-template-rows: max-content;
		gap: 1em;

		box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);

		{{.PopoverStyle}}
	"
	hx-preserve
	_="
		init
			call me.showPopover()
			set :anchorClicks to 0

		on click
			event.preventDefault()

		on {{.AnchorClickedEventName}}
			set :anchorClicks to :anchorClicks + 1
		{{- range $i, $content := .PopoverContents }}
			{{- $numClicks := addInt $i 1 }}
			{{- $idToHide := printf "%s-%d" $dot.PopoverContentIDPrefix $i }}
			{{- $idToShow := printf "%s-%d" $dot.PopoverContentIDPrefix (addInt $i 1) }}
			{{- $maxIndex := subInt (len $dot.PopoverContents) 1 }}

			{{- if lt $i $maxIndex }}
			if :anchorClicks is {{$numClicks}} then
				hide #{{$idToHide}}
				show #{{$idToShow}}
			else
			{{- else if eq $i $maxIndex }}
			if :anchorClicks is {{$numClicks}} then
				call me.hidePopover()
			end
			{{- end }}
		{{- end }}
	"
>
{{- range $i, $content := .PopoverContents }}
	<span id="{{$dot.PopoverContentIDPrefix}}-{{$i}}" style="grid-column: 1; {{if gt $i 0}}display: none;{{end}}">
		{{$content}}
	</span>
{{- end }}
	<button
		class="cursor-pointer"
		style="
			grid-column: 2;
			font-size: 2em;
			line-height: 0.5em;
		"
		_="
			on click
				set parent to the closest #{{.PopoverID}}
				call parent.hidePopover()
		"
	>
		&#x00d7;
	</button>
</div>