---
import WikiPageEntry from "../types/WikiPageEntry";

const { entry } = Astro.props as { entry: WikiPageEntry };
---
<li>
    {entry.children.length > 0 && <a class="dropdown-arrow" href="#">▶</a>}<a class={Astro.url.pathname === entry.url ? "active" : ""} href={entry.url}>{entry.title}</a>
    {entry.children.length > 0 && (
        <ul style="display: none;">
            {entry.children.map((child: WikiPageEntry) => <Astro.self entry={child} />)}
        </ul>
    )}
</li>
<style>
a {
    color: green;
}

a:hover {
    color: lime;
}

li {
    list-style-type: none;
}

.dropdown-arrow {
    color: green;
    margin-right: 0.5rem;
    text-decoration: none;
}

.active {
    color: lime;
    text-decoration: none;
}
</style>
<script>
const dropdownArrows: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-arrow');

dropdownArrows.forEach((arrow) => {
    arrow.addEventListener('click', (event) => {
        event.preventDefault();
        const ul = (event.target as HTMLElement)?.parentElement?.querySelector('ul');
        if(!ul) return;
        arrow.textContent = ul.style.display === 'none' ? '▼' : '▶';
        arrow.style.color = ul.style.display === 'none' ? 'lime' : 'green';
        ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
    });
});
</script>