{{!--
  Simplified Observer Information - No complex Handlebars helpers
--}}
<div class="observer-info">
  <div class="observer-image">
    <img src="{{observer.img}}" data-tooltip="{{observer.name}}" />
  </div>
  <div class="observer-content">
    <div class="observer-main">
      <button type="button" class="mode-toggle {{#if isObserverMode}}observer-active{{else}}target-active{{/if}}" data-action="toggleMode" data-tooltip="{{localize 'PF2E_VISIONER.UI.TOGGLE_MODE_TOOLTIP'}}" {{#if (or lootObserver hazardObserver)}}disabled{{/if}}>
        {{#if (or lootObserver hazardObserver)}}
          <div class="toggle-option active">
            <i class="fas fa-user-secret"></i>
            <span>{{localize "PF2E_VISIONER.UI.TARGET_HEADER"}}</span>
          </div>
        {{else}}
          <div class="toggle-option {{#if isObserverMode}}active{{/if}}">
            <i class="fas fa-eye"></i>
            <span>{{localize "PF2E_VISIONER.UI.OBSERVER_HEADER"}}</span>
          </div>
          <div class="toggle-divider">|</div>
          <div class="toggle-option {{#if isTargetMode}}active{{/if}}">
            <i class="fas fa-user-secret"></i>
            <span>{{localize "PF2E_VISIONER.UI.TARGET_HEADER"}}</span>
          </div>
        {{/if}}
      </button>
      <h3 class="observer-name">{{observer.name}}</h3>
      {{#if isCoverTab}}
        {{#if isObserverMode}}
          <p class="hint">How much cover other tokens have against <em>{{observer.name}}</em></p>
        {{else}}
          <p class="hint">How much cover <em>{{observer.name}}</em> has against other tokens</p>
        {{/if}}
      {{else}}
        {{#if isObserverMode}}
          <p class="hint">How <em>{{observer.name}}</em> sees other placeables</p>
        {{else}}
          <p class="hint">How other placeables see <em>{{observer.name}}</em></p>
        {{/if}}
      {{/if}}
      
      {{!-- 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="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>
        {{#if isObserverMode}}
          {{#if isVisibilityTab}}
            <label class="ignore-walls-filter-checkbox">
              <input type="checkbox" {{#if ignoreWalls}}checked{{/if}} data-action="toggleIgnoreWalls" data-tooltip="{{localize 'PF2E_VISIONER.UI.IGNORE_WALLS'}}" />
              <span class="encounter-filter-label">{{localize "PF2E_VISIONER.UI.IGNORE_WALLS"}}</span>
            </label>
          {{/if}}
        {{/if}}
      </div>
    </div>
  </div>

  <div class="observer-tools">
    <div class="icon-tab-navigation">
      <button type="button" class="icon-tab-button {{#if isVisibilityTab}}active{{/if}}" data-action="toggleTab" data-tab="visibility" data-tooltip="{{localize "PF2E_VISIONER.TOKEN_MANAGER.VISIBILITY_TAB"}}">
        <i class="fas fa-eye"></i>
      </button>
      {{#unless hideCoverTab}}
        <button type="button" class="icon-tab-button {{#if isCoverTab}}active{{/if}}" data-action="toggleTab" data-tab="cover" data-tooltip="{{localize "PF2E_VISIONER.TOKEN_MANAGER.COVER_TAB"}}">
          <i class="fas fa-shield-alt"></i>
        </button>
      {{/unless}}
    </div>

    <div class="legend-panel">
      {{#if isVisibilityTab}}
        <div class="visibility-legend">
          {{#each visibilityStates as |state|}}
            <div class="legend-item" data-tooltip="{{state.label}}">
              <i class="{{state.icon}} {{state.cssClass}}"></i>
              <span>{{state.label}}</span>
            </div>
          {{/each}}
        </div>
      {{else}}
        <div class="cover-legend">
          {{#each coverStates as |state|}}
            <div class="legend-item" data-tooltip="{{state.label}}{{#if state.bonusAC}} (+{{state.bonusAC}} AC{{#if state.bonusReflex}}, +{{state.bonusReflex}} Reflex{{/if}}{{#if state.bonusStealth}}, +{{state.bonusStealth}} Stealth{{/if}}){{/if}}">
              <i class="{{state.icon}} {{state.cssClass}}"></i>
              <span>{{state.label}}</span>
            </div>
          {{/each}}
        </div>
      {{/if}}
    </div>
  </div>
</div>