<script lang="ts">
	import Select from '$lib/components/Input/Select.svelte';
	import Input from '$lib/components/Input/Input.svelte';

	export let reportFilter = {
		reporter: null,
		reported: null,
		status: null,
		draft: false
	};
</script>

<form class="flex flex-row justify-center space-x-4 mx-4 my-2">
	<Input size="sm" placeholder="Alle" bind:value={reportFilter.reporter}>
		<span slot="label">Report Ersteller</span>
	</Input>
	<Input size="sm" placeholder="Alle" bind:value={reportFilter.reported}>
		<span slot="label">Reportete Spieler</span>
	</Input>
	<Select label="Bearbeitungsstatus" size="sm" bind:value={reportFilter.status}>
		<option value="none">Unbearbeitet</option>
		<option value="review">In Bearbeitung</option>
		<option value={null}>Unbearbeitet & In Bearbeitung</option>
		<option value="reviewed">Bearbeitet</option>
	</Select>
	<Select label="Reportstatus" size="sm" bind:value={reportFilter.draft}>
		<option value={false}>Erstellt</option>
		<option value={true}>Entwurf</option>
		<option value={null}>Erstellt & Entwurf</option>
	</Select>
</form>