<nav id="scene-navigation" aria-roledescription="{{localize "SCENE_NAVIGATION.LABEL"}}" data-tooltip-direction="RIGHT">
    {{#if canExpand}}
    <a id="scene-navigation-expand" class="ui-control" data-action="toggleExpand">
        <i class="fa-solid fa-caret-down" inert></i>
    </a>
    {{/if}}
    <menu id="scene-navigation-active" class="scene-navigation-menu flexcol">
        {{#each scenes.active as |scene|}}
        <li class="ui-control scene {{scene.cssClass}}" data-scene-id="{{scene.id}}" data-action="viewScene"
            {{#if scene.tooltip}}data-tooltip-text="{{scene.tooltip}}"{{/if}}>
            <span class="scene-name ellipsis">{{scene.name}}</span>
            {{#if scene.users}}
            <ul class="scene-players">
                {{#each scene.users as |user|}}
                <li class="scene-player" style="--color-bg:{{user.color}}; --color-border:{{user.border}}"
                    data-tooltip aria-label="{{user.name}}">{{user.letter}}</li>
                {{/each}}
            </ul>
            {{/if}}
        </li>
        {{/each}}
    </menu>
    <menu id="scene-navigation-inactive" class="scene-navigation-menu flexcol">
        {{#each scenes.inactive as |scene|}}
            <li class="ui-control scene {{scene.cssClass}}" data-scene-id="{{scene.id}}" data-action="viewScene"
                {{#if scene.tooltip}}data-tooltip-text="{{scene.tooltip}}"{{/if}}>
            <span class="scene-name ellipsis">{{scene.name}}</span>
        </li>
        {{/each}}
    </menu>
</nav>
