<!--
	Thin sub-header bar that sits below the AnimatedMule. Matches the legacy
	mule-image FilterBar height (h-9) and toggle layout: left-sidebar toggle
	pinned to the far-left edge, right-sidebar toggle pinned to the far-right.
	Page-specific content (section badge, search, etc.) goes in the middle,
	and page-specific buttons (dark-mode, sign-out, route counts…) live in
	the trailing slot.

	The bar is sticky-top so it stays visible as the timeline scrolls past
	the animated header above.
-->
<script lang="ts">
	import {
		PanelLeftOpen,
		PanelLeftClose,
		PanelRightOpen,
		PanelRightClose
	} from 'lucide-svelte';
	import {
		toggleLeftSidebar,
		toggleRightSidebar,
		view
	} from '$lib/stores/view.svelte';

	interface Props {
		/** Render the right-sidebar toggle. Routes without a right panel
		 *  (map, ratings, colors, tags) leave this off. */
		showRightToggle?: boolean;
		children?: import('svelte').Snippet;
		trailing?: import('svelte').Snippet;
	}
	let { showRightToggle = false, children, trailing }: Props = $props();
</script>

<div
	class="flex h-9 shrink-0 items-center gap-3 border-b border-border bg-background/80 px-3 backdrop-blur"
>
	<button
		class="flex shrink-0 items-center rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
		onclick={toggleLeftSidebar}
		title={view.leftSidebarCollapsed ? 'Expand nav (b)' : 'Collapse nav (b)'}
		aria-label={view.leftSidebarCollapsed ? 'Expand left panel' : 'Collapse left panel'}
	>
		{#if view.leftSidebarCollapsed}
			<PanelLeftOpen class="h-3.5 w-3.5" />
		{:else}
			<PanelLeftClose class="h-3.5 w-3.5" />
		{/if}
	</button>

	<div class="flex min-w-0 flex-1 items-center gap-2 overflow-x-auto">
		{@render children?.()}
	</div>

	<div class="flex shrink-0 items-center gap-2">
		{@render trailing?.()}
	</div>

	{#if showRightToggle}
		<button
			class="flex shrink-0 items-center rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
			onclick={toggleRightSidebar}
			title={view.rightSidebarCollapsed ? 'Show info (i)' : 'Hide info (i)'}
			aria-label={view.rightSidebarCollapsed ? 'Show right panel' : 'Hide right panel'}
		>
			{#if view.rightSidebarCollapsed}
				<PanelRightOpen class="h-3.5 w-3.5" />
			{:else}
				<PanelRightClose class="h-3.5 w-3.5" />
			{/if}
		</button>
	{/if}
</div>
