<script lang="ts">
	import { getSelectionContext } from '$lib/selection/Selection.svelte';
	import { accelerator } from '$lib/Shortcuts';
	import { toastFinally } from '$lib/Toasts';
	import { modals, type ModalComponent, type ModalProps } from 'svelte-modals';

	const selection = getSelectionContext();

	interface DialogProps extends ModalProps {
		ids: number[];
	}

	let { dialog }: { dialog: ModalComponent<DialogProps> } = $props();

	function edit() {
		modals.open(dialog, { ids: selection.ids }).catch(toastFinally);
	}
</script>

<button
	type="button"
	class="btn-slate hover:bg-blue-700"
	title="Edit selection"
	aria-label="Edit selection"
	onclick={edit}
	use:accelerator={'e'}
>
	<span class="icon-base icon-[material-symbols--edit]"></span>
</button>