<!DOCTYPE html>

<html lang="en-US" prefix="og: https://ogp.me/ns#">

<head>
    {{> components/_head.hbs }}

    <link rel="stylesheet" href="{{ asset 'css/tree.css' }}">

    {{#each page.styles}}
    <link rel="stylesheet" href="{{ asset (cat 'css/' this) }}">
    {{/each}}

    <script type="module" async>
        import "treehouse/spells.js";
        import "treehouse/tree.js";
        import "treehouse/ulid.js";

        // We want to let the user have a selection on collapsible blocks without collapsing them when
        // the user finishes marking their selection.
        document.addEventListener("click", event => {
            if (getSelection().type == "Range") {
                event.preventDefault();
            }
        });

        {{!-- Go through the import map for each script. --}}
        {{#each page.scripts}}
        import "{{ this }}";
        {{/each}}
    </script>
</head>

<body>
    {{> components/_sidebar.hbs }}
    {{~> components/_tree.hbs }}
    {{~> components/_pink_space.hbs }}

    <th-command-line></th-command-line>

    {{!-- Non-blocking section --}}
    {{> components/_nonblocking.hbs }}
</body>

</html>

{{~> components/_jar.hbs }}
