{{!--
  ApplicationV2 template for Create a Diversion Results Preview Dialog
  Matches the visibility manager's design and styling
--}}

<div class="create-a-diversion-preview-content">
  {{!-- Diverting Token Information Panel --}}
  <div class="diverter-info">
    <div class="diverter-image">
      <img src="{{divertingToken.image}}" data-tooltip="{{divertingToken.name}}" />
    </div>
    <div class="diverter-details">
      <h3 class="diverter-name">{{divertingToken.name}}</h3>
      <p class="hint">Create a Diversion action results</p>
    </div>
  </div>

  {{!-- Encounter Filter + Ignore Allies --}}
  <div class="encounter-filter-section">
    {{#if showEncounterFilter}}
    <label class="encounter-filter-checkbox">
      <input type="checkbox" {{#if encounterOnly}}checked{{/if}} data-action="toggleEncounterFilter" data-tooltip="{{localize 'PF2E_VISIONER.UI.ENCOUNTER_FILTER_TOOLTIP'}}" />
      <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.ENCOUNTER_FILTER_TEXT"}}</span>
    </label>
    {{/if}}
    <label class="hide-foundry-hidden-filter-checkbox">
      <input type="checkbox" {{#if hideFoundryHidden}}checked{{/if}} data-action="toggleHideFoundryHidden" data-tooltip="{{localize 'PF2E_VISIONER.UI.HIDE_FOUNDRY_HIDDEN_TOOLTIP'}}" />
      <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.HIDE_FOUNDRY_HIDDEN"}}</span>
    </label>
    <label class="ignore-allies-filter-checkbox">
      <input type="checkbox" {{#if ignoreAllies}}checked{{/if}} data-action="toggleIgnoreAllies" data-tooltip="{{localize 'PF2E_VISIONER.UI.IGNORE_ALLIES_TOOLTIP'}}" />
      <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.IGNORE_ALLIES"}}</span>
    </label>
    <label class="show-only-changes-filter-checkbox">
      <input type="checkbox" {{#if showOnlyChanges}}checked{{/if}} data-action="toggleShowOnlyChanges" data-tooltip="{{localize 'PF2E_VISIONER.UI.SHOW_ONLY_CHANGES_TOOLTIP'}}" />
      <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.SHOW_ONLY_CHANGES"}}</span>
    </label>
    <label class="filter-by-detection-checkbox">
      <input type="checkbox" {{#if filterByDetection}}checked{{/if}} data-action="toggleFilterByDetection" data-tooltip="{{localize 'PF2E_VISIONER.UI.FILTER_BY_DETECTION_TOOLTIP'}}" />
      <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.FILTER_BY_DETECTION_LABEL"}}</span>
    </label>
  </div>

  {{!-- Results Table --}}
  {{#if bulkOverrideStates}}
  <div class="bulk-action-group">
    {{> "pf2e-visioner.bulk-override"}}
  </div>
  {{/if}}
  <div class="results-table-container">
    <table class="visibility-table create-a-diversion-results-table">
      <thead>
        <tr>
          <th class="token-image">{{localize "PF2E_VISIONER.UI.TOKEN"}}</th>
          <th class="token-name">{{localize "PF2E_VISIONER.UI.NAME"}}</th>
          <th class="roll-result">{{localize "PF2E_VISIONER.CREATE_A_DIVERSION_AUTOMATION.ROLL_VS_DC"}}</th>
          <th class="outcome">{{localize "PF2E_VISIONER.CREATE_A_DIVERSION_AUTOMATION.OUTCOME"}}</th>
          <th class="visibility-change">{{localize "PF2E_VISIONER.CREATE_A_DIVERSION_AUTOMATION.VISIBILITY_CHANGE"}}</th>
          <th class="actions">{{localize "PF2E_VISIONER.UI.ACTIONS"}}</th>
        </tr>
      </thead>
      <tbody>
        {{#each outcomes as |outcome|}}
          <tr class="token-row" data-token-id="{{outcome.observer.id}}">
            <td class="token-image">
              <span class="token-img-wrapper">
                <img src="{{outcome.tokenImage}}" data-tooltip="{{outcome.observer.name}}" width="28" height="28" />
                {{#if outcome.observer.document.hidden}}
                  <span class="foundry-hidden-indicator" data-tooltip="{{localize 'PF2E_VISIONER.UI.FOUNDRY_HIDDEN'}}"><i class="fas fa-eye-slash"></i></span>
                {{/if}}
              </span>
            </td>
            <td class="token-name">
              <strong data-tooltip="{{outcome.observer.name}}">{{outcome.observer.name}}</strong>
            </td>
            <td class="roll-result">
              <div class="roll-vs-dc">
                <div class="roll-dc-line">
                  <span class="roll-total">{{outcome.rollTotal}}</span>
                  <span class="vs-text">{{localize "PF2E_VISIONER.UI.VS_DC"}}</span>
                  <span class="dc-value">{{outcome.dc}}</span>
                </div>
                <div class="margin-display">({{../marginText outcome}})</div>
              </div>
            </td>
            <td class="outcome {{outcome.outcomeClass}}">
              {{outcome.outcomeLabel}}
            </td>
            <td class="visibility-change">
              <div class="visibility-change-with-override">
                {{{visibilityIcon outcome.currentVisibility}}}
                <i class="fas fa-arrow-right visibility-arrow"></i>
                <div class="override-icons" data-token-id="{{outcome.observer.id}}">
                  {{#each outcome.availableStates}}
                    <button type="button" 
                            class="state-icon {{#if selected}}selected{{/if}} {{#if calculatedOutcome}}calculated-outcome{{/if}}"
                            data-state="{{key}}"
                            data-token-id="{{../outcome.observer.id}}"
                            data-tooltip="{{label}}">
                      <i class="{{icon}}"></i>
                    </button>
                  {{/each}}
                  <input type="hidden" name="override.{{outcome.observer.id}}" value="{{outcome.overrideState}}" />
                </div>
              </div>
            </td>
            <td class="actions">
              {{#if outcome.hasActionableChange}}
                <button type="button" class="row-timer-toggle" data-token-id="{{outcome.observer.id}}" data-tooltip="{{localize 'PF2E_VISIONER.TIMED_OVERRIDE.SET_DURATION_FOR_ROW'}}">
                  <i class="fas fa-clock"></i>
                </button>
                <button type="button" class="row-action-btn apply-change" data-action="applyChange" data-token-id="{{outcome.observer.id}}" data-tooltip="{{localize 'PF2E_VISIONER.UI.APPLY_VISIBILITY_CHANGE'}}">
                  <i class="fas fa-check"></i>
                </button>
                <button type="button" class="row-action-btn revert-change" data-action="revertChange" data-token-id="{{outcome.observer.id}}" data-tooltip="{{localize 'PF2E_VISIONER.UI.REVERT_TO_ORIGINAL'}}">
                  <i class="fas fa-undo"></i>
                </button>
              {{else}}
                <span class="no-action">{{localize "PF2E_VISIONER.UI.NO_CHANGE_LABEL"}}</span>
              {{/if}}
            </td>
          </tr>
        {{/each}}
      </tbody>
    </table>
  </div>

  {{!-- Bulk Actions --}}
  <div class="create-a-diversion-preview-dialog-bulk-actions-header">
    <div class="create-a-diversion-preview-dialog-bulk-actions-info">
      <span class="create-a-diversion-preview-dialog-changes-count">{{changesCount}}</span> of <span class="create-a-diversion-preview-dialog-total-count">{{totalCount}}</span> observers will have visibility changes.
    </div>
    <div class="create-a-diversion-preview-dialog-bulk-actions-buttons">
      <button type="button" class="create-a-diversion-preview-dialog-bulk-action-btn bulk-action-btn apply-all" data-action="applyAll" data-tooltip="{{localize 'PF2E_VISIONER.UI.APPLY_ALL_CHANGES'}}">
        <i class="fas fa-check-circle"></i> {{localize "PF2E_VISIONER.UI.APPLY_ALL"}}
      </button>
      <button type="button" class="create-a-diversion-preview-dialog-bulk-action-btn bulk-action-btn revert-all" data-action="revertAll" data-tooltip="{{localize 'PF2E_VISIONER.UI.REVERT_ALL_CHANGES'}}" disabled>
        <i class="fas fa-undo"></i> {{localize "PF2E_VISIONER.UI.REVERT_ALL"}}
      </button>
    </div>
  </div>
</div>