<div id="app_panel" class="split-panel orient-reverse">
  <div class="split-panel-child">
    <div
      id="settings_panel"
      class="sidebar_column noselect split-panel orient-vertical"
    >
      <div id="settings_close_button" class="sidebar_close_button">
        <div class="sidebar_close_button_inner"></div>
      </div>
      <div id="debug_open_button" class="sidebar_close_button">
        <div class="sidebar_close_button_inner"></div>
      </div>
      <div id="plugin_selector_container">
        <div data-plugin="Debug" class="plugin-select-item">
          <span class="plugin-select-item-name"></span>
        </div>
        <div id="plugin_selector_border"></div>
      </div>
      <div class="split-panel-child">
        <div id="selected-columns">
          <div id="active-columns">
            <div class="scroll-panel-container">
              <div slot="top_panel" id="top_panel">
                <div class="rrow">
                  <div id="group_by">
                    <div class="psp-text-field">
                      <ul for="group_by" class="psp-text-field__input">
                        <div class="pivot-column column-empty">
                          <input
                            spellcheck="false"
                            class="column-empty-input"
                          />
                        </div>
                      </ul>
                      <label
                        for="group_by"
                        class="pivot-selector-label"
                      ></label>
                    </div>
                  </div>
                </div>
                <div class="rrow">
                  <div id="split_by">
                    <div class="psp-text-field">
                      <ul for="split_by" class="psp-text-field__input">
                        <div class="pivot-column column-empty">
                          <input
                            spellcheck="false"
                            class="column-empty-input"
                          />
                        </div>
                      </ul>
                      <label
                        for="split_by"
                        class="pivot-selector-label"
                      ></label>
                    </div>
                  </div>
                </div>
                <div class="rrow">
                  <div id="sort">
                    <div class="psp-text-field">
                      <ul for="sort" class="psp-text-field__input">
                        <div class="pivot-column column-empty">
                          <input
                            spellcheck="false"
                            class="column-empty-input"
                          />
                        </div>
                      </ul>
                      <label for="sort" class="pivot-selector-label"></label>
                    </div>
                  </div>
                </div>
                <div class="rrow">
                  <div id="filter">
                    <div class="psp-text-field">
                      <ul for="filter" class="psp-text-field__input">
                        <div class="pivot-column column-empty">
                          <input
                            spellcheck="false"
                            class="column-empty-input"
                          />
                        </div>
                      </ul>
                      <label for="filter" class="pivot-selector-label"></label>
                    </div>
                  </div>
                </div>
              </div>
              <div data-index="0" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="integer type-icon"></span
                    ><span class="column_name">Row ID</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="1" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Order ID</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="2" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="datetime type-icon"></span
                    ><span class="column_name">Order Date</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="3" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="datetime type-icon"></span
                    ><span class="column_name">Ship Date</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="4" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Ship Mode</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="5" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Customer ID</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="6" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Segment</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="7" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Country</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="8" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">City</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="9" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">State</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="10" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="integer type-icon"></span
                    ><span class="column_name">Postal Code</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="11" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Region</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="12" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Product ID</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="13" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Category</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="14" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="string type-icon"></span
                    ><span class="column_name">Sub-Category</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="15" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="float type-icon"></span
                    ><span class="column_name">Sales</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div data-index="16" class="column-selector-column">
                <span class="select-mode is_column_active"></span>
                <div draggable="true" class="column-selector-draggable">
                  <div class="column-selector-column-border">
                    <span class="integer type-icon"></span
                    ><span class="column_name">Quantity</span
                    ><span class="column-selector--spacer"></span>
                  </div>
                </div>
              </div>
              <div class="scroll-panel-auto-width"></div>
            </div>
            <div class="scroll-panel-content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="split-panel-divider"></div>
  <div id="main_column">
    <div id="status_bar">
      <div class="section">
        <div id="status_reconnect" class="connected">
          <span id="status" class="connected"></span
          ><span id="status_updating" class="connected"></span>
        </div>
      </div>
      <label data-value="" class="input-sizer"
        ><input placeholder=" " size="10" /><span
          id="status-bar-placeholder"
        ></span></label
      ><span id="rows">99<span> x </span>19</span>
      <div id="spacer"></div>
      <div id="menu-bar" class="section">
        <div id="plugin-settings"><slot name="plugin-settings"></slot></div>
        <span class="hover-target"
          ><span id="reset" class="button"><span></span></span></span
        ><span class="hover-target"
          ><span id="export" class="button"><span></span></span></span
        ><span class="hover-target"
          ><span id="copy" class="button"><span></span></span
        ></span>
      </div>
    </div>
    <div id="main_panel_container"><slot></slot></div>
  </div>
</div>
