{{- $entry := index . "entry" -}}
{{- $contentID := index . "content_id" -}}
{{- $position := index . "position" -}}
{{- $label := index . "label" -}}

<div class="relative group h-6 -my-2.5" data-role="content-gap">
	<div class="pointer-events-none absolute left-0 right-0 top-1/2 h-0.5 -translate-y-1/2 bg-slate-300 opacity-0 transition-opacity duration-150 group-hover:opacity-100"></div>
	<button
		type="button"
		class="absolute left-1/2 top-1/2 z-[10000] -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-150 rounded-full border border-slate-300 bg-stone-100 text-slate-700 px-3 py-2 text-base shadow-sm"
		data-role="content-insert"
		data-position="{{ $position }}"
		data-content-id="{{ $contentID }}"
		aria-label="Beitrag einfügen"
		hx-post="/almanach/{{ $entry.MusenalmID }}/contents/insert"
		hx-target="closest [data-role='content-gap']"
		hx-swap="beforebegin"
		hx-include="[data-role='csrf-token']"
		hx-vals='{{ printf "{\"position\":%q,\"content_id\":%q}" $position $contentID }}'>
		<i class="ri-add-line"></i>
		{{- if $label -}}
			<span>Neuer Beitrag</span>
		{{- end -}}
	</button>
	<div class="h-1"></div>
</div>