<script>
	import {random_string} from "$shared/lib/helpers";

	let open = false;
	export let summary;
	const id = "details-" + random_string(4);

	function on_toggle(event) {
		open = event.target.open;
	}
</script>

<details class="details margin-bottom-sm"
         on:toggle={on_toggle}
         id={id}>
    <summary class="details__summary"
             aria-controls={id}
             aria-expanded={open}>
        <span class="flex items-center">
            <svg
                    class="icon icon--xxs margin-right-xxxs"
                    aria-hidden="true"
                    viewBox="0 0 12 12">
                <path
                        d="M2.783.088A.5.5,0,0,0,2,.5v11a.5.5,0,0,0,.268.442A.49.49,0,0,0,2.5,12a.5.5,0,0,0,.283-.088l8-5.5a.5.5,0,0,0,0-.824Z"/>
            </svg>
            <span>{summary}</span>
        </span>
    </summary>
    <div
            class="details__content text-component margin-top-xs"
            aria-hidden={!open}>
        <slot/>
    </div>
</details>
