<form class="pf2e-visioner-wall-manager">
  <div class="header-actions">
    <span class="spacer"></span>
  </div>

  <!-- Search and Filter Controls -->
  <div class="search-filter-container">
    <div class="inline-flex">
      <i class="fas fa-search"></i>
      <input type="text" id="wall-search" placeholder="{{localize 'PF2E_VISIONER.UI.SEARCH_WALL_PLACEHOLDER'}}" />
    </div>
    <div class="inline-flex">
      <label for="wall-type-filter">Type:</label>
      <select id="wall-type-filter">
        <option value="">{{localize "PF2E_VISIONER.UI.ALL_TYPES"}}</option>
        <option value="0">{{localize "PF2E_VISIONER.UI.WALLS"}}</option>
        <option value="1">{{localize "PF2E_VISIONER.UI.DOORS"}}</option>
        <option value="2">{{localize "PF2E_VISIONER.UI.SECRET_DOORS"}}</option>
      </select>
    </div>
    <div class="inline-flex">
      <label for="hidden-filter">Hidden:</label>
      <select id="hidden-filter">
        <option value="">{{localize "PF2E_VISIONER.UI.ALL"}}</option>
        <option value="true">{{localize "PF2E_VISIONER.UI.HIDDEN_ONLY"}}</option>
        <option value="false">{{localize "PF2E_VISIONER.UI.NON_HIDDEN_ONLY"}}</option>
      </select>
    </div>
    <div class="inline-flex">
      <label for="cover-filter">Cover:</label>
      <select id="cover-filter">
        <option value="">{{localize "PF2E_VISIONER.UI.ALL_COVER_TYPES"}}</option>
        <option value="auto">{{localize "PF2E_VISIONER.UI.AUTO_DETECTION"}}</option>
        <option value="none">{{localize "PF2E_VISIONER.UI.NO_COVER_OPTION"}}</option>
        <option value="lesser">{{localize "PF2E_VISIONER.UI.LESSER_MAX"}}</option>
        <option value="standard">{{localize "PF2E_VISIONER.UI.STANDARD_MAX"}}</option>
        <option value="greater">{{localize "PF2E_VISIONER.UI.GREATER_MAX"}}</option>
      </select>
    </div>
    <button type="button" id="clear-filters" class="visioner-btn"><i class="fas fa-times"></i> Clear</button>
    <div class="bulk-hidden-buttons">
      <button type="button" class="visioner-icon-btn" data-action="bulkHiddenOn" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_WALLS_HIDDEN_BULK'}}">
        <i class="fas fa-eye-slash icon-color-text-primary"></i>
      </button>
      <button type="button" class="visioner-icon-btn" data-action="bulkHiddenOff" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_WALLS_NON_HIDDEN_BULK'}}">
        <i class="fas fa-eye icon-color-text-primary"></i>
      </button>
    </div>
    <div class="bulk-cover-buttons">
      <button type="button" class="visioner-icon-btn" data-action="bulkCoverAuto" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_WALLS_AUTO_COVER'}}">
        <i class="fas fa-bolt-auto icon-color-gray"></i>
      </button>
      <button type="button" class="visioner-icon-btn" data-action="bulkCoverNone" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_WALLS_NO_COVER'}}">
        <i class="fas fa-shield-slash icon-color-cover-none"></i>
      </button>
      <button type="button" class="visioner-icon-btn" data-action="bulkCoverLesser" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_WALLS_LESSER_COVER'}}">
        <i class="fa-regular fa-shield icon-color-cover-lesser"></i>
      </button>
      <button type="button" class="visioner-icon-btn" data-action="bulkCoverStandard" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_WALLS_STANDARD_COVER'}}">
        <i class="fas fa-shield-alt icon-color-cover-standard"></i>
      </button>
      <button type="button" class="visioner-icon-btn" data-action="bulkCoverGreater" data-tooltip="{{localize 'PF2E_VISIONER.UI.SET_ALL_WALLS_GREATER_COVER'}}">
        <i class="fas fa-shield icon-color-cover-greater"></i>
      </button>
    </div>
  </div>

  <!-- Scrollable Table Container -->
  <div class="table-container">
    <table class="visibility-table sticky-header-table">
    <thead class="sticky-header">
      <tr class="sticky-row">
        <th>{{localize "PF2E_VISIONER.UI.TYPE"}}</th>
        <th class="col-w-16">{{localize "PF2E_VISIONER.UI.IDENTIFIER"}}</th>
        <th class="col-w-10">{{localize "PF2E_VISIONER.UI.HIDDEN_HEADER"}}</th>
        <th class="col-w-30">{{localize "PF2E_VISIONER.UI.COVER"}}</th>
        <th class="col-w-10">{{localize "PF2E_VISIONER.UI.STEALTH_DC"}}</th>
        <th class="col-w-8">{{localize "PF2E_VISIONER.UI.SELECT"}}</th>
        <th class="col-w-26">{{localize "PF2E_VISIONER.UI.WALL_ID"}}</th>
      </tr>
    </thead>
    <tbody>
      {{#each rows as |w|}}
        <tr data-wall-id="{{w.id}}">
          <td class="text-center">
            <div class="wall-type-container">
              <button type="button" class="wall-type-button" data-wall-id="{{w.id}}" data-current-type="{{w.doorType}}" data-tooltip="{{localize 'PF2E_VISIONER.UI.WALL_TYPE_CYCLE_TOOLTIP'}}">
                <img src="{{w.img}}" width="24" height="24" alt="{{#if (eq w.doorType 2)}}Secret Door{{else if (eq w.doorType 1)}}Door{{else}}Wall{{/if}}" />
              </button>
              <input type="hidden" name="wall.{{w.id}}.doorType" value="{{w.doorType}}" />
            </div>
          </td>
          <td>
            <input type="text" name="wall.{{w.id}}.identifier" value="{{w.identifier}}" placeholder="{{localize 'PF2E_VISIONER.UI.WALL_IDENTIFIER_PLACEHOLDER'}}" />
          </td>
          <td class="text-center">
            <input type="checkbox" name="wall.{{w.id}}.hiddenWall" {{#if w.hiddenWall}}checked{{/if}} data-tooltip="{{localize 'PF2E_VISIONER.UI.WALL_HIDDEN_TOOLTIP'}}" />
          </td>
          <td class="text-center">
            <div class="cover-override-buttons">
              <button type="button" class="visioner-icon-btn {{#unless w.coverOverride}}active{{/unless}}" 
                      data-action="setCoverOverride" data-wall-id="{{w.id}}" data-cover-override="auto" 
                      data-tooltip="{{localize 'PF2E_VISIONER.UI.WALL_COVER_AUTO_SHORT'}}">
                <i class="fas fa-bolt-auto icon-color-gray"></i>
              </button>
              <button type="button" class="visioner-icon-btn {{#if (eq w.coverOverride 'none')}}active{{/if}}" 
                      data-action="setCoverOverride" data-wall-id="{{w.id}}" data-cover-override="none" 
                      data-tooltip="{{localize 'PF2E_VISIONER.UI.WALL_COVER_NONE_SHORT'}}">
                <i class="fas fa-shield-slash icon-color-cover-none"></i>
              </button>
              <button type="button" class="visioner-icon-btn {{#if (eq w.coverOverride 'lesser')}}active{{/if}}" 
                      data-action="setCoverOverride" data-wall-id="{{w.id}}" data-cover-override="lesser" 
                      data-tooltip="{{localize 'PF2E_VISIONER.UI.WALL_COVER_LESSER_SHORT'}}">
                <i class="fa-regular fa-shield icon-color-cover-lesser"></i>
              </button>
              <button type="button" class="visioner-icon-btn {{#if (eq w.coverOverride 'standard')}}active{{/if}}" 
                      data-action="setCoverOverride" data-wall-id="{{w.id}}" data-cover-override="standard" 
                      data-tooltip="{{localize 'PF2E_VISIONER.UI.WALL_COVER_STANDARD_SHORT'}}">
                <i class="fas fa-shield-alt icon-color-cover-standard"></i>
              </button>
              <button type="button" class="visioner-icon-btn {{#if (eq w.coverOverride 'greater')}}active{{/if}}" 
                      data-action="setCoverOverride" data-wall-id="{{w.id}}" data-cover-override="greater" 
                      data-tooltip="{{localize 'PF2E_VISIONER.UI.WALL_COVER_GREATER_SHORT'}}">
                <i class="fas fa-shield icon-color-cover-greater"></i>
              </button>
            </div>
          </td>
          <td class="text-center">
            <input type="number" min="0" step="1" name="wall.{{w.id}}.dc" value="{{w.dc}}" class="wall-dc-input" placeholder="{{localize 'PF2E_VISIONER.UI.WALL_DC_PLACEHOLDER'}}" />
          </td>
          <td class="text-center">
            <button type="button" class="visioner-icon-btn" data-action="selectWall" data-wall-id="{{w.id}}" data-tooltip="{{localize 'PF2E_VISIONER.UI.SELECT_WALL_AND_PAN'}}">
              <i class="fas fa-crosshairs icon-color-text-primary"></i>
            </button>
          </td>
          <td><code>{{w.id}}</code></td>
        </tr>
      {{/each}}
    </tbody>
  </table>
  </div>
  <div class="wall-count">Total: <span id="wall-count-total">{{rows.length}}</span> | Showing: <span id="wall-count-visible">{{rows.length}}</span></div>

  <footer class="sheet-footer">
    <button type="button" class="visioner-btn visioner-primary" data-action="apply"><i class="fas fa-check"></i> Apply</button>
    <button type="button" class="visioner-btn" data-action="close"><i class="fas fa-times"></i> Close</button>
  </footer>
</form>


