<script>
    import {getContext} from "svelte";
    import Icon from "../common/Icon.svelte";
    import Folder from "./Folder.svelte";

    const channel = getContext("channel");
    export let folder;
    export let schema;
    export let expanded = folder.shouldExpand;

    function toggleExpand() {
        expanded = !expanded;
    }
</script>
<div class="sidebar-folder">
    {#if folder.name !== ""}
        <button class="sidebar-header" tabindex="0" on:click={toggleExpand}>
            {folder.name.replaceAll("_", " ") ?? "Main"}
            {#if expanded}
                <Icon icon="circle-chevron-up"></Icon>
            {:else}
                <Icon icon="circle-chevron-down"></Icon>
            {/if}
        </button>
    {/if}
    {#if expanded}
        {#each folder.folders as aFolder}
            <Folder folder={aFolder} schema={schema}></Folder>
        {/each}

        {#each folder.files as aSchema}
            <a class="sidebar-item" class:active={aSchema.name === schema?.name}
               aria-current="page"
               href="{channel.lucentUrl}/content/{aSchema.name}">{aSchema.label}</a>
        {/each}


    {/if}
</div>