<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"
          style="
            --default-column-title: var(
              --plugin-name-debug--content,
              &quot;Debug&quot;
            );
          "
          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
              style="position: sticky; top: 0; transform: translateY(0px)"
              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">
                          <div draggable="true" class="pivot-column-draggable">
                            <div class="pivot-column-border">
                              <span class="float type-icon"></span
                              ><span class="column_name">Sales</span>
                              <div
                                data-value=">"
                                class="dropdown-width-container"
                              >
                                <select class="noselect filterop-selector">
                                  <option value="==">==</option>
                                  <option value="!=">!=</option>
                                  <option value=">" selected="selected">
                                    &gt;
                                  </option>
                                  <option value=">=">&gt;=</option>
                                  <option value="<">&lt;</option>
                                  <option value="<=">&lt;=</option>
                                  <option value="is not null">
                                    is not null
                                  </option>
                                  <option value="is null">is null</option>
                                </select>
                              </div>
                              <label
                                data-value="1.10001"
                                class="input-sizer num-filter"
                                ><input
                                  type="number"
                                  placeholder="Value"
                                  class="num-filter"
                              /></label>
                            </div>
                          </div>
                          <span class="row_close"></span>
                        </div>
                        <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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                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 style="" class="scroll-panel-auto-width"></div>
            </div>
            <div style="" 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>
