<template>
	<div
		class="filters-container"
		:class="{ 'compact-hide': !showFilters }"
		@click="toggleFilters(false)"
	>
		<form
			v-show="showFilters"
			class="filters"
			@submit.prevent
			@click.stop
		>
			<slot />
		</form>
	</div>
</template>

<script setup>
import { ref } from 'vue';

const showFilters = ref(true);

function toggleFilters(state) {
	showFilters.value = state ?? !showFilters.value;
}
</script>

<style scoped>
.filters-container {
	position: relative;
}

.filters {
	width: 17rem;
	flex-shrink: 0;
	padding: .5rem 0;
	background: var(--background);
	box-shadow: 0 0 3px var(--shadow-weak-30);

	&::-webkit-scrollbar {
		display: none;
	}
}

.filters-toggle {
	min-width: 1.5rem;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 .25rem;
	border-radius: 0 .25rem .25rem 0;
	background: var(--background);
	color: var(--shadow);
	font-weight: bold;
	box-shadow: inset 0 0 3px var(--shadow-weak-30);

	&.show {
		padding: 0 .5rem 0 1.25rem;

		.icon {
			margin-left: .5rem;
		}
	}

	.icon {
		fill: var(--shadow);
	}

	&:hover {
		cursor: pointer;

		.icon {
			fill: var(--primary);
		}
	}
}

@media (max-width: 1200px) {
	.filters-container {
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background: var(--background-dim);
	}

	.filters {
		height: 100%;
		overflow-y: auto;
	}

	.compact-hide {
		display: none;
	}
}
</style>
