{{!--
  Visibility Tab Content - Complete visibility management interface
--}}
<div class="tab-panel visibility-section {{#if isVisibilityTab}}active{{/if}}">
  <div class="tables-content">
    {{!-- Active Timed Overrides Section --}}
    {{> "pf2e-visioner.active-timers"}}

    {{#if hasTargets}}
      
      {{!-- Player Characters Table --}}
      {{#if hasPCs}}
        <div class="table-section">
          <div class="table-section-header">
            <div class="header-left">
              <i class="fas fa-users"></i>
              <span>{{localize "PF2E_VISIONER.UI.PLAYER_CHARACTERS"}}</span>
            </div>
            <div class="bulk-actions-header">
              {{#each visibilityStates as |state|}}
                <button type="button" class="bulk-state-header {{state.cssClass}}" data-action="bulkPC{{capitalize state.key}}" data-state="{{state.value}}" data-target-type="pc" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_AS' type='PCs' state=state.label}}">
                  <i class="{{state.icon}}"></i>
                </button>
              {{/each}}
            </div>
          </div>
          {{> "pf2e-visioner.visibility-table" tokens=pcTargets sectionType="pc"}}
        </div>
      {{/if}}

      {{!-- NPCs Table --}}
      {{#if hasNPCs}}
        <div class="table-section">
          <div class="table-section-header">
            <div class="header-left">
              <i class="fas fa-dragon"></i>
              <span>{{localize "PF2E_VISIONER.UI.NPCS_LABEL"}}</span>
            </div>
            <div class="bulk-actions-header">
              {{#each visibilityStates as |state|}}
                <button type="button" class="bulk-state-header {{state.cssClass}}" data-action="bulkNPC{{capitalize state.key}}" data-state="{{state.value}}" data-target-type="npc" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_AS' type='NPCs' state=state.label}}">
                  <i class="{{state.icon}}"></i>
                </button>
              {{/each}}
            </div>
          </div>
          {{> "pf2e-visioner.visibility-table" tokens=npcTargets sectionType="npc"}}
        </div>
      {{/if}}

      {{!-- Hazards Table --}}
      {{#if hasHazards}}
        <div class="table-section hazards-section">
          <div class="table-section-header">
            <div class="header-left">
              <i class="fas fa-exclamation-triangle"></i>
              <span>{{localize "PF2E_VISIONER.UI.HAZARDS_LABEL"}}</span>
            </div>
            <div class="bulk-actions-header">
              <button type="button" class="bulk-state-header visibility-observed" data-action="bulkHazardsObserved" data-state="observed" data-target-type="hazards" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_AS' type='Hazards' state='Observed'}}">
                <i class="fas fa-eye"></i>
              </button>
              <button type="button" class="bulk-state-header visibility-hidden" data-action="bulkHazardsHidden" data-state="hidden" data-target-type="hazards" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_AS' type='Hazards' state='Hidden'}}">
                <i class="fas fa-eye-slash"></i>
              </button>
            </div>
          </div>
          {{> "pf2e-visioner.visibility-table" tokens=hazardTargets sectionType="hazards"}}
        </div>
      {{/if}}

      {{!-- Loot Table --}}
      {{#if hasLoots}}
        <div class="table-section loot-section">
          <div class="table-section-header">
            <div class="header-left">
              <i class="fas fa-box"></i>
              <span>{{localize "PF2E_VISIONER.UI.LOOT_LABEL"}}</span>
            </div>
            <div class="bulk-actions-header">
              <button type="button" class="bulk-state-header visibility-observed" data-action="bulkLootObserved" data-state="observed" data-target-type="loot" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_AS' type='Loot' state='Observed'}}">
                <i class="fas fa-eye"></i>
              </button>
              <button type="button" class="bulk-state-header visibility-hidden" data-action="bulkLootHidden" data-state="hidden" data-target-type="loot" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_AS' type='Loot' state='Hidden'}}">
                <i class="fas fa-eye-slash"></i>
              </button>
            </div>
          </div>
          <div class="visibility-table-container">
            <table class="visibility-table">
              {{#if showOutcomeColumn}}
                <colgroup>
                  <col class="col-w-8" />
                  <col class="col-w-15" />
                  <col class="col-w-25" />
                  <col class="col-w-18" />
                  <col class="col-w-12" />
                  <col class="col-w-22" />
                </colgroup>
              {{else}}
              <colgroup>
                <col class="col-w-8" />
                <col class="col-w-18" />
                <col class="col-w-32" />
                <col class="col-w-20" />
                <col class="col-w-22" />
              </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 lootTargets as |target|}}
                  <tr class="token-row npc-row" 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}}
                      </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}}
                        <input type="hidden" name="visibility.{{target.id}}" value="{{target.currentVisibilityState}}" />
                      </div>
                    </td>
                    <td class="current-state">
                      {{#each target.visibilityStates as |state|}}
                        {{#if state.selected}}
                          <span class="state-indicator {{state.cssClass}}">
                            <i class="{{state.icon}}"></i>
                            {{state.label}}
                          </span>
                        {{/if}}
                      {{/each}}
                    </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>
          </div>
        </div>
      {{/if}}

      {{!-- Hidden Walls Table --}}
      {{#if includeWalls}}
        <div class="table-section walls-section">
          <div class="table-section-header">
            <div class="header-left">
              <i class="fas fa-grip-lines-vertical"></i>
              <span>{{localize "PF2E_VISIONER.UI.HIDDEN_WALLS_LABEL"}}</span>
            </div>
            <div class="bulk-actions-header">
              <button type="button" class="bulk-state-header visibility-observed" data-action="bulkWallsObserved" data-state="observed" data-target-type="walls" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_WALLS_AS' state='Observed'}}">
                <i class="fas fa-eye"></i>
              </button>
              <button type="button" class="bulk-state-header visibility-hidden" data-action="bulkWallsHidden" data-state="hidden" data-target-type="walls" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_WALLS_AS' state='Hidden'}}">
                <i class="fas fa-eye-slash"></i>
              </button>
            </div>
          </div>
          <div class="visibility-table-container">
            <table class="visibility-table">
              <colgroup>
                <col class="col-w-10" />
                <col class="col-w-30" />
                <col class="col-w-20" />
                <col class="col-w-30" />
              </colgroup>
              <thead>
                <tr>
                  <th class="token-image">{{localize "PF2E_VISIONER.UI.WALL_HEADER"}}</th>
                  <th class="token-name">{{localize "PF2E_VISIONER.UI.IDENTIFIER"}}</th>
                  <th class="visibility-state">{{localize "PF2E_VISIONER.TOKEN_MANAGER.VISIBILITY_STATE"}}</th>
                  <th class="dc-column">{{localize "PF2E_VISIONER.UI.DC"}}</th>
                </tr>
              </thead>
              <tbody>
                {{#each wallTargets as |w|}}
                  <tr class="token-row wall-row" data-wall-id="{{w.id}}">
                    <td class="token-image">
                      <img src="{{w.img}}" data-tooltip="{{#if (eq w.doorType 2)}}Secret Door{{else if (eq w.doorType 1)}}Door{{else}}Wall{{/if}}" width="28" height="28" />
                    </td>
                    <td class="token-name">
                      <strong>{{w.identifier}}</strong>
                    </td>
                    <td class="visibility-state">
                      <div class="icon-selection" data-target="{{w.id}}">
                        {{#each w.visibilityStates as |state|}}
                          <button type="button" class="state-icon {{#if state.selected}}selected{{/if}} {{state.cssClass}}" 
                                  data-state="{{state.value}}" data-target="{{w.id}}" 
                                  data-tooltip="{{state.label}}">
                            <i class="{{state.icon}}"></i>
                          </button>
                        {{/each}}
                        <input type="hidden" name="walls.{{w.id}}" value="{{w.currentVisibilityState}}" />
                      </div>
                    </td>
                    <td class="dc-column"><span class="dc-value">{{w.dc}}</span></td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
          </div>
        </div>
      {{/if}}
      
    {{else}}
      <div class="no-targets">
        <p>{{localize "PF2E_VISIONER.TOKEN_MANAGER.NO_TOKENS"}}</p>
      </div>
    {{/if}}
  </div>
</div>