{{!--
  Visibility Table Component
--}}
<table class="visibility-table">
  {{#if showOutcomeColumn}}
  <colgroup>
  <col class="col-w-6" />  {{!-- Token --}}
  <col class="col-w-16" /> {{!-- Name --}}
  <col class="col-w-34" /> {{!-- Visibility selection (now includes trash when present) --}}
  <col class="col-w-16" /> {{!-- Current State --}}
  <col class="col-w-8" />  {{!-- DC --}}
  <col class="col-w-20" /> {{!-- Outcome --}}
  </colgroup>
  {{else}}
  <colgroup>
  <col class="col-w-6" />  {{!-- Token --}}
  <col class="col-w-20" /> {{!-- Name --}}
  <col class="col-w-38" /> {{!-- Visibility selection (now includes trash when present) --}}
  <col class="col-w-16" /> {{!-- Current State --}}
  <col class="col-w-20" /> {{!-- DC --}}
  </colgroup>
  {{/if}}
  <thead>
    <tr>
      <th class="token-image">{{localize "PF2E_VISIONER.UI.TOKEN"}}</th>
      <th class="token-name">{{localize "PF2E_VISIONER.UI.NAME"}}</th>
      <th class="visibility-state">{{localize "PF2E_VISIONER.TOKEN_MANAGER.VISIBILITY_STATE"}}</th>
      <th class="current-state">{{localize "PF2E_VISIONER.UI.CURRENT_STATE"}}</th>
      <th class="dc-column">{{#if isTargetMode}}Perception DC{{else}}Stealth DC{{/if}}</th>
      {{#if showOutcomeColumn}}
        <th class="outcome-column">{{localize "PF2E_VISIONER.UI.OUTCOME"}}</th>
      {{/if}}
    </tr>
  </thead>
  <tbody>
    {{#each tokens as |target|}}
  <tr class="token-row {{sectionType}}-row {{#if target.dispositionClass}}{{target.dispositionClass}}-npc{{/if}}" data-token-id="{{target.id}}" data-foundry-hidden="{{target.isFoundryHidden}}">
        <td class="token-image">
          <div class="token-img-wrapper">
            <img src="{{target.img}}" width="28" height="28" />
            {{#if target.isFoundryHidden}}
              <span class="foundry-hidden-indicator" data-tooltip="{{localize 'PF2E_VISIONER.UI.FOUNDRY_HIDDEN'}}">
                <i class="fas fa-eye-slash"></i>
              </span>
            {{/if}}
            {{#if target.hasActiveTimer}}
              <span class="timer-badge" data-tooltip="{{target.timerTooltip}}: {{target.timerDisplay}}" data-observer-id="{{../observer.id}}" data-target-id="{{target.id}}">
                <i class="fas fa-clock"></i>
              </span>
            {{/if}}
          </div>
        </td>
        <td class="token-name">
          <strong>{{target.name}}</strong>
        </td>
        <td class="visibility-state">
          <div class="icon-selection" data-target="{{target.id}}">
            {{#each target.visibilityStates as |state|}}
              <button type="button" class="state-icon {{#if state.selected}}selected{{/if}} {{state.cssClass}}" 
                      data-state="{{state.value}}" data-target="{{target.id}}" 
                      data-tooltip="{{state.label}}">
                <i class="{{state.icon}}"></i>
              </button>
            {{/each}}
            <button type="button" class="row-timer-toggle {{#if target.hasRowTimer}}active{{/if}}" 
                    data-action="toggleRowTimer" data-target-id="{{target.id}}"
                    data-tooltip="{{#if target.hasRowTimer}}{{target.rowTimerDisplay}} - Click to clear{{else}}{{localize 'PF2E_VISIONER.TIMED_OVERRIDE.SET_DURATION_FOR_ROW'}}{{/if}}">
              <i class="fas fa-clock"></i>
              {{#if target.hasRowTimer}}<span class="row-timer-label">{{target.rowTimerDisplay}}</span>{{/if}}
            </button>
            <input type="hidden" name="visibility.{{target.id}}" value="{{#if target.isAvsControlled}}avs{{else}}{{target.currentVisibilityState}}{{/if}}" />
          </div>
        </td>
        <td class="current-state">
          {{#if target.isAvsControlled}}
            {{!-- When AVS is controlling, show the actual current state with AVS chip --}}
            {{#if (eq target.currentVisibilityState "observed")}}
              <span class="state-indicator visibility-observed" data-tooltip="{{localize 'PF2E_VISIONER.MECHANICAL_EFFECTS.VISIBLE_TOOLTIP'}}">
                <i class="fas fa-eye"></i>
                Observed
                {{#unless target.isNonAvsToken}}
                <span class="avs-chip">
                  <i class="fas fa-bolt-auto"></i>
                  AVS
                </span>
                {{/unless}}
              </span>
            {{else if (eq target.currentVisibilityState "concealed")}}
              <span class="state-indicator visibility-concealed" data-tooltip="{{localize 'PF2E_VISIONER.MECHANICAL_EFFECTS.CONCEALED_TOOLTIP'}}">
                <i class="fas fa-cloud"></i>
                {{localize 'PF2E_VISIONER.VISIBILITY_STATES.observed_concealed'}}
                {{#unless target.isNonAvsToken}}
                <span class="avs-chip">
                  <i class="fas fa-bolt-auto"></i>
                  AVS
                </span>
                {{/unless}}
              </span>
            {{else if (eq target.currentVisibilityState "hidden")}}
              <span class="state-indicator visibility-hidden" data-tooltip="{{localize 'PF2E_VISIONER.MECHANICAL_EFFECTS.HIDDEN_TOOLTIP'}}">
                <i class="fas fa-eye-slash"></i>
                Hidden
                {{#unless target.isNonAvsToken}}
                <span class="avs-chip">
                  <i class="fas fa-bolt-auto"></i>
                  AVS
                </span>
                {{/unless}}
              </span>
            {{else if (eq target.currentVisibilityState "undetected")}}
              <span class="state-indicator visibility-undetected" data-tooltip="{{localize 'PF2E_VISIONER.MECHANICAL_EFFECTS.UNDETECTED_TOOLTIP'}}">
                <i class="fas fa-ghost"></i>
                Undetected
                {{#unless target.isNonAvsToken}}
                <span class="avs-chip">
                  <i class="fas fa-bolt-auto"></i>
                  AVS
                </span>
                {{/unless}}
              </span>
            {{else}}
              {{!-- Fallback - should not show 'avs' as a state --}}
              <span class="state-indicator visibility-observed" data-tooltip="{{localize 'PF2E_VISIONER.MECHANICAL_EFFECTS.VISIBLE_TOOLTIP'}}">
                <i class="fas fa-eye"></i>
                Observed
                {{#unless target.isNonAvsToken}}
                <span class="avs-chip">
                  <i class="fas fa-bolt-auto"></i>
                  AVS
                </span>
                {{/unless}}
              </span>
            {{/if}}
          {{else}}
            {{!-- When not AVS controlled, show the selected state --}}
            {{#each target.visibilityStates as |state|}}
              {{#if state.selected}}
                <span class="state-indicator {{state.cssClass}}"
                      {{#if (eq state.value "hidden")}}data-tooltip="{{localize 'PF2E_VISIONER.MECHANICAL_EFFECTS.HIDDEN_TOOLTIP'}}"{{/if}}
                      {{#if (eq state.value "concealed")}}data-tooltip="{{localize 'PF2E_VISIONER.MECHANICAL_EFFECTS.CONCEALED_TOOLTIP'}}"{{/if}}
                      {{#if (eq state.value "undetected")}}data-tooltip="{{localize 'PF2E_VISIONER.MECHANICAL_EFFECTS.UNDETECTED_TOOLTIP'}}"{{/if}}
                      {{#if (eq state.value "observed")}}data-tooltip="{{localize 'PF2E_VISIONER.MECHANICAL_EFFECTS.VISIBLE_TOOLTIP'}}"{{/if}}>
                  <i class="{{state.icon}}"></i>
                  {{state.label}}
                </span>
              {{/if}}
            {{/each}}
          {{/if}}
        </td>
        <td class="dc-column">
          {{#if ../isTargetMode}}
            <span class="dc-value">{{target.perceptionDC}}</span>
          {{else}}
            <span class="dc-value">{{target.stealthDC}}</span>
          {{/if}}
        </td>
        {{#if ../showOutcomeColumn}}
          <td class="outcome-column">
            {{#if target.showOutcome}}
              <span class="dc-outcome {{target.outcomeClass}}" data-tooltip="{{target.outcomeLabel}}">{{target.outcomeLabel}}</span>
            {{/if}}
          </td>
        {{/if}}
      </tr>
    {{/each}}
  </tbody>
</table>