{{!-- ScryingPoolStrip — floating GM control strip --}}
<div class="scrying-pool scrying-pool-strip sp-layout-{{dockLayout}}{{#if isExpanded}} is-expanded{{/if}}"
     role="complementary"
     aria-label="Scrying Pool">

  {{!-- First-open tip (right-click affordance) --}}
  {{#if showFirstOpenTip}}
    <p class="sp-strip__first-tip">
      <i class="fas fa-info-circle" aria-hidden="true"></i>
      Right-click a participant to hide them from the table.
    </p>
  {{/if}}

  {{!-- Toolbar: grip + toggle + Director's Board + close on one line --}}
  <div class="sp-strip__toolbar">
    <div class="sp-strip__grip" data-action="drag-grip" aria-hidden="true">
      <i class="fas fa-grip-lines"></i>
    </div>

    <button class="sp-strip__toggle" data-action="toggle-expanded"
            aria-label="{{#if isExpanded}}Collapse Scrying Pool{{else}}Expand Scrying Pool{{/if}}"
            aria-expanded="{{isExpanded}}"
            data-tooltip="{{#if isExpanded}}Collapse{{else}}Expand{{/if}}">
      <i class="fas fa-chevron-{{#if isExpanded}}left{{else}}right{{/if}}"></i>
    </button>

    {{#if isGM}}
      <button class="sp-strip__directors-board-cta" data-action="open-directors-board"
              aria-label="Open Director's Board"
              data-tooltip="{{localize "scrying-pool.directorsBoard.openButton"}}">
        <i class="fas fa-border-all" aria-hidden="true"></i>
      </button>
    {{/if}}

    <span class="sp-strip__toolbar-spacer"></span>

    <button class="sp-strip__close-btn" data-action="close-strip"
            aria-label="Close Scrying Pool"
            data-tooltip="Close">×</button>
  </div>

  {{!-- Participant list --}}
  <ul class="sp-strip__participants" role="list">
    {{#if isEmpty}}
      {{!-- EmptyStatePanel --}}
      <li class="sp-strip__empty-state" role="listitem">
        <i class="fas fa-eye sp-empty__icon" aria-hidden="true"></i>
        <span class="sp-empty__text">No participants yet</span>
      </li>
    {{else}}
      {{#each participants}}
        <li class="sp-strip__participant-item" role="listitem">
          {{!-- ParticipantAvatar (44×44px container) --}}
          <button class="sp-participant-avatar sp-state-{{state}}{{#if hasPendingOp}} sp-state-pending{{/if}}{{#if isFocused}} sp-state-focused{{/if}} sp-shape-{{../tileShape}}"
                  data-user-id="{{userId}}"
                  data-action="open-popover"
                  role="button"
                  aria-label="{{name}} — {{stateLabel}}"
                  data-tooltip="{{name}} — {{stateLabel}}"
                  aria-pressed="false" style="width: {{../widgetWidth}}px; min-width: {{../widgetWidth}}px;">

            <div class="sp-avatar__shell">
              <div class="sp-avatar__shape">
                {{!-- Video container for stream-access mode (full AV replacement) --}}
                {{#if hasStreamAccess}}
                  <div class="sp-participant-video" aria-hidden="true"></div>
                {{/if}}

                {{!-- Avatar image (32px rounded) - shown as fallback when no video --}}
                <img class="sp-avatar__img" src="{{avatarSrc}}" alt="" aria-hidden="true" />

                {{!-- Corner badge (12px bottom-right) --}}
                <span class="sp-avatar__corner-badge" aria-hidden="true"></span>
              </div>
            </div>

            {{!-- Expanded view: name + state rows (vertical-md) --}}
            {{#if ../isExpanded}}
              <span class="sp-avatar__name">{{name}}</span>
              <span class="sp-avatar__state-label">{{stateLabel}}</span>
            {{else if ../showName}}
              {{!-- Horizontal-md / mosaic-md: name below avatar --}}
              <span class="sp-avatar__name">{{name}}</span>
            {{/if}}
          </button>
        </li>
      {{/each}}
    {{/if}}
  </ul>

  {{!-- StripOverlayLayer — owns ActionPopover + ConfirmationBar --}}
  <div class="sp-strip__overlay-layer"
       aria-hidden="true"
       style="position: absolute; inset: 0; pointer-events: none; overflow: visible;"></div>
</div>
