{{/* Templates: */}}
{{/* details-header */}}
{{/* details-body */}}

{{/* Props: */}}
{{/*
	Open: bool
	Name: <details/> name attribute
	GroupName: for doing 'open' css state styles
	Smooth: bool, for 'smooth' opening animation, true by default

	Class, Style,
	SummaryClass, SummaryStyle
*/}}
{{/* TODO: find a way to not have to hardcode the tailwind classes for the group-open styles */}}
{{/* TODO: rename this component to 'accordion' */}}


{{- $groupSuffix := "" }}
{{- if .GroupName }}
	{{- $groupSuffix = printf "/%s" .GroupName }}
{{- end }}
{{- $smooth := ne .Smooth false }}


<details
	{{if .Name}}name="{{.Name}}"{{end}}
	class="
		group{{$groupSuffix}}

		flex
		flex-col
		items-stretch

		rounded-lg
		open:bg-card

		details-content:flex
		details-content:flex-col
		details-content:items-center
		details-content:px-[1em]

		open:details-content:p-[1em]

	{{if $smooth}}
		details-content:opacity-[0]
	{{end}}
		open:details-content:opacity-[1]

	{{if $smooth}}
		details-content:transform-[translate(0px,-2em)]
	{{end}}
		open:details-content:transform-[translate(0px,0px)]

	{{if $smooth}}
		details-content:transition-[opacity_transform]
	{{end}}

		{{.Class}}
	"
	style="{{.Style}}"
	{{if .Open}}open{{end}}
	hx-preserve
>
{{/*	TODO: old border style - delete when sure
		details-content:border-transparent
		open:details-content:border-dotted
		open:details-content:border-x-[0px]
		open:details-content:border-x-transparent
		open:details-content:border-b-[0px]
		open:details-content:border-b-transparent
		open:details-content:border-t-background
		open:details-content:border-t-[0.25rem]
		details-content:outline-transparent
		*/}}

	<summary
		class="
			flex
			items-center
			justify-center
			gap-[1em]

			w-full
			p-[1em]
			bg-accent
			rounded-lg

			list-none
			cursor-pointer

			after:content-['+']
			after:absolute
			after:right-[0.5em]
			after:font-bold
			after:text-[2em]
			after:leading-[1em]
			group-open{{$groupSuffix}}:after:content-['-']

			{{.SummaryClass}}
		"
		style="contain: layout; {{.SummaryStyle}}"
	>
		{{ slot "accordion-header" }}
	</summary>

	{{ slot "accordion-body" }}
</details>