{# Modal file browser for saving particle selection indices .pkl files. #}
<div
  id="sel-file-browser-panel"
  class="cryo-explorer-save-modal"
  hidden
  aria-hidden="true"
  role="dialog"
  aria-modal="true"
  aria-labelledby="sel-fb-modal-title"
>
  <div class="cryo-explorer-save-modal__backdrop" data-sel-fb-close="1" aria-hidden="true"></div>
  <div class="cryo-explorer-save-modal__dialog">
    <div class="cryo-explorer-save-modal__header">
      <h2 id="sel-fb-modal-title" class="cryo-explorer-save-modal__title">Save selection</h2>
      <button
        type="button"
        id="sel-fb-cancel"
        class="cryo-explorer-save-modal__close"
        aria-label="Close save dialog"
      >&times;</button>
    </div>
    <div class="cryo-file-browser cryo-explorer-save-modal__browser">
      <div class="cryo-file-browser-bar">
        <button type="button" id="sel-fb-up" title="Parent directory">&#8593; Up</button>
        <span class="cryo-file-browser-path" id="sel-fb-path"></span>
      </div>
      <ul class="cryo-file-browser-list" id="sel-fb-list"></ul>
      <div class="cryo-file-browser-save-row">
        <input
          id="sel-fb-save-name"
          class="cryo-file-browser-save-input"
          type="text"
          value="indices.pkl"
          spellcheck="false"
          aria-label="Selection filename"
        />
        <button type="button" id="sel-fb-save-btn" class="btn btn-secondary">Save here</button>
      </div>
    </div>
  </div>
</div>