scrying-pool/templates/directors-board.hbs

{{!-- Director's Board — GM camera-management overview window --}}
<div class="directors-board__inner">

  {{!-- Drag grip --}}
  <div class="directors-board__grip" data-action="drag-grip" aria-hidden="true">
    <i class="fas fa-grip-lines"></i>
  </div>

  <button type="button"
          class="directors-board__close-btn"
          data-action="close"
          aria-label="{{localize "scrying-pool.directorsBoard.close"}}"
          data-tooltip="{{localize "scrying-pool.directorsBoard.close"}}">×</button>

  <section class="scrying-pool directors-board__content"
           role="list"
           aria-label="{{localize "scrying-pool.directorsBoard.title"}}">

    {{#unless isEmpty}}
      {{#each participants}}
        {{> "modules/scrying-pool/templates/participant-card.hbs" shape=../tileShape}}
      {{/each}}
    {{else}}
      <p class="directors-board__empty" role="listitem">
        {{localize "scrying-pool.directorsBoard.empty"}}
      </p>
    {{/unless}}

  </section>

  <div class="directors-board__bulk-bar">
    <button type="button" class="directors-board__bulk-btn" data-action="show-all"
            data-tooltip="{{localize "scrying-pool.directorsBoard.bulk.showAll"}}">
      <i class="fas fa-eye" aria-hidden="true"></i>
      {{localize "scrying-pool.directorsBoard.bulk.showAll"}}
    </button>
    <button type="button" class="directors-board__bulk-btn" data-action="hide-all"
            data-tooltip="{{localize "scrying-pool.directorsBoard.bulk.hideAll"}}">
      <i class="fas fa-eye-slash" aria-hidden="true"></i>
      {{localize "scrying-pool.directorsBoard.bulk.hideAll"}}
    </button>
    {{#if hasUndo}}
    <button type="button" class="directors-board__bulk-btn directors-board__bulk-btn--undo" data-action="undo"
            data-tooltip="{{localize "scrying-pool.directorsBoard.bulk.undo"}}">
      <i class="fas fa-undo" aria-hidden="true"></i>
      {{localize "scrying-pool.directorsBoard.bulk.undo"}}
    </button>
    {{/if}}
    {{#if hasRestore}}
    <button type="button" class="directors-board__bulk-btn directors-board__bulk-btn--restore" data-action="restore-spotlight"
            data-tooltip="{{localize "scrying-pool.directorsBoard.bulk.restore"}}">
      <i class="fas fa-star" aria-hidden="true"></i>
      {{localize "scrying-pool.directorsBoard.bulk.restore"}}
    </button>
    {{/if}}
    <button type="button" class="directors-board__help-btn" data-action="open-shortcut-panel"
            aria-label="{{localize "scrying-pool.directorsBoard.shortcuts.openPanel"}}"
            data-tooltip="{{localize "scrying-pool.directorsBoard.shortcuts.openPanel"}}">?</button>
  </div>

  {{!-- Dock layout selector --}}
  <div class="directors-board__dock-layout-bar" role="toolbar" aria-label="{{localize "scrying-pool.directorsBoard.dockLayout.label"}}">
    <span class="directors-board__dock-layout-label">{{localize "scrying-pool.directorsBoard.dockLayout.label"}}</span>
    <div class="directors-board__dock-layout-group">
      {{#each dockLayouts}}
      <button type="button"
              class="directors-board__dock-layout-btn{{#if isActive}} is-active{{/if}}"
              data-action="set-dock-layout"
              data-layout="{{key}}"
              data-tooltip="{{label}}">
        <i class="fas {{icon}}" aria-hidden="true"></i>
        <span class="directors-board__dock-layout-size">{{size}}</span>
      </button>
      {{#if sepAfter}}
      <div class="directors-board__dock-layout-sep" role="separator" aria-hidden="true"></div>
      {{/if}}
      {{/each}}
    </div>
  </div>

  {{!-- Tile shape selector --}}
  <div class="directors-board__tile-shape-bar" role="toolbar" aria-label="Tile shape">
    <span class="directors-board__tile-shape-label">Shape</span>
    <div class="directors-board__tile-shape-group">
      {{#each tileShapes}}
      <button type="button"
              class="directors-board__tile-shape-btn{{#if isActive}} is-active{{/if}}"
              data-action="set-tile-shape"
              data-shape="{{key}}"
              data-tooltip="{{label}}">
        <i class="fas {{icon}}" aria-hidden="true"></i>
      </button>
      {{/each}}
    </div>
  </div>

  {{!-- Tile border controls --}}
  <div class="directors-board__tile-border-bar" role="toolbar" aria-label="Tile border">
    <span class="directors-board__tile-border-label">Border</span>
    <div class="directors-board__tile-border-group">
      {{#each tileBorderWidths}}
      <button type="button"
              class="directors-board__tile-border-btn{{#if isActive}} is-active{{/if}}"
              data-action="set-tile-border-width"
              data-width="{{value}}"
              data-tooltip="{{label}}">{{label}}</button>
      {{/each}}
    </div>
    <input type="color"
           class="directors-board__tile-border-color"
           data-action="set-tile-border-color"
           value="{{tileBorderColor}}"
           data-tooltip="Border color" />
  </div>

  {{!-- Story 5.2: Video widget width customization --}}
  <div class="directors-board__widget-width-bar" role="toolbar" aria-label="{{localize 'scrying-pool.directorsBoard.widgetWidth.label'}}">
    <span class="directors-board__widget-width-label">{{localize "scrying-pool.directorsBoard.widgetWidth.label"}}</span>
    <div class="directors-board__widget-width-group">
      <div class="directors-board__widget-width-row">
        <span>{{localize "scrying-pool.directorsBoard.widgetWidth.small"}}</span>
        <select class="directors-board__widget-width-select" data-action="set-widget-width-sm" data-selected="{{widgetWidthSm}}">
          {{#each widthOptions}}
            <option value="{{this.value}}">{{this.label}}</option>
          {{/each}}
        </select>
      </div>
      <div class="directors-board__widget-width-row">
        <span>{{localize "scrying-pool.directorsBoard.widgetWidth.large"}}</span>
        <select class="directors-board__widget-width-select" data-action="set-widget-width-md" data-selected="{{widgetWidthMd}}">
          {{#each widthOptions}}
            <option value="{{this.value}}">{{this.label}}</option>
          {{/each}}
        </select>
      </div>
    </div>
  </div>

  <footer class="directors-board__footer">
    <div class="directors-board__footer-group directors-board__footer-group--presets">
      <button type="button" class="directors-board__footer-btn" data-action="save-preset"
              data-tooltip="{{localize "scrying-pool.directorsBoard.footer.savePreset"}}">
        <i class="fas fa-save" aria-hidden="true"></i>
        {{localize "scrying-pool.directorsBoard.footer.savePreset"}}
      </button>
      <button type="button" class="directors-board__footer-btn" data-action="load-preset"
              data-tooltip="{{localize "scrying-pool.directorsBoard.footer.loadPreset"}}"
              {{#unless hasPresets}}disabled{{/unless}}>
        <i class="fas fa-folder-open" aria-hidden="true"></i>
        {{localize "scrying-pool.directorsBoard.footer.loadPreset"}}
      </button>
      <button type="button" class="directors-board__footer-btn directors-board__footer-btn--secondary" data-action="export-presets"
              data-tooltip="{{localize "scrying-pool.directorsBoard.footer.exportPresets"}}">
        <i class="fas fa-file-export" aria-hidden="true"></i>
        {{localize "scrying-pool.directorsBoard.footer.exportPresets"}}
      </button>
      <button type="button" class="directors-board__footer-btn directors-board__footer-btn--secondary" data-action="import-presets"
              data-tooltip="{{localize "scrying-pool.directorsBoard.footer.importPresets"}}">
        <i class="fas fa-file-import" aria-hidden="true"></i>
        {{localize "scrying-pool.directorsBoard.footer.importPresets"}}
      </button>
    </div>
    <div class="directors-board__footer-group directors-board__footer-group--controls">
      <button type="button" class="directors-board__footer-btn directors-board__footer-btn--auto-apply" data-action="toggle-preset-panel"
              data-tooltip="{{localize "scrying-pool.directorsBoard.footer.autoApplySettings"}}">
        <i class="fas fa-magic" aria-hidden="true"></i>
        {{localize "scrying-pool.directorsBoard.footer.autoApplySettings"}}
      </button>
      <div class="directors-board__footer-sep" role="separator" aria-hidden="true"></div>
      <button type="button" class="directors-board__footer-btn directors-board__footer-btn--av{{#if avModeEnabled}} directors-board__footer-btn--av-active{{/if}}" data-action="toggle-av-mode"
              data-tooltip="{{#if avModeEnabled}}{{localize "scrying-pool.directorsBoard.footer.avModeDisable"}}{{else}}{{localize "scrying-pool.directorsBoard.footer.avModeEnable"}}{{/if}}">
        {{#if avModeEnabled}}
          <i class="fas fa-video-slash" aria-hidden="true"></i>
          {{localize "scrying-pool.directorsBoard.footer.avModeDisable"}}
        {{else}}
          <i class="fas fa-video" aria-hidden="true"></i>
          {{localize "scrying-pool.directorsBoard.footer.avModeEnable"}}
        {{/if}}
      </button>
      <button type="button" class="directors-board__footer-btn directors-board__footer-btn--av-config" data-action="open-av-config"
              data-tooltip="{{localize "scrying-pool.directorsBoard.footer.avConfigTitle"}}">
        <i class="fas fa-sliders-h" aria-hidden="true"></i>
        {{localize "scrying-pool.directorsBoard.footer.avConfig"}}
      </button>
    </div>
  </footer>

  {{!-- Scene Preset Panel - rendered via JavaScript, not Handlebars --}}
  {{!-- Panel is appended dynamically in DirectorsBoard._appendPresetPanel() --}}

</div>