<form class="dc-trail-form" autocomplete="off">
  {{!-- These hang off the right edge of the window (moved there in JS) --}}
  <div class="dc-vfx-toggles">
    <label class="dc-vfx-toggle">
      <input type="checkbox" name="enableTrails" {{#if enableTrails}}checked{{/if}}>
      <i class="fas fa-fire"></i>
      <span>Dice Trails</span>
    </label>
    <label class="dc-vfx-toggle">
      <input type="checkbox" name="settlingEnabled" {{#if settlingEnabled}}checked{{/if}}>
      <i class="fas fa-bullseye"></i>
      <span>Settling</span>
    </label>
  </div>

  <div class="dc-vfx-presets">
    <h3><i class="fas fa-bookmark"></i> Presets</h3>
    <div class="dc-preset-row">
      <select class="dc-preset-select"><option value="" disabled selected>Select...</option></select>
      <button type="button" class="dc-preset-save" title="Save current as preset"><i class="fas fa-save"></i></button>
      <button type="button" class="dc-preset-del-btn" title="Delete selected preset"><i class="fas fa-trash"></i></button>
    </div>
  </div>

  <nav class="sheet-tabs tabs" data-group="primary">
    <a class="item" data-tab="trail"><i class="fas fa-fire"></i> Trail</a>
    <a class="item" data-tab="settling"><i class="fas fa-bullseye"></i> Settling</a>
  </nav>

  <section class="sheet-body">

    {{!-- ════ TRAIL TAB ════ --}}
    <div class="tab" data-tab="trail" data-group="primary">
      <div class="dc-vfx-picker" data-pick="trail">
      <section class="dc-trail-section">
        <h3><i class="fas fa-shapes"></i> Particles <span class="dc-trail-count">({{selectedCount}} selected)</span></h3>
        <div class="dc-trail-textures">
          {{#each categories}}
          <div class="dc-trail-cat">
            <label>{{label}}</label>
            <div class="dc-trail-cat-items">
              {{#each items}}
              <div class="dc-trail-thumb {{#if selected}}active{{/if}}" data-tex="{{name}}" title="{{name}}">
                <img src="{{src}}" loading="lazy">
              </div>
              {{/each}}
            </div>
          </div>
          {{/each}}
        </div>
        <span class="dc-tex-hint">Right-click to remove your textures</span>
        <button type="button" class="dc-tex-upload" title="Add your own particle texture"><i class="fas fa-plus"></i> Add texture</button>
      </section>

      <section class="dc-trail-section">
        <h3><i class="fas fa-palette"></i> Colors</h3>
        <div class="dc-trail-colors">
          {{#each colors}}
          <div class="dc-trail-swatch" data-idx="{{@index}}" style="background:{{this}}">
            <span class="dc-trail-swatch-x">&times;</span>
          </div>
          {{/each}}
          <button type="button" class="dc-trail-add-color" title="Add color"><i class="fas fa-plus"></i></button>
        </div>
      </section>
      </div>

      <section class="dc-trail-section dc-trail-opts-row">
        <div class="dc-trail-opt">
          <label class="dc-trail-check">
            <input type="checkbox" name="blend" {{#if blend}}checked{{/if}}>
            Additive glow
            <span class="dc-hint" data-tip="Brightens overlapping particles, making dense areas glow intensely"><i class="fas fa-question-circle"></i></span>
          </label>
        </div>
        <div class="dc-trail-opt">
          <label class="dc-trail-check">
            <input type="checkbox" name="shrink" {{#if shrink}}checked{{/if}}>
            Shrink
            <span class="dc-hint" data-tip="Particles shrink as they fade out"><i class="fas fa-question-circle"></i></span>
          </label>
        </div>
        <div class="dc-trail-opt">
          <label class="dc-trail-check">
            <input type="checkbox" name="sparkle" {{#if sparkle}}checked{{/if}}>
            Sparkle
            <span class="dc-hint" data-tip="Particles flicker in and out randomly"><i class="fas fa-question-circle"></i></span>
          </label>
        </div>
        <div class="dc-trail-opt">
          <label class="dc-trail-check">
            <input type="checkbox" name="randomDir" {{#if randomDir}}checked{{/if}}>
            Random direction
            <span class="dc-hint" data-tip="Particles fly in random directions instead of trailing behind the dice. Overrides Spread."><i class="fas fa-question-circle"></i></span>
          </label>
        </div>
      </section>

      <section class="dc-trail-section dc-trail-sliders">
        <div class="dc-trail-slider">
          <label>Size <span class="dc-hint" data-tip="How big each particle is in pixels"><i class="fas fa-question-circle"></i></span></label>
          <div class="dc-trail-slider-row">
            <input type="range" name="size" min="0.5" max="100" step="0.5" value="{{size}}">
            <input type="number" class="dc-trail-num" data-for="size" value="{{size}}" min="0.5" step="0.5">
          </div>
        </div>
        <div class="dc-trail-slider">
          <label>Amount <span class="dc-hint" data-tip="How many particles spawn per frame while the dice are moving"><i class="fas fa-question-circle"></i></span></label>
          <div class="dc-trail-slider-row">
            <input type="range" name="amount" min="1" max="50" step="1" value="{{amount}}">
            <input type="number" class="dc-trail-num" data-for="amount" value="{{amount}}" min="1" step="1">
          </div>
        </div>
        <div class="dc-trail-slider">
          <label>Lifetime <span class="dc-hint" data-tip="How many frames each particle lives before fading out"><i class="fas fa-question-circle"></i></span></label>
          <div class="dc-trail-slider-row">
            <input type="range" name="lifetime" min="1" max="300" step="1" value="{{lifetime}}">
            <input type="number" class="dc-trail-num" data-for="lifetime" value="{{lifetime}}" min="1" step="1">
          </div>
        </div>
        <div class="dc-trail-slider">
          <label>Speed <span class="dc-hint" data-tip="How fast particles drift away from the dice"><i class="fas fa-question-circle"></i></span></label>
          <div class="dc-trail-slider-row">
            <input type="range" name="speed" min="0" max="20" step="0.1" value="{{speed}}">
            <input type="number" class="dc-trail-num" data-for="speed" value="{{speed}}" min="0" step="0.1">
          </div>
        </div>
        <div class="dc-trail-slider">
          <label>Spread <span class="dc-hint" data-tip="The angle of the cone particles spawn in (360 = all directions)"><i class="fas fa-question-circle"></i></span></label>
          <div class="dc-trail-slider-row">
            <input type="range" name="spread" min="0" max="360" step="1" value="{{spread}}">
            <input type="number" class="dc-trail-num" data-for="spread" value="{{spread}}" min="0" step="1">
          </div>
        </div>
        <div class="dc-trail-slider">
          <label>Jitter <span class="dc-hint" data-tip="Random offset added to each particle's spawn position"><i class="fas fa-question-circle"></i></span></label>
          <div class="dc-trail-slider-row">
            <input type="range" name="jitter" min="0" max="20" step="0.1" value="{{jitter}}">
            <input type="number" class="dc-trail-num" data-for="jitter" value="{{jitter}}" min="0" step="0.1">
          </div>
        </div>
        <div class="dc-trail-slider">
          <label>Rotation <span class="dc-hint" data-tip="How much each particle spins as it drifts"><i class="fas fa-question-circle"></i></span></label>
          <div class="dc-trail-slider-row">
            <input type="range" name="rotation" min="0" max="10" step="0.1" value="{{rotation}}">
            <input type="number" class="dc-trail-num" data-for="rotation" value="{{rotation}}" min="0" step="0.1">
          </div>
        </div>
        <div class="dc-trail-slider">
          <label>Spawn Rate <span class="dc-hint" data-tip="Chance of spawning particles each frame (lower = sparser trail)"><i class="fas fa-question-circle"></i></span></label>
          <div class="dc-trail-slider-row">
            <input type="range" name="rate" min="0.01" max="1" step="0.01" value="{{rate}}">
            <input type="number" class="dc-trail-num" data-for="rate" value="{{rate}}" min="0.01" max="1" step="0.01">
          </div>
        </div>
      </section>

      <section class="dc-trail-section">
        <div class="dc-trail-preview-wrap">
          <canvas class="dc-trail-preview" width="460" height="150"></canvas>
        </div>
        <div class="dc-trail-actions">
          <button type="button" class="dc-trail-test"><i class="fas fa-play"></i> Preview</button>
          <button type="button" class="dc-trail-roll"><i class="fas fa-dice-d20"></i> Roll Dice</button>
        </div>
      </section>
    </div>

    {{!-- ════ SETTLING TAB ════ --}}
    <div class="tab" data-tab="settling" data-group="primary">
      <div class="dc-outcome-selector">
        <div class="dc-outcome-tabs">
          <button type="button" class="dc-outcome-tab {{#unless activeOutcome}}active{{/unless}}" data-outcome="all">
            <i class="fas fa-dice"></i> All Rolls
          </button>
          {{#each outcomes}}
          <button type="button" class="dc-outcome-tab {{#if active}}active{{/if}}" data-outcome="{{key}}">
            <i class="fas {{icon}}"></i> {{label}}
          </button>
          {{/each}}
        </div>
        {{#if activeOutcome}}
        <div class="dc-outcome-meta">
          <label class="dc-trail-check">
            <input type="checkbox" class="dc-outcome-enable" {{#if activeOutcomeEnabled}}checked{{/if}}>
            Enabled
          </label>
          {{#if activeOutcomeCritical}}
          <div class="dc-outcome-values-wrap">
            <label>Rule <span class="dc-hint" data-tip="Choose face values, or use Daggerheart matching d12 results."><i class="fas fa-question-circle"></i></span></label>
            <select class="dc-critical-rule">
              <option value="values" {{#if criticalRuleValues}}selected{{/if}}>Face values</option>
              <option value="daggerheart" {{#if criticalRuleDaggerheart}}selected{{/if}}>Daggerheart doubles</option>
            </select>
          </div>
          {{/if}}
          {{#if activeOutcomeHasValues}}
          <div class="dc-outcome-values-wrap">
            <label>Values <span class="dc-hint" data-tip="{{activeOutcomeValuesTip}}"><i class="fas fa-question-circle"></i></span></label>
            <input type="text" class="dc-outcome-values" value="{{activeOutcomeValuesStr}}" placeholder="{{activeOutcomeValuesPlaceholder}}">
          </div>
          {{/if}}
          {{#if activeOutcomeNote}}
          <p class="dc-outcome-note"><i class="fas fa-info-circle"></i> {{activeOutcomeNote}}</p>
          {{/if}}
        </div>
        {{/if}}
      </div>

      <section class="dc-trail-section dc-sound-section">
        <h3><i class="fas fa-volume-high"></i> Sound</h3>
        <div class="dc-sound-row">
          <input type="text" name="settlingSound" value="{{settlingSound}}" placeholder="No sound selected">
          <button type="button" class="dc-sound-browse" title="Choose an audio file">
            <i class="fas fa-folder-open"></i> Browse
          </button>
          <select name="settlingSoundAudience" class="dc-sound-audience" title="Choose who hears this sound">
            <option value="self" {{#if settlingSoundAudienceSelf}}selected{{/if}}>Only me</option>
            <option value="everyone" {{#if settlingSoundAudienceEveryone}}selected{{/if}}>Everyone</option>
          </select>
        </div>
      </section>

      <section class="dc-trail-section dc-trail-opts-row">
        <div class="dc-trail-opt">
          <label>Type <span class="dc-hint" data-tip="Static image displays a texture at each die. Animation plays a sprite sheet."><i class="fas fa-question-circle"></i></span></label>
          <select name="settlingMode">
            <option value="static" {{#if settlingModeStatic}}selected{{/if}}>Static image</option>
            <option value="animation" {{#if settlingModeAnim}}selected{{/if}}>Animation</option>
          </select>
        </div>
      </section>

      {{!-- ── STATIC IMAGE MODE ── --}}
      <div class="dc-settle-static-block">
        <div class="dc-vfx-picker" data-pick="settling">
        <section class="dc-trail-section">
          <h3><i class="fas fa-shapes"></i> Texture <span class="dc-settle-count">({{settlingSelectedCount}} selected)</span></h3>
          <div class="dc-trail-textures">
            {{#each settlingCategories}}
            <div class="dc-trail-cat">
              <label>{{label}}</label>
              <div class="dc-trail-cat-items">
                {{#each items}}
                <div class="dc-trail-thumb dc-settle-thumb {{#if selected}}active{{/if}}" data-tex="{{name}}" title="{{name}}">
                  <img src="{{src}}" loading="lazy">
                </div>
                {{/each}}
              </div>
            </div>
            {{/each}}
          </div>
          <span class="dc-tex-hint">Right-click to remove your textures</span>
        <button type="button" class="dc-tex-upload" title="Add your own particle texture"><i class="fas fa-plus"></i> Add texture</button>
        </section>

        <section class="dc-trail-section">
          <h3><i class="fas fa-palette"></i> Colors</h3>
          <div class="dc-trail-colors dc-settle-colors show-stops">
            {{#each settlingColors}}
            <div class="dc-settle-color" data-idx="{{@index}}">
              <div class="dc-trail-swatch dc-settle-swatch" style="background:{{color}}">
                <span class="dc-trail-swatch-x">&times;</span>
              </div>
              <div class="dc-settle-stop-wrap">
                <input type="number" class="dc-settle-stop" data-idx="{{@index}}" value="{{stop}}" min="0" max="100" step="1" title="Share of the blend (%)">
                <span class="dc-settle-pct">%</span>
              </div>
            </div>
            {{/each}}
            <button type="button" class="dc-trail-add-color dc-settle-add-color" title="Add color"><i class="fas fa-plus"></i></button>
          </div>
        </section>
        </div>

        <section class="dc-trail-section dc-trail-opts-row">
          <div class="dc-trail-opt">
            <label>Entrance <span class="dc-hint" data-tip="How the effect appears on screen when dice settle"><i class="fas fa-question-circle"></i></span></label>
            <select name="settlingEntrance">
              {{#each settlingEntrances}}
              <option value="{{key}}" {{#if selected}}selected{{/if}}>{{label}}</option>
              {{/each}}
            </select>
          </div>
          <div class="dc-trail-opt">
            <label>Exit <span class="dc-hint" data-tip="How the effect disappears after holding"><i class="fas fa-question-circle"></i></span></label>
            <select name="settlingExit">
              {{#each settlingExits}}
              <option value="{{key}}" {{#if selected}}selected{{/if}}>{{label}}</option>
              {{/each}}
            </select>
          </div>
          <div class="dc-trail-opt">
            <label class="dc-trail-check">
              <input type="checkbox" name="settlingBlend" {{#if settlingBlend}}checked{{/if}}>
              Additive glow
              <span class="dc-hint" data-tip="Brightens the effect, making it glow intensely"><i class="fas fa-question-circle"></i></span>
            </label>
          </div>
        </section>

        <section class="dc-trail-section dc-trail-sliders">
          <div class="dc-trail-slider">
            <label>Entrance (ms) <span class="dc-hint" data-tip="How long the entrance animation takes in milliseconds"><i class="fas fa-question-circle"></i></span></label>
            <div class="dc-trail-slider-row">
              <input type="range" name="settlingEntranceDur" min="50" max="2000" step="50" value="{{settlingEntranceDur}}">
              <input type="number" class="dc-trail-num" data-for="settlingEntranceDur" value="{{settlingEntranceDur}}" min="50" step="50">
            </div>
          </div>
          <div class="dc-trail-slider">
            <label>Hold (ms) <span class="dc-hint" data-tip="How long the effect stays fully visible before exiting"><i class="fas fa-question-circle"></i></span></label>
            <div class="dc-trail-slider-row">
              <input type="range" name="settlingHoldDur" min="0" max="3000" step="50" value="{{settlingHoldDur}}">
              <input type="number" class="dc-trail-num" data-for="settlingHoldDur" value="{{settlingHoldDur}}" min="0" step="50">
            </div>
          </div>
          <div class="dc-trail-slider">
            <label>Exit (ms) <span class="dc-hint" data-tip="How long the exit animation takes in milliseconds"><i class="fas fa-question-circle"></i></span></label>
            <div class="dc-trail-slider-row">
              <input type="range" name="settlingExitDur" min="50" max="2000" step="50" value="{{settlingExitDur}}">
              <input type="number" class="dc-trail-num" data-for="settlingExitDur" value="{{settlingExitDur}}" min="50" step="50">
            </div>
          </div>
        </section>
      </div>

      {{!-- ── ANIMATION MODE ── --}}
      <div class="dc-settle-anim-block">
        <section class="dc-trail-section dc-trail-opts-row">
          <div class="dc-trail-opt">
            <label>Animation <span class="dc-hint" data-tip="Which sprite sheet animation to play at each die"><i class="fas fa-question-circle"></i></span></label>
            <select name="settlingAnim">
              {{#each settlingAnims}}
              <option value="{{key}}" {{#if selected}}selected{{/if}}>{{label}}</option>
              {{/each}}
            </select>
          </div>
        </section>

        <section class="dc-trail-section dc-trail-sliders">
          <div class="dc-trail-slider">
            <label>Speed (fps) <span class="dc-hint" data-tip="Playback speed of the animation in frames per second"><i class="fas fa-question-circle"></i></span></label>
            <div class="dc-trail-slider-row">
              <input type="range" name="settlingAnimFps" min="5" max="60" step="1" value="{{settlingAnimFps}}">
              <input type="number" class="dc-trail-num" data-for="settlingAnimFps" value="{{settlingAnimFps}}" min="5" max="60" step="1">
            </div>
          </div>
        </section>
      </div>

      {{!-- ── shared: size + delay ── --}}
      <section class="dc-trail-section dc-trail-sliders">
        <div class="dc-trail-slider">
          <label>Size <span class="dc-hint" data-tip="How big the settling effect is in pixels"><i class="fas fa-question-circle"></i></span></label>
          <div class="dc-trail-slider-row">
            <input type="range" name="settlingSize" min="10" max="1000" step="1" value="{{settlingSize}}">
            <input type="number" class="dc-trail-num" data-for="settlingSize" value="{{settlingSize}}" min="10" step="1">
          </div>
        </div>
        <div class="dc-trail-slider">
          <label>Entrance delay (ms) <span class="dc-hint" data-tip="Wait time after dice settle before the effect appears"><i class="fas fa-question-circle"></i></span></label>
          <div class="dc-trail-slider-row">
            <input type="range" name="settlingDelayDur" min="0" max="3000" step="50" value="{{settlingDelayDur}}">
            <input type="number" class="dc-trail-num" data-for="settlingDelayDur" value="{{settlingDelayDur}}" min="0" step="50">
          </div>
        </div>
      </section>

      <section class="dc-trail-section">
        <div class="dc-trail-preview-wrap">
          <canvas class="dc-settle-preview" width="460" height="150"></canvas>
        </div>
        <div class="dc-trail-actions">
          <button type="button" class="dc-settle-test"><i class="fas fa-play"></i> Preview</button>
          <button type="button" class="dc-settle-roll"><i class="fas fa-dice-d20"></i> Roll Dice</button>
        </div>
      </section>
    </div>
  </section>

  <div class="dc-trail-actions dc-trail-save-row">
    <button type="submit"><i class="fas fa-save"></i> Save</button>
  </div>
</form>
