<div class="point-out-preview-content">
    <!-- Actor Info Section -->
    <div class="actor-info">
        <div class="actor-image">
            <img src="{{actorImage}}" alt="{{actorName}}" />
        </div>
        <div class="actor-details">
            <h3 class="actor-name">{{actorName}}</h3>
            {{#if targetName}}
            <p class="hint">Pointing out <strong>{{targetName}}</strong> {{#if targetDC}}(DC {{targetDC}}){{/if}} to allies who can't see it</p>
            {{else}}
            <p class="hint">Preview which allies will gain visibility of pointed-out targets</p>
            {{/if}}
        </div>
    </div>

    <!-- Encounter Filter Section -->
    <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.ONLY_SHOW_ENCOUNTER_TOOLTIP'}}" />
            <span class="encounter-filter-label">{{localize "PF2E_VISIONER.SEEK_AUTOMATION.ENCOUNTER_ONLY"}}</span>
        </label>
        {{/if}}

            <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>
        <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_DOCUMENT_TOOLTIP'}}" />
            <span class="encounter-filter-label">Hide Foundry-hidden tokens</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_VISIBILITY_CHANGES'}}" />
            <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.SHOW_ONLY_CHANGES_LABEL"}}</span>
        </label>
    </div>

        <!-- Bulk Override Bar -->
        {{#if bulkOverrideStates}}
            {{> "pf2e-visioner.bulk-override"}}
        {{/if}}
    <!-- Results Table -->
    <div class="results-table-container">
        <table class="point-out-results-table">
            <thead>
                <tr>
                    <th class="token-image">{{localize "PF2E_VISIONER.UI.TOKEN"}}</th>
                    <th class="token-name">{{localize "PF2E_VISIONER.UI.ALLY"}}</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}}
                <tr data-token-id="{{target.id}}" class="{{#if hasActionableChange}}actionable{{else}}no-change{{/if}}">
                                        <td class="token-image">
                                                {{#if tokenImage}}
                                                <span class="token-img-wrapper">
                                                    <img src="{{tokenImage}}" alt="{{target.name}}" />
                                                    {{#if 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>
                                                {{else}}
                                                <i class="fas fa-user"></i>
                                                {{/if}}
                                        </td>
                    <td class="token-name">
                        <strong data-tooltip="{{target.name}}">{{target.name}}</strong>
                    </td>
                    <td class="visibility-change">
                        <span class="state-icon" data-state="{{oldVisibility}}" data-tooltip="{{oldVisibilityState.label}}">
                            <i class="{{oldVisibilityState.icon}}"></i>
                        </span>
                        {{#if changed}}
                        <i class="fas fa-arrow-right visibility-arrow"></i>
                        <span class="state-icon" data-state="{{newVisibility}}" data-tooltip="{{newVisibilityState.label}}">
                            <i class="{{newVisibilityState.icon}}"></i>
                        </span>
                        {{else}}
                        <span class="no-change-indicator">({{localize "PF2E_VISIONER.UI.NO_CHANGE_LABEL"}})</span>
                        {{/if}}
                    </td>
                    <td class="actions">
                        {{#if hasActionableChange}}
                          <button type="button" class="row-action-btn apply-change" data-action="applyChange" data-token-id="{{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="{{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>

    <!-- Summary and Bulk Actions -->
    <div class="point-out-preview-dialog-bulk-actions-header">
        <div class="point-out-preview-dialog-bulk-actions-info">
            <span class="point-out-preview-dialog-changes-count">{{changesCount}}</span> of <span class="point-out-preview-dialog-total-count">{{totalCount}}</span> targets will have visibility changes.
        </div>
        
        <div class="point-out-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>
