{# Particle explorer montage region: scrollable panels; image grid nested in load-images panel. #}
<aside class="cryo-dash-montage" aria-label="Particle preview">
<div class="cryo-explorer-menu-scroll">
<div class="cryo-dash-montage-scroll">
<div id="montage-actions" class="cryo-explorer-montage-actions">
      <section class="cryo-explorer-panel-section" aria-labelledby="color-selection-panel-toggle">
        <div id="color-selection-panel-shell" class="cryo-explorer-panel-shell cryo-explorer-panel-shell--inactive">
        <div class="cryo-explorer-panel-header">
        <div class="cryo-explorer-panel-toolbar">
          <button type="button" id="color-selection-panel-toggle"
            class="cryo-image-grid-menu-toggle cryo-explorer-panel-toggle"
            aria-expanded="false" aria-controls="color-selection-panel-body">
            <span class="cryo-image-grid-menu-toggle__chev" aria-hidden="true">&#9656;</span>
            <span class="cryo-explorer-panel-toggle__label">Toggle selection</span>
          </button>
        </div>
        <p id="color-selection-inactive-note"
          class="cryo-explorer-panel-inactive-note cryo-dash-legend-note">Choose a color scale to select by color levels</p>
        </div>
        <div id="color-selection-panel-body" class="cryo-explorer-panel-body" hidden>
<div id="color-hist-panel" class="cryo-color-hist-panel" hidden aria-hidden="true">
      <div class="cryo-cc-legend-region-heading-row">
        <h3 id="color-legend-region-heading" class="cryo-color-legend-region-heading" hidden></h3>
        <div id="color-legend-region-invert-slot" class="cryo-cc-region-invert-slot" hidden aria-hidden="true"></div>
        <div id="scatter-palette-radios"
          class="cryo-cc-legend-palette-shell cryo-explorer-scatter-palette-kit
            cryo-palette-select cryo-palette-select--options-pane scatter-palette-radios--suppressed
            cryo-explorer-scatter-palette-heading-toggle-host
            cryo-explorer-scatter-palette-heading-toggle-host--suppressed"
          aria-label="Continuous color palette">
          <button type="button" id="scatter-palette-toggle" class="cryo-palette-select__title" aria-expanded="false"
            aria-controls="scatter-palette-options">
            <span class="cryo-palette-select__chevron" aria-hidden="true">▶</span>
            <span id="scatter-palette-toggle-label">Choose palette</span>
          </button>
          <div id="scatter-palette-options"
            class="cryo-palette-select__options cryo-palette-select__options--collapsed cryo-cc-legend-palette-menu"
            role="group">
            {{ continuous_palette_options("scatter_palette", "cryo-palette-option", "cryo-palette-select__swatch") }}
          </div>
        </div>
      </div>
      <div id="color-continuous-hist-wrap">
        <div id="color-hist"></div>
        <div class="cryo-color-hist-controls">
          <label id="color-hist-mode-check-wrap" for="color-hist-mode-check">
            <input type="checkbox" id="color-hist-mode-check"/>
                    <span id="color-hist-mode-check-caption">Use as maximum (≤)</span>
          </label>
          <span id="color-threshold-status" class="status"></span>
        </div>
      </div>
      <div id="color-discrete-wrap" class="cryo-cc-discrete-wrap">
        <div id="color-discrete-switches" class="cryo-cc-discrete-switches cryo-color-discrete-switches" role="group"
          aria-label="Discrete color filter"></div>
        <div class="cryo-color-discrete-actions">
          <button type="button" id="btn-discrete-invert-selection" class="btn btn-secondary" disabled>
            no selection made!
          </button>
        </div>
      </div>
    </div>
        </div>
        </div>
      </section>

      <section class="cryo-explorer-panel-section" aria-labelledby="cache-panel-toggle">
        <div id="cache-panel-shell" class="cryo-explorer-panel-shell">
        <div class="cryo-explorer-panel-header">
        <div class="cryo-explorer-panel-toolbar">
          <button type="button" id="cache-panel-toggle" class="cryo-image-grid-menu-toggle cryo-explorer-panel-toggle"
            aria-expanded="true" aria-controls="cryo-explorer-cache-panel-body">
            <span class="cryo-image-grid-menu-toggle__chev" aria-hidden="true">&#9656;</span>
            <span class="cryo-explorer-panel-toggle__label">Load particle images into cache to display in grid</span>
          </button>
        </div>
        </div>
        <div id="cryo-explorer-cache-panel-body" class="cryo-explorer-panel-body">
      <fieldset id="cryo-explorer-image-cache-fieldset" class="cryo-explorer-montage-group cryo-explorer-montage-group--panel-body">
        <legend class="cryo-explorer-montage-group__legend--visually-hidden">Load particle images into cache to display in grid</legend>
        <div id="cryo-explorer-cache-load-body" class="cryo-explorer-cache-load-body">
        <div class="cryo-explorer-load-images-toolbar">
          <label class="cryo-explorer-cache-size-label" for="montage-cache-size-input">
            <span class="cryo-explorer-cache-size-label__text" id="montage-cache-size-label-text">Cache size</span>
            <input
              type="number"
              id="montage-cache-size-input"
              name="montage_cache_size"
              min="0"
              step="{{ preload_cache_step }}"
              inputmode="numeric"
              value="{{ preload_image_limit }}"
              max="{{ scatter_plotted_n }}"
              title="Thumbnails to fetch when you build new cache, or expansion target size (capped at plotted points)"
            />
          </label>
          <div class="cryo-explorer-action-row__btn">
            <button type="button"
              class="btn btn-secondary cryo-explorer-expand-cache-btn--compact"
              id="btn-expand-cache"
              disabled>Build new cache&#10;with {{ preload_image_limit }} images</button>
          </div>
          <div class="cryo-explorer-action-row__btn">
            <button type="button" class="btn" id="btn-view-images" disabled>Load all<br/>images</button>
          </div>
        </div>
        <div class="cryo-explorer-cache-selection-row" aria-label="Selection cache actions">
          <button type="button" class="btn cryo-explorer-cache-selection-add-btn" id="btn-cache-selection-uncached" disabled
            title="Select particles first.">
            Add 0<br/>selection images to cache
          </button>
          <p id="preload-status" class="cryo-explorer-preload-status cryo-dash-legend-note"
            aria-live="polite"></p>
          <button type="button"
            class="btn btn-secondary cryo-explorer-cache-clear-btn"
            id="btn-clear-image-cache"
            disabled
            title="Build new cache before you can clear one.">
            <span class="cryo-explorer-cache-clear-btn__label">Clear<br>cache</span>
          </button>
        </div>
        </div>
        <div
          id="cryo-explorer-cache-load-progress-wrap"
          class="cryo-explorer-cache-load-progress-wrap"
          hidden
          aria-hidden="true">
          <p class="cryo-explorer-cache-load-progress-heading">Loading particle images into cache…</p>
          <div
            id="image-cache-progress"
            class="cryo-image-cache-progress"
            role="progressbar"
            aria-valuemin="0"
            aria-valuemax="100"
            aria-valuenow="0"
            aria-hidden="true"
            hidden
          >
            <div class="cryo-image-cache-progress__track">
              <div id="image-cache-progress-bar" class="cryo-image-cache-progress__bar"></div>
            </div>
            <span id="image-cache-progress-label" class="cryo-image-cache-progress__label">0%</span>
          </div>
        </div>
      </fieldset>
        <div class="cryo-dash-montage-grid-region" aria-label="Image grid">
          <section class="cryo-explorer-panel-section" aria-labelledby="image-grid-menu-toggle">
            <div id="image-grid-panel-shell" class="cryo-explorer-panel-shell cryo-explorer-panel-shell--inactive">
              <div class="cryo-explorer-panel-header">
                <div class="cryo-explorer-panel-toolbar">
                  <button type="button" id="image-grid-menu-toggle"
                    class="cryo-image-grid-menu-toggle cryo-explorer-panel-toggle" aria-expanded="false"
                    aria-controls="image-grid-menu-body">
                    <span class="cryo-image-grid-menu-toggle__chev" aria-hidden="true">&#9656;</span>
                    <span class="cryo-explorer-panel-toggle__label">Image grid</span>
                  </button>
                </div>
                <div id="image-grid-toolbar-controls" class="cryo-image-grid-toolbar__controls" hidden>
                  <label id="image-grid-size-inline" class="cryo-image-grid-size-inline">
                    Grid size
                    <select id="grid-size" disabled>
                      <option value="1">1 × 1</option>
                      <option value="2">2 × 2</option>
                      <option value="3" selected>3 × 3</option>
                      <option value="4">4 × 4</option>
                      <option value="5">5 × 5</option>
                      <option value="6">6 × 6</option>
                      <option value="7">7 × 7</option>
                      <option value="8">8 × 8</option>
                    </select>
                  </label>
                  <button type="button" id="btn-montage-resample-cache" class="btn cryo-image-grid-resample-btn"
                    aria-label="Resample images from cache" disabled>
                    <span class="cryo-image-grid-resample-btn__label">
                      <span class="cryo-image-grid-resample-btn__line">Resample images</span>
                      <span class="cryo-image-grid-resample-btn__line">from cache</span>
                    </span>
                  </button>
                </div>
                <p id="image-grid-inactive-note"
                  class="cryo-explorer-panel-inactive-note cryo-dash-legend-note">Build image cache to populate grid</p>
              </div>
              <div id="image-grid-menu-body" class="cryo-image-grid-menu-body" hidden>
                <div class="cryo-montage-grid-wrap">
                  <div id="montage-grid" class="cryo-montage-grid"></div>
                  <div id="montage-preload-overlay" class="cryo-plot-rendering-overlay" aria-hidden="true">
                    <div class="cryo-plot-rendering-overlay__inner">
                      <span id="montage-preload-overlay-label" class="cryo-plot-rendering-overlay__label">Loading image
                        cache...</span>
                      <div class="cryo-plot-rendering-overlay__track" role="progressbar" aria-valuetext="Loading image cache">
                        <div class="cryo-plot-rendering-overlay__indeterminate"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
{% if show_volume_explorer %}
        <div class="cryo-dash-montage-volumes-region" aria-label="Reconstructed volumes">
          <section class="cryo-explorer-panel-section" aria-labelledby="volumes-panel-toggle">
            <div id="volumes-panel-shell" class="cryo-explorer-panel-shell cryo-explorer-panel-shell--inactive">
              <div class="cryo-explorer-panel-header">
                <div class="cryo-explorer-panel-toolbar">
                  <button type="button" id="volumes-panel-toggle"
                    class="cryo-image-grid-menu-toggle cryo-explorer-panel-toggle"
                    aria-expanded="false" aria-controls="volumes-panel-body">
                    <span class="cryo-image-grid-menu-toggle__chev" aria-hidden="true">&#9656;</span>
                    <span class="cryo-explorer-panel-toggle__label">Display reconstructed volumes</span>
                  </button>
                </div>
                <p id="volumes-inactive-note"
                  class="cryo-explorer-panel-inactive-note cryo-dash-legend-note">Build image cache and choose images first</p>
              </div>
              <div id="volumes-panel-body" class="cryo-explorer-panel-body" hidden>
                <fieldset class="cryo-explorer-montage-group cryo-explorer-montage-group--panel-body">
                  <legend class="cryo-explorer-montage-group__legend--visually-hidden">Display reconstructed volumes</legend>
                  <div class="cryo-explorer-volume-actions">
                    <div class="cryo-explorer-action-row">
                      <div class="cryo-explorer-action-row__btn">
                        <button type="button" class="btn btn-secondary" id="btn-volume-generate" disabled>Generate volumes</button>
                      </div>
                      <p class="cryo-explorer-action-row__hint cryo-dash-legend-note">
                        Use decoder to produce and display volumes for particles currently shown in grid.
                      </p>
                    </div>
                    <div class="cryo-explorer-action-row">
                      <div class="cryo-explorer-action-row__btn">
                        <button type="button" class="btn btn-secondary" id="btn-volume-animate" disabled>Animate volumes</button>
                      </div>
                      <p class="cryo-explorer-action-row__hint cryo-dash-legend-note">
                        Rotate currently displayed volumes.
                      </p>
                    </div>
                  </div>
                  <div class="cryo-volume-status-row" aria-live="polite">
                    <span id="volume-status" class="status" style="margin:0;"></span>
                    <div
                      id="volume-status-progress"
                      class="cryo-plot-rendering-overlay__track"
                      role="progressbar"
                      aria-valuetext="Generating volumes"
                      hidden
                    >
                      <div class="cryo-plot-rendering-overlay__indeterminate"></div>
                    </div>
                  </div>
                </fieldset>
              </div>
            </div>
          </section>
        </div>
{% endif %}
        </div>
        </div>
      </section>
    </div>
</div>
</div>
<div class="cryo-explorer-menu-fade cryo-explorer-menu-fade--paper" aria-hidden="true"></div>
</aside>