<section class="bl-lm">
  {{#if hasScene}}
    <p class="bl-lm-scene"><i class="fas fa-layer-group"></i> <strong>{{sceneName}}</strong> — {{count}} {{localize "BL.PanelLevels"}}</p>
    {{!-- Everything between here and the action bar scrolls. A ten-storey tower plus its
          visibility matrix is taller than the screen; the Commit button must stay reachable. --}}
    <div class="bl-lm-scroll-body">
    <table class="bl-lm-table">
      <thead>
        <tr>
          <th class="bl-lm-name">{{localize "BL.LMColName"}}</th>
          <th class="bl-lm-num" data-tooltip="{{localize 'BL.LMColBottomTip'}}">{{localize "BL.LMColBottom"}}</th>
          <th class="bl-lm-num" data-tooltip="{{localize 'BL.LMColTopTip'}}">{{localize "BL.LMColTop"}}</th>
          <th class="bl-lm-bg" data-tooltip="{{localize 'BL.LMColBgTip'}}">{{localize "BL.LMColBg"}}</th>
          <th class="bl-lm-counts" data-tooltip="{{localize 'BL.LMColCountsTip'}}">{{localize "BL.LMColCounts"}}</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {{#each rows}}
          <tr data-idx="{{idx}}" class="{{#if isNew}}bl-lm-new{{/if}}">
            <td class="bl-lm-name"><input type="text" name="name" value="{{name}}"></td>
            <td class="bl-lm-num"><input type="number" name="bottom" value="{{bottom}}" step="1"></td>
            <td class="bl-lm-num"><input type="number" name="top" value="{{top}}" step="1" placeholder="∞" data-tooltip="{{localize 'BL.LMTopInfinite'}}"></td>
            {{!-- One control, three states: own image / another level's image showing through /
                  colour only. All three open the same modal, because they are three views of the same
                  two fields rather than three different things to edit. --}}
            <td class="bl-lm-bg">
              <button type="button" class="bl-bg-btn bl-bg-{{bgView.kind}}{{#if bgView.dirty}} bl-bg-staged{{/if}}"
                      data-action="editBackground" data-idx="{{idx}}" data-tooltip="{{bgView.tip}}">
                {{#if bgView.src}}
                  <img src="{{bgView.src}}" alt="" draggable="false">
                {{else}}
                  <span class="bl-bg-swatch" style="background:{{bgView.color}}"></span>
                {{/if}}
              </button>
            </td>
            <td class="bl-lm-counts">
              <span data-tooltip="{{localize 'BL.LMTiles'}}"><i class="fas fa-clone"></i> {{counts.tiles}}</span>
              <span data-tooltip="{{localize 'BL.LMLights'}}"><i class="fas fa-lightbulb"></i> {{counts.lights}}</span>
              <span data-tooltip="{{localize 'BL.LMRegions'}}"><i class="fas fa-draw-polygon"></i> {{counts.regions}}</span>
              <span data-tooltip="{{localize 'BL.LMWalls'}}"><i class="fas fa-grip-lines-vertical"></i> {{counts.walls}}</span>
              <span data-tooltip="{{localize 'BL.LMTokens'}}"><i class="fas fa-user"></i> {{counts.tokens}}</span>
            </td>
            <td class="bl-lm-del">
              <button type="button" data-action="deleteRow" data-idx="{{idx}}" data-tooltip="{{localize 'BL.LMDeleteRow'}}"><i class="fas fa-trash"></i></button>
            </td>
          </tr>
        {{/each}}
      </tbody>
    </table>
    <p class="bl-lm-hint">{{localize "BL.LMHint"}}</p>

    {{#if matrix.rows.length}}
      <details class="bl-vis" open>
        <summary><i class="fas fa-eye"></i> {{localize "BL.LMVisTitle"}}</summary>
        <p class="bl-muted bl-vis-hint">{{localize "BL.LMVisHint"}}</p>
        <div class="bl-vis-scroll">
          <table class="bl-vis-table">
            <thead>
              <tr>
                <th class="bl-vis-corner">{{localize "BL.LMVisCanSee"}}</th>
                {{#each matrix.cols}}<th class="bl-vis-col" data-tooltip="{{label}}"><span>{{label}}</span></th>{{/each}}
              </tr>
            </thead>
            <tbody>
              {{#each matrix.rows}}
                <tr>
                  <th class="bl-vis-row" scope="row" data-tooltip="{{label}}">{{label}}</th>
                  {{#each cells}}
                    <td class="bl-vis-cell{{#if self}} bl-vis-self{{/if}}">
                      {{#if self}}
                        <span class="bl-vis-dash" data-tooltip="{{localize 'BL.LMVisSelf'}}">•</span>
                      {{else}}
                        <button type="button" class="bl-vis-toggle {{#if checked}}on{{else}}off{{/if}}"
                                data-action="toggleVis" data-row="{{../id}}" data-col="{{colId}}"
                                data-tooltip="{{#if checked}}{{localize 'BL.LMVisOn'}}{{else}}{{localize 'BL.LMVisOff'}}{{/if}}">
                          <i class="fas {{#if checked}}fa-eye{{else}}fa-eye-slash{{/if}}"></i>
                        </button>
                      {{/if}}
                    </td>
                  {{/each}}
                </tr>
              {{/each}}
            </tbody>
          </table>
        </div>
        {{#if matrix.hasNew}}<p class="bl-muted bl-vis-newnote"><i class="fas fa-circle-info"></i> {{localize "BL.LMVisNewNote"}}</p>{{/if}}
        <div class="bl-vis-actions">
          <button type="button" data-action="resetVis" data-tooltip="{{localize 'BL.LMVisResetTip'}}"><i class="fas fa-rotate-left"></i> {{localize "BL.LMVisReset"}}</button>
        </div>
      </details>
    {{/if}}
    </div>

    <div class="bl-lm-actions">
      <button type="button" data-action="addLevel"><i class="fas fa-plus"></i> {{localize "BL.LMAddLevel"}}</button>
      <button type="button" data-action="generate" data-tooltip="{{localize 'BL.GenNote'}}"><i class="fas fa-wand-magic-sparkles"></i> {{localize "BL.GenTitle"}}</button>
      <span class="bl-lm-spacer"></span>
      <button type="button" data-action="cancel">{{localize "BL.Cancel"}}</button>
      <button type="button" class="bl-lm-commit" data-action="commit"><i class="fas fa-check"></i> {{localize "BL.LMCommit"}}</button>
    </div>
  {{else}}
    <p class="bl-muted">{{localize "BL.NoScene"}}</p>
  {{/if}}
</section>
