---
import { SITE_TITLE } from '../consts';
import { bonsai } from '../wikibonsai/semtree';

const { current } = Astro.props;

const root = bonsai ? bonsai.root : '';
const tree = bonsai ? bonsai.tree : [];

const curNode = tree.find(node => node.text == current);
const ancestors = curNode ? curNode.ancestors : [];
const ancestorNodes = ancestors.map(n => tree.find(tn => tn.text == n));
---
<style>
	ol {
		list-style: '> ';
		display: flex;
		align-self: center;
		overflow-x: scroll;
		white-space: nowrap;
		padding-left: 0em;
	}
	li {
		padding-right: 1.5em;
	}
	.site-item {
		list-style: none;
	}
</style>
<nav class="bread-crumbs">
	<ol>
		{ancestorNodes.map(node =>
			<li>
				{node.url ?
					<a class="wiki" href={node.url}>{node.text}</a>
					:
					<a class="invalid">{node.text}</a>
				}
			</li>
		)}
		<li>
			{current}
		</li>
	</ol>
</nav>
