{{#*inline "soundPartial"}}
    <li class="sound flexrow {{sound.css}}" data-playlist-id="{{sound.playlistId}}" data-sound-id="{{sound._id}}">
        <h4 class="sound-name">{{sound.name}}</h4>
        <div class="sound-controls flexrow">
            {{#if @root.user.isGM}}
                <a class="sound-control {{#unless sound.repeat}}inactive{{/unless}} {{sound.controlCSS}}"
                   data-action="sound-repeat" data-tooltip="{{localize 'PLAYLIST.SoundLoop'}}">
                    <i class="fas fa-sync"></i>
                </a>
            {{/if}}

            {{#if sound.playing}}
                <a class="sound-control {{sound.controlCSS}}" data-action="sound-stop" title="{{localize 'PLAYLIST.SoundStop'}}">
                    <i class="{{sound.playIcon}}"></i>
                </a>
            {{else}}
                <a class="sound-control {{sound.controlCSS}}" data-action="sound-play" title="{{localize sound.playTitle}}">
                    <i class="{{sound.playIcon}}"></i>
                </a>
            {{/if}}
        </div>

        {{#if playback}}
            <div class="sound-playback flexrow">
                <div class="sound-timer">
                    <span class="current">{{sound.currentTime}}</span>
                    <span class="sep">/</span>
                    <span class="duration">{{sound.durationTime}}</span>
                </div>
                <i class="volume-icon fas fa-volume-down"></i>
                <input class="sound-volume" type="range"
                       value="{{sound.lvolume}}" min="0" max="1" step="0.05" data-tooltip="{{sound.volumeTooltip}}"/>
                <a class="sound-control pause {{sound.controlCSS}} {{#if sound.isPaused}}disabled{{/if}}" data-action="sound-pause" title="{{localize 'PLAYLIST.SoundPause'}}">
                    <i class="{{sound.pauseIcon}}"></i>
                </a>
            </div>
        {{/if}}
    </li>
{{/inline}}

{{#*inline "playingPartial"}}
{{#if showPlaying}}
    <div id="currently-playing" class="global-control flexrow {{currentlyPlaying.class}}">
        <header class="playlist-header flexrow">
            <h4>{{localize "PLAYLIST.CurrentlyPlaying"}}</h4>
            <a class="pin" data-tooltip="{{localize currentlyPlaying.pin.label}}">
                <i class="fas fa-caret-{{currentlyPlaying.pin.caret}}"></i>
            </a>
        </header>
        <ol class="playlist-sounds">
            {{#each playingSounds as |sound|}}
                {{> soundPartial sound=sound playback=true}}
            {{/each}}
        </ol>
    </div>
{{/if}}
{{/inline}}

<section class="{{cssClass}} directory flexcol" id="{{cssId}}" data-tab="{{tabName}}">

    <!-- Directory Header -->
    <header class="directory-header">
        <div class="header-actions action-buttons flexrow">
            {{#if canCreateEntry}}
            <button class="create-document create-entry"><i class="{{sidebarIcon}}"></i> {{localize 'SIDEBAR.Create' type=label}}</button>
            {{/if}}
            {{#if canCreateFolder }}
            <button class="create-folder"><i class="{{folderIcon}}"></i> {{localize 'FOLDER.Create'}}</button>
            {{/if}}
        </div>
        <div class="header-search flexrow">
            <a class="header-control toggle-search-mode" aria-label="{{localize searchTooltip}}" role="button" data-tooltip="{{localize searchTooltip}}"><i class="fas {{searchIcon}}"></i></a>
            <input type="search" name="search" value="" placeholder="{{localize 'SIDEBAR.Search' types=labelPlural }}" autocomplete="off"/>
            <a class="header-control toggle-sort" aria-label="{{localize sortTooltip}}" role="button" data-tooltip="{{localize sortTooltip}}"><i class="fa-solid {{sortIcon}}"></i></a>
            <a class="header-control collapse-all" aria-label="{{localize 'FOLDER.Collapse'}}" role="button" data-tooltip="FOLDER.Collapse"><i class="fa-duotone fa-folder-tree"></i></a>
        </div>
    </header>

    <div id="global-volume" class="global-control flexrow {{#unless volumeExpanded}}collapsed{{/unless}}">
        <header class="playlist-header flexrow">
            <h4>{{localize "PLAYLIST.GlobalVolume"}} <i class="collapse fa fa-angle-{{#if volumeExpanded}}down{{else}}up{{/if}}"></i></h4>
        </header>
        <ol class="playlist-sounds">
            <li class="sound flexrow" data-tooltip="{{localize 'PLAYLIST.PlaylistVolumeTooltip'}}">
                <h4>{{localize "PLAYLIST.VolPlaylist"}}</h4>
                <i class="volume-icon fas fa-volume-down"></i>
                <input aria-label="{{localize 'PLAYLIST.VolPlaylist'}}" class="global-volume-slider" name="globalPlaylistVolume" type="range" min="0" max="1" step="0.05" value="{{playlistModifier}}" data-tooltip="{{playlistTooltip}}"/>
            </li>
            <li class="sound flexrow" data-tooltip="{{localize 'PLAYLIST.AmbientVolumeTooltip'}}">
                <h4>{{localize "PLAYLIST.VolAmbient"}}</h4>
                <i class="volume-icon fas fa-volume-down"></i>
                <input aria-label="{{localize 'PLAYLIST.VolAmbient'}}" class="global-volume-slider" name="globalAmbientVolume" type="range" min="0" max="1" step="0.05" value="{{ambientModifier}}" data-tooltip="{{ambientTooltip}}"/>
            </li>
            <li class="sound flexrow" data-tooltip="{{localize 'PLAYLIST.InterfaceVolumeTooltip'}}">
                <h4>{{localize "PLAYLIST.VolInterface"}}</h4>
                <i class="volume-icon fas fa-volume-down"></i>
                <input aria-label="{{localize 'PLAYLIST.VolInterface'}}" class="global-volume-slider" name="globalInterfaceVolume" type="range" min="0" max="1" step="0.05" value="{{interfaceModifier}}" data-tooltip="{{interfaceTooltip}}"/>
            </li>
        </ol>
    </div>

    {{#if currentlyPlaying.location.top}}
        {{> playingPartial}}
    {{/if}}

    <!-- Directories List -->
	<ol class="directory-list">
        {{~#each tree.children}}
        {{> (lookup @root "folderPartial") node=this folder=this.folder}}
        {{/each}}
        {{#each tree.entries}}
        {{> (lookup @root "entryPartial")}}
        {{/each~}}
	</ol>

    {{#if currentlyPlaying.location.bottom}}
        {{> playingPartial}}
    {{/if}}

	<!-- Directory Footer -->
	<footer class="directory-footer"></footer>
</section>