---
// Recursive file-tree sidebar. Directories are collapsible <details>, expanded
// along the path to the current file. Files link to the sidebar's current view
// (rendered or raw), so navigating the tree keeps you in the same view.
import Self from './FileTree.astro';
import type { TreeNode } from '../lib/manifest';

interface Props {
  node: TreeNode;
  current: string;
  view: 'rendered' | 'raw';
}
const { node, current, view } = Astro.props;
---

<ul class="owl-tree">
  {
    node.children.map((child) =>
      child.isDir ? (
        <li class="owl-tree-dir">
          <details open={current === child.path || current.startsWith(`${child.path}/`)}>
            <summary>{child.name}</summary>
            <Self node={child} current={current} view={view} />
          </details>
        </li>
      ) : (
        <li class={current === child.path ? 'owl-tree-file owl-current' : 'owl-tree-file'}>
          <a href={`/${view}/${child.path}`}>{child.name}</a>
        </li>
      ),
    )
  }
</ul>