<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>My Clue Deck</h2>
          <p class="clue-browser-subtitle">Organize your clues into folders and keep your own notes.</p>
        </div>
        <div class="clue-browser-topbar-actions clue-browser-inline-actions">
          <button type="button" data-action="new-personal-clue">
            <i class="fas fa-plus"></i> New Personal Clue
          </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="new-folder-name" placeholder="Folder name">
          <button type="button" data-action="create-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-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.externalType}} clue-external-paper{{/if}}" {{#if this.externalType}}data-external-clue-tile="{{this.id}}"{{/if}}>
                  {{#if this.externalType}}
                    {{#if this.imagePath}}<img src="{{this.imagePath}}" alt="{{this.title}}" draggable="false">{{/if}}
                  {{else}}
                    {{#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}}
                  {{/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}}</span>
                  </div>
                </div>

                <div class="clue-tile-toolbar">
                  <div class="clue-tile-actions">
                    <button type="button" data-action="remove-own-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.externalType}}
              <div class="clue-preview-image clue-external-paper" data-external-clue-render>
                {{#if selectedClue.imagePath}}<img src="{{selectedClue.imagePath}}" alt="{{selectedClue.title}}">{{/if}}
              </div>
            {{else}}
              {{#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}}
            {{/if}}

            <div class="clue-preview-body">
              <h3>{{selectedClue.title}}</h3>
              {{#if selectedClue.externalType}}
                <button type="button" class="clue-preview-external-btn" data-action="open-external-clue">
                  <i class="fas fa-book-open"></i> Read Newspaper
                </button>
              {{/if}}
              {{#unless selectedClue.externalType}}
                {{#if selectedClue.isHandout}}
                  <p class="clue-preview-meta">{{selectedClue.revealLevelCount}} revealed level(s)</p>
                {{else}}
                  <p class="clue-preview-meta">Unlocked through level {{selectedClue.unlockedLevel}}</p>
                {{/if}}
              {{/unless}}

              {{#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>My Notes</h4>
                  <textarea
                    rows="8"
                    data-notes-for-clue="{{selectedClue.id}}"
                    placeholder="Write your own notes about this clue..."
                  >{{selectedClue.notes}}</textarea>

                  <div class="clue-preview-notes-actions">
                  </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>
</div>
