<div class="clue-cards-app">
  <div class="clue-cards-header">
    <div>
      <h2>{{#if isEditMode}}Edit Clue{{else}}Create Clue{{/if}}</h2>
      <p class="clue-cards-subtitle">Set the clue title, image framing, and reveal levels.</p>
    </div>

    <div class="clue-cards-header-actions">
      <button type="button" data-action="save-clue">
        <i class="fas fa-save"></i> Save Clue
      </button>
    </div>
  </div>

  <div class="clue-cards-form">
    <label class="clue-handout-toggle">
      <input type="checkbox" name="clue-handout" {{#if clue.isHandout}}checked{{/if}}>
      <span>
        <strong>Handout</strong>
        <small>Use the chosen image itself as the clue shape. An image is required.</small>
      </span>
    </label>

    <div class="form-group">
      <label for="clue-title"><strong>Title</strong></label>
      <input
        id="clue-title"
        name="clue-title"
        type="text"
        value="{{clue.title}}"
        placeholder="Clue title"
      >
    </div>

    <div class="form-group">
      <label for="clue-audio"><strong>Audio (optional)</strong></label>
      <div class="clue-image-input-row">
        <input
          id="clue-audio"
          name="clue-audio"
          type="text"
          value="{{clue.audioPath}}"
          placeholder="Path to audio file"
        >
        <button type="button" data-action="browse-audio">
          <i class="fas fa-music"></i> Browse
        </button>
      </div>
      {{#if clue.audioPath}}
        <audio class="clue-editor-audio-preview" controls>
          <source src="{{clue.audioPath}}">
        </audio>
      {{/if}}
    </div>

    <div class="form-group">
      <label for="clue-image"><strong>Image (You can also paste copied images here)</strong></label>
      <div class="clue-image-input-row">
        <input
          id="clue-image"
          name="clue-image"
          type="text"
          value="{{clue.imagePath}}"
          placeholder="Path to image"
        >
        <button type="button" data-action="browse-image">
          <i class="fas fa-image"></i> Browse
        </button>
      </div>
    </div>

    {{#if clue.imagePath}}
      <div class="clue-editor-image-tools {{#if clue.isHandout}}is-handout{{/if}}">
        <div class="clue-editor-image-frame">
          <div
            class="clue-editor-image-preview-stage"
            data-image-stage
          >
            <img
              src="{{clue.imagePath}}"
              alt="{{clue.title}}"
              data-image-preview
              style="
                object-position: {{clue.imagePositionX}}% {{clue.imagePositionY}}%;
                transform: scale({{clue.imageScale}});
              "
            >
          </div>
        </div>

        <div class="clue-editor-image-controls">
          <div class="form-group">
            <label for="clue-image-scale"><strong>Zoom</strong></label>
            <input
              id="clue-image-scale"
              name="clue-image-scale"
              type="range"
              min="1"
              max="3"
              step="0.05"
              value="{{clue.imageScale}}"
              data-image-control="scale"
            >
            <div class="clue-editor-slider-value" data-image-scale-value>{{clue.imageScale}}</div>
          </div>

          <div class="form-group">
            <label for="clue-image-position-x"><strong>Horizontal Position</strong></label>
            <input
              id="clue-image-position-x"
              name="clue-image-position-x"
              type="range"
              min="0"
              max="100"
              step="1"
              value="{{clue.imagePositionX}}"
              data-image-control="x"
            >
            <div class="clue-editor-slider-value" data-image-x-value>{{clue.imagePositionX}}%</div>
          </div>

          <div class="form-group">
            <label for="clue-image-position-y"><strong>Vertical Position</strong></label>
            <input
              id="clue-image-position-y"
              name="clue-image-position-y"
              type="range"
              min="0"
              max="100"
              step="1"
              value="{{clue.imagePositionY}}"
              data-image-control="y"
            >
            <div class="clue-editor-slider-value" data-image-y-value>{{clue.imagePositionY}}%</div>
          </div>
        </div>
      </div>
    {{/if}}

{{#unless clue.imagePath}}
  <div class="clue-editor-image-controls clue-editor-no-image-controls">
    <div class="form-group">
      <label for="clue-fallback-color"><strong>Card Color</strong></label>
      <input
        id="clue-fallback-color"
        name="clue-fallback-color"
        type="color"
        value="{{clue.fallbackColor}}"
      >
    </div>

    <div class="form-group">
      <label for="clue-fallback-icon"><strong>Icon (optional)</strong></label>
      <select id="clue-fallback-icon" name="clue-fallback-icon">
        <option value="" {{#if (eq clue.fallbackIcon "")}}selected{{/if}}>No icon</option>
        <option value="fa-magnifying-glass" {{#if (eq clue.fallbackIcon "fa-magnifying-glass")}}selected{{/if}}>Magnifying Glass</option>
        <option value="fa-book" {{#if (eq clue.fallbackIcon "fa-book")}}selected{{/if}}>Book</option>
        <option value="fa-scroll" {{#if (eq clue.fallbackIcon "fa-scroll")}}selected{{/if}}>Scroll</option>
        <option value="fa-location-dot" {{#if (eq clue.fallbackIcon "fa-location-dot")}}selected{{/if}}>Location Pin</option>
        <option value="fa-key" {{#if (eq clue.fallbackIcon "fa-key")}}selected{{/if}}>Key</option>
        <option value="fa-skull" {{#if (eq clue.fallbackIcon "fa-skull")}}selected{{/if}}>Skull</option>
        <option value="fa-hand" {{#if (eq clue.fallbackIcon "fa-hand")}}selected{{/if}}>Hand</option>
        <option value="fa-eye" {{#if (eq clue.fallbackIcon "fa-eye")}}selected{{/if}}>Eye</option>
        <option value="fa-feather" {{#if (eq clue.fallbackIcon "fa-feather")}}selected{{/if}}>Feather</option>
        <option value="fa-question" {{#if (eq clue.fallbackIcon "fa-question")}}selected{{/if}}>Question Mark</option>
        <option value="fa-star" {{#if (eq clue.fallbackIcon "fa-star")}}selected{{/if}}>Star</option>
        <option value="fa-bolt" {{#if (eq clue.fallbackIcon "fa-bolt")}}selected{{/if}}>Bolt</option>
        <option value="fa-fire" {{#if (eq clue.fallbackIcon "fa-fire")}}selected{{/if}}>Fire</option>
        <option value="fa-crown" {{#if (eq clue.fallbackIcon "fa-crown")}}selected{{/if}}>Crown</option>
        <option value="fa-shield" {{#if (eq clue.fallbackIcon "fa-shield")}}selected{{/if}}>Shield</option>
        <option value="fa-sword" {{#if (eq clue.fallbackIcon "fa-sword")}}selected{{/if}}>Sword</option>
        <option value="fa-map" {{#if (eq clue.fallbackIcon "fa-map")}}selected{{/if}}>Map</option>
        <option value="fa-comments" {{#if (eq clue.fallbackIcon "fa-comments")}}selected{{/if}}>Comments</option>
        <option value="fa-user" {{#if (eq clue.fallbackIcon "fa-user")}}selected{{/if}}>Person</option>
        <option value="fa-ghost" {{#if (eq clue.fallbackIcon "fa-ghost")}}selected{{/if}}>Ghost</option>
        <option value="fa-dragon" {{#if (eq clue.fallbackIcon "fa-dragon")}}selected{{/if}}>Dragon</option>
        <option value="fa-flask" {{#if (eq clue.fallbackIcon "fa-flask")}}selected{{/if}}>Flask</option>
        <option value="fa-gem" {{#if (eq clue.fallbackIcon "fa-gem")}}selected{{/if}}>Gem</option>
        <option value="fa-lock" {{#if (eq clue.fallbackIcon "fa-lock")}}selected{{/if}}>Lock</option>
        <option value="fa-newspaper" {{#if (eq clue.fallbackIcon "fa-newspaper")}}selected{{/if}}>Newspaper</option>
      </select>
    </div>
  </div>
{{/unless}}


    <div class="clue-cards-header clue-editor-reveal-header">
      <div>
        <h3>Reveal Levels</h3>
        {{#if clue.isHandout}}
          <p class="clue-cards-subtitle">Reveal levels are optional for handouts.</p>
        {{else}}
          <p class="clue-cards-subtitle">Players see all reveal levels up to the unlocked one.</p>
        {{/if}}
      </div>

      <div class="clue-cards-header-actions">
        <button type="button" data-action="add-reveal-level">
          <i class="fas fa-plus"></i> Add Level
        </button>
        <button type="button" data-action="remove-reveal-level">
          <i class="fas fa-minus"></i> Remove Level
        </button>
      </div>
    </div>

    <div class="clue-reveal-editor-list">
      {{#unless clue.revealLevels.length}}
        <div class="clue-handout-no-levels">This handout has no reveal levels. Use Add Level if it needs hidden information.</div>
      {{/unless}}
      {{#each clue.revealLevels}}
        <div class="clue-card-section">
          <strong>Reveal Level {{this.level}}</strong>
          <textarea
            rows="4"
            data-reveal-text
            data-level="{{this.level}}"
            placeholder="Text shown for this reveal level"
          >{{this.text}}</textarea>
        </div>
      {{/each}}
    </div>
  </div>
</div>
