<form class="hcci-config">
  <header class="hcci-config-header">
    <div>
      <p class="hcci-kicker">HoloSuite Module</p>
      <h2>Critical Cut-In</h2>
      <div class="hcci-unsaved" data-hcci-dirty hidden>Unsaved changes</div>
    </div>
    <div class="hcci-top-controls">
      <label class="hcci-threshold">
        <span>Check die</span>
        <select name="dieSides" required title="Changing dice asks to reset the listed players' success and failure thresholds.">
          {{#each dice}}
            <option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>
          {{/each}}
        </select>
      </label>
      <label class="hcci-threshold">
        <span>Positive rolls</span>
        <select name="rollDirection" title="Changing roll direction asks to reset the listed players' success and failure thresholds.">
          <option value="high" {{#unless lowRollsGood}}selected{{/unless}}>High rolls are positive</option>
          <option value="low" {{#if lowRollsGood}}selected{{/if}}>Low rolls are positive</option>
        </select>
      </label>
      <label class="hcci-threshold">
        <span data-hcci-success-label>Success {{#if lowRollsGood}}≤{{else}}≥{{/if}}</span>
        <input type="number" name="threshold" min="0" max="{{dieSides}}" step="1" value="{{threshold}}" title="0 = automatic best face. Set a value to customize the threshold.">
      </label>
      <label class="hcci-threshold">
        <span data-hcci-failure-label>Failure {{#if lowRollsGood}}≥{{else}}≤{{/if}}</span>
        <input type="number" name="failureThreshold" min="0" max="{{dieSides}}" step="1" value="{{failureThreshold}}" title="0 = automatic worst face. Set a value to customize the threshold.">
      </label>
      <label class="hcci-threshold">
        <span>Duration (ms)</span>
        <input type="number" name="duration" min="800" max="8000" step="100" value="{{duration}}">
      </label>
    </div>
  </header>
  <p class="hcci-roll-help">Changing the die or positive roll direction asks to reset roll thresholds for every listed entry in both tabs. Global thresholds of 0 use the best/worst face automatically; blank actor thresholds inherit them. Click Save to apply changes.</p>

  <section class="hcci-config-grid">
    {{#each rows}}
      <article class="hcci-config-row" data-hcci-row="{{key}}">
        <div class="hcci-preview-wrap">
          <img src="{{success.preview}}" alt="">
          <span>{{typeLabel}}</span>
        </div>

        <div class="hcci-row-main">
          <div class="hcci-row-title">
            <h3>{{name}}</h3>
            <div class="hcci-row-tabs" role="tablist" aria-label="{{name}} cut-in type">
              <button type="button" class="{{#if successActive}}is-active{{/if}}" data-hcci-tab="success">Success</button>
              <button type="button" class="{{#if failureActive}}is-active{{/if}}" data-hcci-tab="failure">Failure</button>
            </div>
          </div>

          <div class="hcci-row-panel {{#if successActive}}is-active{{/if}}" data-hcci-panel="success">
            <div class="hcci-row-panel-heading">
              <strong>Critical success cut-in</strong>
              <label class="hcci-toggle">
                <input type="checkbox" data-hcci-field="enabled" {{#if success.enabled}}checked{{/if}}>
                <span>Enabled</span>
              </label>
            </div>

            <div class="hcci-panel-preview">
              <img data-hcci-preview data-fallback-src="{{portrait}}" src="{{success.preview}}" alt="">
            </div>

            <div class="hcci-row-fields">
              <label class="hcci-path-field">
                <span>Image / Portrait</span>
                <div>
                  <input type="text" data-hcci-field="imagePath" value="{{success.imagePath}}" placeholder="modules/holosuite-critical-cutin/assets/images/example.webp">
                  <button type="button" data-hcci-browse="imagePath" title="Choose image"><i class="fa-solid fa-image"></i></button>
                </div>
              </label>

              <label class="hcci-path-field">
                <span>Audio Sample</span>
                <div>
                  <input type="text" data-hcci-field="audioPath" value="{{success.audioPath}}" placeholder="modules/holosuite-critical-cutin/assets/sounds/example.ogg">
                  <button type="button" data-hcci-browse="audioPath" title="Choose audio"><i class="fa-solid fa-music"></i></button>
                </div>
              </label>

              <label>
                <span data-hcci-success-label>Success {{#if ../lowRollsGood}}≤{{else}}≥{{/if}}</span>
                <input type="number" data-hcci-field="threshold" min="1" max="{{../dieSides}}" step="1" value="{{success.threshold}}" placeholder="{{../effectiveThreshold}}">
              </label>

              <label>
                <span>Animation</span>
                <select data-hcci-field="animationStyle">
                  {{#each success.animationStyles}}
                    <option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>
                  {{/each}}
                </select>
              </label>

              <label>
                <span>Overlay Text</span>
                <input type="text" data-hcci-field="overlayText" value="{{success.overlayText}}" placeholder="{{../defaultText}}">
              </label>

              <label>
                <span>Accent Color</span>
                <input type="color" data-hcci-field="accentColor" value="{{success.accentColor}}">
              </label>
            </div>
          </div>

          <div class="hcci-row-panel {{#if failureActive}}is-active{{/if}}" data-hcci-panel="failure">
            <div class="hcci-row-panel-heading">
              <strong>Critical failure cut-in</strong>
              <label class="hcci-toggle">
                <input type="checkbox" data-hcci-field="enabled" {{#if failure.enabled}}checked{{/if}}>
                <span>Enabled</span>
              </label>
            </div>

            <div class="hcci-panel-preview">
              <img data-hcci-preview data-fallback-src="{{portrait}}" src="{{failure.preview}}" alt="">
            </div>

            <div class="hcci-row-fields">
              <label class="hcci-path-field">
                <span>Image / Portrait</span>
                <div>
                  <input type="text" data-hcci-field="imagePath" value="{{failure.imagePath}}" placeholder="modules/holosuite-critical-cutin/assets/images/failure.webp">
                  <button type="button" data-hcci-browse="imagePath" title="Choose image"><i class="fa-solid fa-image"></i></button>
                </div>
              </label>

              <label class="hcci-path-field">
                <span>Audio Sample</span>
                <div>
                  <input type="text" data-hcci-field="audioPath" value="{{failure.audioPath}}" placeholder="modules/holosuite-critical-cutin/assets/sounds/failure.ogg">
                  <button type="button" data-hcci-browse="audioPath" title="Choose audio"><i class="fa-solid fa-music"></i></button>
                </div>
              </label>

              <label>
                <span data-hcci-failure-label>Failure {{#if ../lowRollsGood}}≥{{else}}≤{{/if}}</span>
                <input type="number" data-hcci-field="threshold" min="1" max="{{../dieSides}}" step="1" value="{{failure.threshold}}" placeholder="{{../effectiveFailureThreshold}}">
              </label>

              <label>
                <span>Animation</span>
                <select data-hcci-field="animationStyle">
                  {{#each failure.animationStyles}}
                    <option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>
                  {{/each}}
                </select>
              </label>

              <label>
                <span>Overlay Text</span>
                <input type="text" data-hcci-field="overlayText" value="{{failure.overlayText}}" placeholder="{{../defaultFailureText}}">
              </label>

              <label>
                <span>Accent Color</span>
                <input type="color" data-hcci-field="accentColor" value="{{failure.accentColor}}">
              </label>
            </div>
          </div>

        </div>
      </article>
    {{else}}
      <p class="hcci-empty">No player-owned actors were found in this world.</p>
    {{/each}}
  </section>

  <footer class="hcci-config-actions">
    <button type="button" data-hcci-action="reset"><i class="fa-solid fa-rotate-left"></i> Reset</button>
    <button type="submit"><i class="fa-solid fa-floppy-disk"></i> Save</button>
  </footer>
</form>
