<script lang="ts">
	import { getSelectionContext } from '$lib/Selection';
	import { accelerator } from '$lib/Shortcuts';
	import type { SvelteComponent } from 'svelte';
	import { openModal } from 'svelte-modals';

	const selection = getSelectionContext();

	export let dialog: typeof SvelteComponent<{
		isOpen: boolean;
		ids: number[];
	}>;

	function edit() {
		openModal(dialog, {
			ids: $selection.ids
		});
	}
</script>

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