<div class="clue-browser-app">
  <div class="clue-browser-topbar">
    <div class="clue-browser-topbar-left">
      <h2>Player Deck Inspector</h2>
      <p class="clue-browser-subtitle">Inspect, organize, and manage a player's clue deck.</p>
    </div>
  </div>

  {{#if players.length}}
    <div class="clue-cards-filter-row">
      <label for="player-deck-select"><strong>Player</strong></label>
      <select id="player-deck-select" data-action="select-player">
        {{#each players}}
          <option value="{{this.id}}" {{#if (eq this.id ../selectedPlayerId)}}selected{{/if}}>
            {{this.name}}
          </option>
        {{/each}}
      </select>
    </div>

    <div class="clue-browser-layout">
      <aside class="clue-browser-left">
        <div class="clue-browser-nav">
          <button
            type="button"
            class="clue-browser-back-button"
            data-action="go-back-folder"
            {{#unless canGoBack}}disabled{{/unless}}
          >
            <i class="fas fa-arrow-left"></i>
          </button>

          <div class="clue-browser-location">
            <div class="clue-browser-location-label">Current Location</div>
            <div class="clue-browser-location-name">{{currentFolderName}}</div>
          </div>
        </div>

        <div class="clue-browser-create-folder">
          <button type="button" class="clue-browser-create-folder-toggle" data-action="toggle-create-folder">
            <i class="fas fa-folder-plus"></i> New Folder
          </button>
          <div class="clue-browser-create-folder-form">
            <input type="text" data-field="inspector-new-folder-name" placeholder="Folder name">
            <button type="button" data-action="create-inspector-folder">
              <i class="fas fa-check"></i>
            </button>
          </div>
        </div>

        {{#if hasParentDropTarget}}
          <div
            class="clue-browser-parent-drop"
            data-folder-drop-parent="true"
            title="Drop clues here to move them back"
          >
            <div class="clue-browser-parent-drop-icon">
              <i class="fas fa-level-up-alt"></i>
            </div>
            <div class="clue-browser-parent-drop-text">
              <strong>Move Back</strong>
              <span>Drop clues here to move them to the parent folder{{#unless parentFolderId}} / root{{/unless}}</span>
            </div>
          </div>
        {{/if}}

        <div class="clue-browser-left-scroll">
          <div class="clue-browser-entry-grid">
            {{#each visibleEntries}}
              {{#if (eq this.entryType "folder")}}
               <article
  class="clue-browser-item clue-folder-tile"
  data-folder-tile-id="{{this.id}}"
  data-folder-drop-id="{{this.id}}"
  style="--folder-color: {{this.color}}; --folder-text-color: {{this.textColor}};"
>
                  <div class="clue-folder-tile-top">
  <textarea
  class="clue-folder-tile-name-input"
  rows="1"
  data-folder-name-input="{{this.id}}"
>{{this.name}}</textarea>
</div>

<div class="clue-folder-tile-center">
  <div class="clue-folder-tile-icon">
    <i class="fas fa-folder"></i>
  </div>
</div>

<div class="clue-folder-tile-actions">
  <label class="clue-folder-color-button" title="Change folder color">
    <input
      type="color"
      value="{{this.color}}"
      data-folder-color-input="{{this.id}}"
    >
    <i class="fas fa-palette"></i>
  </label>
  <label class="clue-folder-color-button" title="Change folder text color">
    <input
      type="color"
      value="{{this.textColor}}"
      data-folder-text-color-input="{{this.id}}"
    >
    <i class="fas fa-font"></i>
  </label>

  <button type="button" data-action="delete-inspector-folder" data-folder-id="{{this.id}}">
    <i class="fas fa-trash"></i>
  </button>
</div>
				  
                </article>
              {{/if}}

              {{#if (eq this.entryType "clue")}}
                <article
  class="clue-browser-item clue-tile-card {{#if (eq this.id ../selectedClue.id)}}is-selected{{/if}} {{#if this.isHandout}}is-handout{{/if}}"
  style="{{#if this.isHandout}}--handout-aspect: {{this.handoutAspectRatio}};{{/if}}"
  data-select-clue-id="{{this.id}}"
  data-drag-clue-id="{{this.id}}"
  draggable="true"
>
                  <div class="clue-tile-media">
                    {{#if this.imagePath}}
                      <img
                        src="{{this.imagePath}}"
                        alt="{{this.title}}"
                        draggable="false"
                        style="
                          object-position: {{this.imagePositionX}}% {{this.imagePositionY}}%;
                          transform: scale({{this.imageScale}});
                        "
                      >
                   {{else}}
  <div
    class="clue-tile-no-image"
    style="background: {{this.fallbackColor}};"
  >
    {{#if this.fallbackIcon}}
      <i class="fas {{this.fallbackIcon}}"></i>
    {{/if}}
  </div>
{{/if}}
                  </div>

                  <div class="clue-tile-content">
                    <div class="clue-tile-title">{{this.title}}</div>

                    <div class="clue-tile-meta-row">
  <span class="clue-tile-pill">Unlocked {{this.unlockedLevel}}/{{this.maxRevealLevelCount}}</span>
</div>
       </div>           

                  <div class="clue-tile-toolbar">
                    

                    <div class="clue-tile-actions">
                      <button type="button" data-action="remove-player-clue" data-clue-id="{{this.id}}" title="Remove clue">
                        <i class="fas fa-trash"></i>
                      </button>
                    </div>
                  </div>
                </article>
              {{/if}}
            {{/each}}
          </div>
        </div>
      </aside>

      <section class="clue-browser-right">
        <div class="clue-preview-shell">
          {{#if selectedClue}}
            <div class="clue-preview-card {{#if selectedClue.isHandout}}is-handout{{/if}}">
              {{#if selectedClue.imagePath}}
                <div class="clue-preview-image">
                  <img
                    src="{{selectedClue.imagePath}}"
                    alt="{{selectedClue.title}}"
                    style="
                      object-position: {{selectedClue.imagePositionX}}% {{selectedClue.imagePositionY}}%;
                      transform: scale({{selectedClue.imageScale}});
                    "
                  >
                </div>
              {{/if}}

              <div class="clue-preview-body">
                <h3>{{selectedClue.title}}</h3>
                {{#if selectedClue.isHandout}}
                  <p class="clue-preview-meta">{{selectedClue.visibleLevelCount}}/{{selectedClue.maxRevealLevelCount}} revealed level(s)</p>
                {{else}}
                  <p class="clue-preview-meta">Unlocked through level {{selectedClue.unlockedLevel}}</p>
                {{/if}}

                {{#if selectedClue.audioPath}}
                  <div class="clue-preview-audio">
                    <audio controls>
                      <source src="{{selectedClue.audioPath}}">
                    </audio>
                  </div>
                {{/if}}

                <div class="clue-preview-levels">
                  {{#if selectedClue.missingSource}}
                    <section class="clue-preview-level">
                      <h4>Missing Source</h4>
                      <p>This clue's source definition no longer exists.</p>
                    </section>
                  {{else}}
                    {{#each selectedClue.visibleLevels}}
                      <section class="clue-preview-level">
                        <div class="clue-preview-level-header">
                          <span class="clue-preview-level-badge">{{this.level}}</span>
                          <span class="clue-preview-level-label">Reveal</span>
                        </div>
                        <p>{{this.text}}</p>
                      </section>
                    {{/each}}
                  {{/if}}

                  <section class="clue-preview-level clue-preview-notes">
                    <h4>Player Notes</h4>
                    <textarea
                      rows="8"
                      data-notes-for-clue="{{selectedClue.id}}"
                      placeholder="Edit this player's notes..."
                    >{{selectedClue.notes}}</textarea>

                    <div class="clue-preview-notes-actions">
                      <button type="button" data-action="remove-player-clue" data-clue-id="{{selectedClue.id}}">
                        <i class="fas fa-trash"></i> Remove Clue
                      </button>
                    </div>
                  </section>
                </div>
              </div>
            </div>
          {{else}}
            <div class="clue-preview-empty">
              <div class="clue-preview-empty-icon">
                <i class="fas fa-id-card"></i>
              </div>
              <h3>Select a clue</h3>
              <p>Click a clue tile on the left to preview it here.</p>
            </div>
          {{/if}}
        </div>
      </section>
    </div>
  {{else}}
    <div class="clue-cards-empty">
      <p>No players available.</p>
    </div>
  {{/if}}
</div>
