<div class="clue-browser-app">
  <div class="clue-browser-layout">
  <aside class="clue-browser-left">
    <div class="clue-browser-topbar">
      <div class="clue-browser-topbar-left">
        <h2>Clues Kit Manager</h2>
      </div>

      <div class="clue-browser-topbar-actions clue-browser-inline-actions">
        <button type="button" data-action="new-clue">
          <i class="fas fa-plus"></i> New Clue
        </button>
        <button type="button" data-action="view-player-decks">
          <i class="fas fa-users"></i> Player Deck Inspector
        </button>
      </div>
    </div>

      <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="gm-new-folder-name" placeholder="Folder name">
          <button type="button" data-action="create-gm-folder">
            <i class="fas fa-check"></i>
          </button>
        </div>
      </div>

      {{#if hasParentDropTarget}}
        <div
          class="clue-browser-parent-drop"
          data-gm-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}};"
    data-gm-folder-drop-id="{{this.id}}"
  >
   <div class="clue-folder-tile-top">
  <textarea
    class="clue-folder-tile-name-input"
    rows="1"
    data-gm-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-gm-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-gm-folder-text-color-input="{{this.id}}"
    >
    <i class="fas fa-font"></i>
  </label>

  <button type="button" data-action="delete-gm-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 this.isSelected}}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-gm-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">{{this.revealLevelCount}} level(s)</span>
    </div>
  </div>

  <div class="clue-tile-toolbar">
    <div class="clue-tile-actions">
      <button type="button" data-action="send-clue" data-clue-id="{{this.id}}">
        <i class="fas fa-paper-plane"></i>
      </button>
      <button type="button" data-action="edit-clue" data-clue-id="{{this.id}}">
        <i class="fas fa-pen-to-square"></i>
      </button>
      <button type="button" data-action="delete-clue" data-clue-id="{{this.id}}">
        <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>
              <p class="clue-preview-meta">{{selectedClue.revealLevelCount}} reveal level(s)</p>

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

              <div class="clue-preview-levels">
                {{#each selectedClue.revealLevels}}
                  <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}}
              </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>
</div>
