<div id="crlngn-scene-folders" class="{{#if (eq currFolder.id favoritesId)}}favorites{{/if}}" draggable="false">
  
  <a class="selected">
    {{#if useSceneBackButton}}
    <i class="fas fa-turn-left"
      data-tooltip="{{backButtonLabel}}"
      data-tooltip-direction="DOWN"
      data-tooltip-delay="500"></i>
    {{/if}}

    <i class="fas fa-folder-tree root"
      data-tooltip="{{rootButtonLabel}}"
      data-tooltip-direction="DOWN"
      data-tooltip-delay="500"></i>
    
    {{#unless (eq currFolder.id favoritesId)}}
    {{#each parentFolders}}
    <i class="fas fa-folder parent-folder" 
      data-folder-id="{{this.id}}"
      data-tooltip="{{this.name}}"
      data-tooltip-direction="DOWN"
      data-tooltip-delay="500"></i>
    {{/each}}
    {{currFolder.name}}
    {{else}}
    {{sceneNavAlias}}
    {{/unless}}
  </a>

  <div class="scene-folders-contents">
    <div class="search-container">
      <input type="text" class="input-scene-search"
        autocomplete="off" placeholder="{{localize "CRLNGN_UI.ui.sceneNav.searchPlaceholder"}}"
        onfocus="this.select()" />

      <div class="back-to-favorites" data-folder-id="{{favoritesId}}">
        <a id="scene-folder-favorites" class="favorites">
          <i class="fas fa-map"></i> {{#if sceneNavAlias}}{{sceneNavAlias}}{{else}}{{favoritesName}}{{/if}}
        </a>
      </div>

      <ol class="search-results">
        {{#each searchResults}}
          {{#if this.isFolder}}
            <li class="folder" data-folder-id="{{this.id}}">
              <a>
                <i class="fas fa-map"></i> {{this.name}}
              </a>
            </li>
          {{else}}
            <li class="scene" data-scene-id="{{this.id}}">
              <a>
                <i class="fas fa-map"></i> {{this.name}}
              </a>
            </li>
          {{/if}}
        {{/each}}
      </ol>
      
      <p class="subtitle">All folders:</p>
    </div>
    
    <ol class="folder-list">
      
      {{#each folderList}}
      <li class="folder{{#if (eq ../currFolder.id this.id) }} active{{/if}}"
        data-folder-id="{{this.id}}">
        <a>
          <i class="fas fa-folder"></i> {{this.name}} 
          {{#if this.hasSubfolders}}<span class="toggle">{{#if this.isOpen}} &minus;{{else}}&plus;{{/if}}</span>{{/if}}
        </a>
        {{#if this.hasSubfolders}}
          {{> recursiveFolder children=this.children}}
        {{/if}}
      </li>
      {{/each}}
    </ol>
  </div>
</div>

<ol id="crlngn-scene-list" class="no-transition{{#unless useIcons}} no-icons{{/unless}}">
  <!--subfolders first-->
  {{#each folders}}
  <li class="folder nav-item gm {{#if (eq ../currFolder.id this.id)}}active{{/if}}" data-folder-id="{{#if this.folder}}{{this.folder.id}}{{else}}{{this.id}}{{/if}}" draggable="false">
    <a class="folder-name">
      <i class="fas fa-folder"></i> {{#if this.folder}}{{this.folder.name}}{{else}}{{this.name}}{{/if}}
    </a>
  </li>
  {{/each}}

  <!--folder scenes-->
  {{#each scenes}}
  <li class="scene nav-item{{#if (eq this.ownership.default 0)}} gm{{/if}}{{#if (eq ../viewedSceneId this.id) }} active{{/if}}" 
    data-scene-id="{{this.id}}" draggable="true">
    <a class="scene-name">
      {{#if this.active}} 
      <i class="fas fa-bullseye"
        data-tooltip="Active scene"
        data-tooltip-direction="DOWN"
        data-tooltip-delay="1000"></i>
      {{/if}}
      {{#if ../isGM}}
        {{#if (eq ../viewedSceneId this.id)}}
        <i class="fas fa-crown{{#unless ../useSceneIcons}} hidden{{/unless}}"
          data-tooltip="Viewed by GM"
          data-tooltip-direction="DOWN"
          data-tooltip-delay="1000"></i>
        {{else}}
        {{#unless this.active}}
          {{#if (eq this.ownership.default 0)}}
          <i class="fas fa-lock{{#unless ../useSceneIcons}} hidden{{/unless}}"
            data-tooltip="Hidden from players"
            data-tooltip-direction="DOWN"
            data-tooltip-delay="1000"></i>
          {{/if}}
        {{/unless}}
        {{/if}}
      {{/if}}
      {{this.name}}
    </a>
    <ul class="scene-players">
      {{#each ../users}}
        {{#if (eq ../viewedSceneId this.id) }}
          <li class="scene-player" style="background-color: {{this.color}};">{{this.viewedScene}} {{../this.id}}</li>
        {{/if}}
      {{/each}}
    </ul>

    {{#if ../usePreview}}
    <span class="scene-preview" style="background-image: url('{{this.thumbnail}}')"></span>
    {{/if}}
  </li>
  {{/each}}
</ol>

{{!-- Partial template for recursive folder rendering --}}
{{#*inline "recursiveFolder"}}
  <ol class="subfolders{{#if isOpen}} open{{/if}}">
    {{#each children}}
    <li class="folder" data-folder-id="{{this.id}}">
      <a>
        <i class="fas fa-folder"></i> 
        {{this.name}} 
        {{#if this.hasSubfolders}}<span class="toggle">{{#if this.isOpen}} &minus;{{else}}&plus;{{/if}}</span>{{/if}}
      </a>
      {{#if this.hasSubfolders}}
        {{> recursiveFolder children=this.children}}
      {{/if}}
    </li>
    {{/each}}
  </ol>
{{/inline}}