{{!--
  ApplicationV2 template for Hide Results Preview Dialog
  Matches the visibility manager's design and styling
  Updated: row-timer-toggle button support
--}}

<div class="hide-preview-content">
  {{!-- Hiding Token Information Panel --}}
  <div class="hider-info">
    <div class="hider-image">
      <img src="{{actorTokenImage}}" alt="{{actorToken.name}}" />
    </div>
    <div class="hider-details">
      <h3 class="hider-name">{{actorToken.name}}</h3>
      <p class="hint">{{localize "PF2E_VISIONER.UI.ATTEMPTING_TO_HIDE"}}</p>
      {{#if prereqBadges}}
        <div class="action-context-badges">
          {{#each prereqBadges as |b|}}
            <span class="badge badge-feat" data-tooltip="{{b.tooltip}}">
              <i class="{{b.icon}}"></i>
              <span class="badge-label">{{b.label}}</span>
            </span>
          {{/each}}
        </div>
      {{/if}}
    </div>
  </div>

  {{!-- Encounter Filter + Ignore Allies (Encounter-only shown when relevant; Ignore allies always shown) --}}
  <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="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="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="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-los-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 hide-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="auto-cover">{{localize "PF2E_VISIONER.UI.COVER"}}</th>
          <th class="end-position">{{localize "PF2E_VISIONER.UI.PREREQUISITE"}}<br>
            <span class="legend-icon state-indicator visibility-concealed" data-state="concealed" data-tooltip="{{localize 'PF2E_VISIONER.UI.CONCEALED_TOOLTIP_SHORT'}}">
              <i class="fas fa-cloud" aria-hidden="true"></i>
            </span>/<span class="legend-icon state-indicator cover-standard" data-state="standard-cover" data-tooltip="{{localize 'PF2E_VISIONER.UI.STANDARD_OR_GREATER_TOOLTIP'}}">
              <i class="fas fa-shield-alt" aria-hidden="true"></i><span class="legend-plus">+</span>
            </span>
          </th>
          <th class="roll-result">{{localize "PF2E_VISIONER.UI.ROLL_VS_PERCEPTION_DC"}}</th>
          <th class="outcome">{{localize "PF2E_VISIONER.UI.OUTCOME"}}</th>
          <th class="visibility-change">{{localize "PF2E_VISIONER.UI.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.target.id}}">
            <td class="token-image">
              <span class="token-img-wrapper">
                <img src="{{outcome.tokenImage}}" alt="{{outcome.target.name}}" width="28" height="28" />
                {{#if outcome.target.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.target.name}}">{{outcome.target.name}}</strong>
            </td>
            <td class="auto-cover">
              {{#if outcome.autoCover}}
                <div class="auto-cover-info-hide {{#if outcome.autoCover.isOverride}}override{{/if}}">
                  {{#if outcome.autoCover.isOverride}}
                    {{#if outcome.autoCover.overrideDetails}}
                      <!-- Show detailed override indicator with original → final transition -->
                      <span class="auto-cover-override-detailed" 
                            data-tooltip="{{#if (eq outcome.autoCover.source 'popup')}}{{localize 'PF2E_VISIONER.UI.COVER_OVERRIDDEN_POPUP'}}{{else if (eq outcome.autoCover.source 'dialog')}}{{localize 'PF2E_VISIONER.UI.COVER_OVERRIDDEN_DIALOG'}}{{else}}{{localize 'PF2E_VISIONER.UI.COVER_OVERRIDDEN_MANUALLY'}}{{/if}}: {{outcome.autoCover.overrideDetails.originalLabel}} → {{outcome.autoCover.overrideDetails.finalLabel}}">
                        <!-- Original state (no crossing out) -->
                        <span class="original-cover" style="color: {{outcome.autoCover.overrideDetails.originalColor}};">
                          <i class="{{outcome.autoCover.overrideDetails.originalIcon}}"></i>
                        </span>
                        <i class="fas fa-arrow-right position-arrow"></i>
                        <span class="final-cover" style="color: {{outcome.autoCover.overrideDetails.finalColor}};">
                          <i class="{{outcome.autoCover.overrideDetails.finalIcon}}"></i>
                        </span>
                      </span>
                    {{else}}
                      <!-- Fallback: simple override indicator -->
                      <span class="auto-cover-icon">
                        <i class="{{outcome.autoCover.icon}} {{outcome.autoCover.cssClass}}"></i>
                      </span>
                    {{/if}}
                  {{else}}
                    <!-- Normal display without override -->
                    <span class="auto-cover-icon" data-tooltip="{{outcome.autoCover.label}}{{#if outcome.autoCover.bonus}} (+{{outcome.autoCover.bonus}} Stealth){{/if}}">
                      <i class="{{outcome.autoCover.icon}} {{outcome.autoCover.cssClass}}"></i>
                    </span>
                  {{/if}}
                </div>
              {{else}}
                <span class="auto-cover-icon no-cover" data-tooltip="{{localize 'PF2E_VISIONER.UI.NO_COVER_STEALTH'}}">
                  <i class="fas fa-shield-slash cover-none"></i>
                </span>
              {{/if}}
            </td>
            <td class="end-position">
              {{#if outcome.hasPositionData}}
                <div class="position-requirements-row">
                  <button type="button" class="position-requirement-btn {{#if outcome.positionDisplay.endPosition.qualifies}}position-check active{{else}}position-x{{/if}}"
                          data-action="togglePrequisite"
                          data-token-id="{{outcome.target.id}}"
                          data-requirement="end"
                          data-tooltip="{{#if outcome.positionDisplay.endPosition.qualifies}}Prerequisite met{{else}}Prerequisite not met{{/if}}">
                    {{#if outcome.positionDisplay.endPosition.qualifies}}
                      <i class="fas fa-check"></i>
                    {{else}}
                      <i class="fas fa-times"></i>
                    {{/if}}
                  </button>
                </div>
              {{else}}
                <div class="no-position-data" data-tooltip="{{localize 'PF2E_VISIONER.UI.END_POSITION_NOT_AVAILABLE'}}">
                  <i class="fas fa-question-circle"></i>
                </div>
              {{/if}}
            </td>
            <td class="roll-result">
              <div class="roll-vs-dc">
                <div class="roll-dc-line">
                  <span class="roll-total">{{outcome.rollTotal}}</span>
                  {{#if (and outcome.shouldShowOverride outcome.originalRollTotal)}}
                    <span class="original-roll-total" style="margin-left: 2px;">
                      ({{outcome.originalRollTotal}})
                    </span>
                  {{/if}}
                  <span class="vs-text">{{localize "PF2E_VISIONER.UI.VS_DC"}}</span>
                  <span class="dc-value">{{outcome.dc}}</span>
                </div>
                <div class="margin-display">({{#if (gt outcome.margin 0)}}+{{/if}}{{outcome.margin}})
                  {{#if (and outcome.shouldShowOverride outcome.originalMargin)}}
                    <span class="pv-note" style="margin-left: 2px;">
                      ({{#if (gt outcome.originalMargin 0)}}+{{/if}}{{outcome.originalMargin}})
                    </span>
                  {{/if}}
                </div>
              </div>
            </td>
            <td class="outcome {{outcome.outcomeClass}}">
              <div>{{outcome.outcomeLabel}}</div>
              {{#if (and outcome.shouldShowOverride outcome.originalOutcomeLabel)}}
                <div class="pv-note" style="margin-top: 2px;">
                  ({{outcome.originalOutcomeLabel}})
                </div>
              {{/if}}
            </td>
            <td class="visibility-change">
              <div class="visibility-change-inline">
                <span class="old-visibility-state {{#if outcome.isOldStateAvsControlled}}avs-controlled{{/if}}">
                  <span class="state-icon" data-state="{{outcome.oldVisibility}}" data-tooltip="{{capitalize outcome.oldVisibility}}">
                    {{{visibilityIcon outcome.oldVisibility}}}
                  </span>
                  {{#if outcome.isOldStateAvsControlled}}
                    <span class="avs-tag-small" data-tooltip="{{localize 'PF2E_VISIONER.UI.AVS_CONTROLLED'}}">
                      <i class="fas fa-bolt-auto"></i>
                    </span>
                  {{/if}}
                </span>
                <i class="fas fa-arrow-right visibility-arrow"></i>
                <div class="override-icons">
                  {{#each outcome.availableStates as |state|}}
                    <span class="state-icon {{#if (eq state.value outcome.overrideState)}}selected{{/if}} {{#if state.calculatedOutcome}}calculated-outcome{{/if}}" 
                          data-state="{{state.value}}" data-token-id="{{../outcome.target.id}}" data-tooltip="{{capitalize state.label}}">
                      {{{visibilityIcon state.value}}}
                    </span>
                  {{/each}}
                </div>
              </div>
              {{#if (and outcome.shouldShowOverride outcome.originalNewVisibility)}}
                <div class="original-visibility-change">
                  <span>{{localize "PF2E_VISIONER.UI.ORIGINAL_CHANGE"}}</span>
                  <span class="state-icon" data-state="{{outcome.originalNewVisibility}}" data-tooltip="{{localize 'PF2E_VISIONER.UI.ORIGINAL_COVER' state=outcome.originalNewVisibility}}">
                    {{{visibilityIcon outcome.originalNewVisibility}}}
                  </span>
                </div>
              {{/if}}
            </td>
            <td class="actions">
              {{#if outcome.hasActionableChange}}
                <button type="button" class="row-timer-toggle" data-token-id="{{outcome.target.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.target.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.target.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="hide-preview-dialog-bulk-actions-header">
    <div class="hide-preview-dialog-bulk-actions-info">
      <span class="hide-preview-dialog-changes-count">{{changesCount}}</span> of <span class="hide-preview-dialog-total-count">{{totalCount}}</span> observers will have visibility changes.
    </div>
    <div class="hide-preview-dialog-bulk-actions-buttons">
      <button type="button" class="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="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>