package templates

templ FilterItem(id string, name string) {
	<div
		class="flex items-center justify-between gap-2 p-2 rounded-lg hover:bg-surface-hover"
		data-filter-id={ id }
	>
		<button
			data-action="load-filter"
			@click="loadFilter($event)"
			class="flex-1 text-left px-2 py-1 text-sm rounded-lg hover:bg-surface-hover"
			style="color: var(--text-primary);"
		>
			{ name }
		</button>
		<button
			data-action="delete-filter"
			@click="deleteFilter($event)"
			class="icon-btn shrink-0"
			style="color: var(--text-secondary);"
			title="Delete filter"
			aria-label="Delete filter"
		>
			@Icon("trash", "h-4 w-4")
		</button>
	</div>
}