<script lang="ts">
	import { categories, censorships, languages, ratings } from '$lib/Enums';
	import { ComicFilterControls } from '$lib/Filter';
	import type { ListItem } from '$lib/Utils';
	import { setContext } from 'svelte';
	import Filter from './Filter.svelte';

	export let tags: ListItem[] | undefined;
	export let artists: ListItem[] | undefined;
	export let circles: ListItem[] | undefined;
	export let characters: ListItem[] | undefined;
	export let worlds: ListItem[] | undefined;
	export let controls: ComicFilterControls;
	export let type: 'include' | 'exclude';

	setContext('filter-type', type);
</script>

<Filter title="Tags" options={tags} bind:filter={controls.tags} --grid-column="span 2" />
<Filter title="Artists" options={artists} bind:filter={controls.artists} />
<Filter title="Circles" options={circles} bind:filter={controls.circles} />
<Filter title="Characters" options={characters} bind:filter={controls.characters} />
<Filter title="Worlds" options={worlds} bind:filter={controls.worlds} />
<Filter title="Categories" options={categories} bind:filter={controls.categories} />
<Filter title="Ratings" options={ratings} bind:filter={controls.ratings} />
<Filter title="Censorship" options={censorships} bind:filter={controls.censorships} />
<Filter title="Languages" options={languages} bind:filter={controls.languages} />
