<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="Heatmap" 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-label="Color"
                data-index="0"
                class="column-selector-column"
              >
                <span class="select-mode is_column_active required"></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">
                <div class="pivot-column column-empty">
                  <input spellcheck="false" class="column-empty-input" />
                </div>
              </div>
              <div class="scroll-panel-auto-width"></div>
            </div>
            <div class="scroll-panel-content"></div>
          </div>
        </div>
      </div>
      <div class="split-panel-divider"></div>
      <div id="sub-columns">
        <div class="scroll-panel-container">
          <div id="add-expression" data-index="-1">
            <span id="add-expression-button"></span>
          </div>
          <div data-index="0" class="column-selector-column">
            <span class="select-mode is_column_active"></span>
            <div
              draggable="true"
              class="column-selector-draggable column-selector-column-title"
            >
              <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="1" class="column-selector-column">
            <span class="select-mode is_column_active"></span>
            <div
              draggable="true"
              class="column-selector-draggable column-selector-column-title"
            >
              <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="2" class="column-selector-column">
            <span class="select-mode is_column_active"></span>
            <div
              draggable="true"
              class="column-selector-draggable column-selector-column-title"
            >
              <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="3" class="column-selector-column">
            <span class="select-mode is_column_active"></span>
            <div
              draggable="true"
              class="column-selector-draggable column-selector-column-title"
            >
              <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="4" class="column-selector-column">
            <span class="select-mode is_column_active"></span>
            <div
              draggable="true"
              class="column-selector-draggable column-selector-column-title"
            >
              <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="5" class="column-selector-column">
            <span class="select-mode is_column_active"></span>
            <div
              draggable="true"
              class="column-selector-draggable column-selector-column-title"
            >
              <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="6" class="column-selector-column">
            <span class="select-mode is_column_active"></span>
            <div
              draggable="true"
              class="column-selector-draggable column-selector-column-title"
            >
              <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="7" class="column-selector-column">
            <span class="select-mode is_column_active"></span>
            <div
              draggable="true"
              class="column-selector-draggable column-selector-column-title"
            >
              <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="8" class="column-selector-column">
            <span class="select-mode is_column_active"></span>
            <div
              draggable="true"
              class="column-selector-draggable column-selector-column-title"
            >
              <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="9" class="column-selector-column">
            <span class="select-mode is_column_active"></span>
            <div
              draggable="true"
              class="column-selector-draggable column-selector-column-title"
            >
              <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 column-selector-column-title"
            >
              <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="11" class="column-selector-column">
            <span class="select-mode is_column_active"></span>
            <div
              draggable="true"
              class="column-selector-draggable column-selector-column-title"
            >
              <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 class="scroll-panel-auto-width"></div>
        </div>
        <div class="scroll-panel-content"></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>1<span> (19)</span></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>
