path: root/frontend/src/lib/filter/components/FilterForm.svelte

<script lang="ts">
	import Expander from '$lib/components/Expander.svelte';
	import { getFilterContext } from '$lib/Filter';

	const filter = getFilterContext();
	export let type: 'grid' | 'row' = 'row';

	let exclude = false;

	$: if ($filter.exclude.size > 0) {
		exclude = true;
	}
</script>

<form on:submit|preventDefault class="gap-0">
	{#if type === 'grid'}
		<div class="flex flex-col gap-4 px-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
			<slot name="include" />
		</div>
		<div class="my-2 flex justify-start">
			<Expander title="Exclude" bind:expanded={exclude} />
		</div>
		{#if exclude}
			<div
				class="flex flex-col gap-4 bg-rose-950/50 p-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
			>
				<slot name="exclude" />
			</div>
		{/if}
	{:else}
		<div
			class="flex flex-wrap justify-center gap-2 [&>*]:basis-full xl:[&>*]:basis-1/3 2xl:[&>*]:basis-1/5"
		>
			<div class="p-2">
				<slot name="include" />
			</div>
			<div class="bg-rose-950/50 p-2">
				<slot name="exclude" />
			</div>
		</div>
	{/if}
	<div class=" mt-4 flex items-center">
		<hr class="flex-1 border-slate-700/70" />
		<button type="submit" class="btn-blue mx-2">Apply</button>
		<hr class="flex-1 border-slate-700/70" />
	</div>
</form>