path: root/frontend/src/lib/scraper/components/SelectorGroup.svelte

<script lang="ts">
	import { Selector } from '../Scraper.svelte';
	import SelectorButton from './SelectorButton.svelte';

	interface Props {
		title: string;
		selectors: Selector<string>[];
	}

	let { title, selectors = $bindable() }: Props = $props();

	function invert() {
		for (let selector of selectors) {
			selector.keep = !selector.keep;
		}
		selectors = selectors;
	}
</script>

{#if selectors.length > 0}
	<div class="group col-span-6 flex flex-col gap-1">
		<div class="flex gap-2">
			<h2>{title}</h2>
			<button
				type="button"
				class="flex items-end opacity-75 brightness-75 transition-opacity hover:opacity-100 hover:brightness-110 focus-visible:opacity-100"
				onclick={invert}
				title="Invert selection"
				aria-label="Invert selection"
			>
				<span class="icon-xs icon-[material-symbols--compare-arrows]"></span>
			</button>
		</div>
		<div class="flex flex-wrap gap-y-1">
			{#each selectors as selector}
				<SelectorButton {selector} />
			{/each}
		</div>
	</div>
{/if}