<div class="hg-launcher-body">

  <div class="hg-field-row hg-protocol-row">
    <div class="hg-game-preview" data-preview></div>
    <div class="hg-field">
      <label>DEFAULT PROTOCOL</label>
      <select name="gameId">
        {{#each games}}
          <option value="{{this.id}}">{{this.label}}</option>
        {{/each}}
      </select>
    </div>
    <div class="hg-field">
      <label>INTERFACE THEME</label>
      <select name="theme">
        {{#each themes}}
          <option value="{{this.id}}" {{#if (eq this.id ../defaultTheme)}}selected{{/if}}>{{this.label}}</option>
        {{/each}}
      </select>
      <label class="hg-vtm-toggle" style="display:none">
        <span class="hg-vtm-tl">CLEAN</span>
        <input type="checkbox" name="vtmDirty" {{#if vtmDirty}}checked{{/if}}>
        <span class="hg-vtm-track"><span class="hg-vtm-thumb"></span></span>
        <span class="hg-vtm-tl">DIRTY</span>
      </label>
      <label class="hg-crt-toggle" style="display:none">
        <span class="hg-vtm-tl">CRT HUM</span>
        <input type="checkbox" name="crtHum" {{#if crtHum}}checked{{/if}}>
        <span class="hg-vtm-track"><span class="hg-vtm-thumb"></span></span>
      </label>
    </div>
  </div>

  <div class="hg-field-row">
    <div class="hg-field">
      <label>DEFAULT SKILL</label>
      <select name="skillLevel">
        {{#each skillLevels}}
          <option value="{{this.id}}" {{#if (eq this.id ../defaultSkillLevel)}}selected{{/if}}>{{this.label}}</option>
        {{/each}}
      </select>
    </div>
    <div class="hg-field">
      <label>DEFAULT ROLL OUTCOME</label>
      <select name="rollOutcome">
        {{#each rollOutcomes}}
          <option value="{{this.id}}" {{#if (eq this.id ../defaultRollOutcome)}}selected{{/if}}>{{this.label}}</option>
        {{/each}}
      </select>
    </div>
  </div>

  <div class="hg-tier-preview">
    DEFAULT TIER: <span class="hg-tier-value">—</span>
  </div>

  <div class="hg-teams-area">
    <div class="hg-side" data-side="a">
      <div class="hg-side-label">SIDE A</div>
      <div class="hg-side-drop">Drag operatives here</div>
    </div>
    <div class="hg-user-pool">
      <div class="hg-side-label">OPERATIVES</div>
      {{#each allUsers}}
        <div class="hg-user-chip" draggable="true" data-user-id="{{this.id}}">{{this.name}}</div>
      {{/each}}
    </div>
    <div class="hg-side" data-side="b">
      <div class="hg-side-label">SIDE B</div>
      <div class="hg-side-drop">Drag operatives here</div>
    </div>
  </div>

  <div class="hg-hidden-zone">
    <div class="hg-side-label">BLACKOUT</div>
    <div class="hg-hidden-drop">Drag here to hide from session</div>
  </div>

  <div class="hg-player-config" style="display:none">
    <div class="hg-pc-header">
      <span class="hg-pc-name"></span>
      <button type="button" class="hg-pc-close">✕</button>
    </div>
    <div class="hg-field">
      <label>PROTOCOL OVERRIDE</label>
      <select class="hg-pc-game">
        {{#each games}}
          <option value="{{this.id}}">{{this.label}}</option>
        {{/each}}
      </select>
    </div>
    <div class="hg-field">
      <label>SKILL OVERRIDE</label>
      <select class="hg-pc-skill">
        {{#each skillLevels}}
          <option value="{{this.id}}">{{this.label}}</option>
        {{/each}}
      </select>
    </div>
    <div class="hg-field">
      <label>ROLL OVERRIDE</label>
      <select class="hg-pc-roll">
        {{#each rollOutcomes}}
          <option value="{{this.id}}">{{this.label}}</option>
        {{/each}}
      </select>
    </div>
    <div class="hg-field hg-pc-gm-only" style="display:none">
      <label>POWER MULTIPLIER</label>
      <select class="hg-pc-multiplier">
        <option value="1">1× (Normal)</option>
        <option value="2">2×</option>
        <option value="3">3×</option>
        <option value="4">4×</option>
        <option value="5">5×</option>
      </select>
      <div class="hg-pc-note">Multiplies both score and successes for this side.</div>
    </div>
    <div class="hg-field hg-pc-player-only" style="display:none">
      <label class="hg-pc-checkbox-label">
        <input type="checkbox" class="hg-pc-helper" />
        HELPER
      </label>
      <div class="hg-pc-note">A helper doesn't add their success to the side's total, but contributes half their score.</div>
    </div>
  </div>

</div>
