<script lang="ts">
	export let bereich: string;
	let label: HTMLDivElement;
	let open: boolean = true;

	function toggleBereich(event: MouseEvent) {
		var collapse = label.nextElementSibling as HTMLDivElement;

		if (open) {
			//y.classList.remove('hidden');
			collapse.style.maxHeight = "0px";
			collapse.style.overflow = "hidden";
		} else {
			//y.classList.add('hidden');
			collapse.style.maxHeight = "1800px";
			collapse.style.overflow = "visible";
		}

		open = !open;
	}
</script>

<div class="bereichs-label" bind:this={label}>
	<div>
		<div
			class="grid grid-cols-[max-content_1fr_max-content] items-center justify-items-start gap-2"
		>
			<div class="formular-abschnitt1">{bereich}</div>
			<div class="formular-abschnitt2"><slot></slot></div>

			<div
				class="justify-self-center self-center mr-[2px] cursor-pointer text-[2rem] ring-1 ring-secondary px-2 rounded-sm select-none"
				on:click={toggleBereich}
			>
				{#if open}
					-
				{:else}
					+
				{/if}

			</div>
		</div>
	</div>
</div>