<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" class="is-aggregated">
            <div
              style="position: sticky; top: 0; transform: translateY(0px)"
              class="scroll-panel-container"
            >
              <div slot="top_panel" id="top_panel">
                <span
                  id="transpose_button"
                  title="Transpose Pivots"
                  class="rrow centered"
                ></span>
                <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">
                          <div draggable="true" class="pivot-column-draggable">
                            <div class="pivot-column-border">
                              <span class="string type-icon"></span
                              ><span class="column_name">State</span>
                            </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="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
                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 show-aggregate"
                >
                  <div class="column-selector-column-border">
                    <span class="float type-icon"></span>
                    <div class="aggregate-selector-wrapper">
                      <div
                        data-value=""
                        class="dropdown-width-container aggregate-selector"
                      >
                        <select class="noselect">
                          <option value="sum" selected="selected">sum</option>
                          <option value="abs sum">abs sum</option>
                          <option value="any">any</option>
                          <option value="avg">avg</option>
                          <option value="count">count</option>
                          <option value="distinct count">distinct count</option>
                          <option value="dominant">dominant</option>
                          <option value="first">first</option>
                          <option value="high">high</option>
                          <option value="low">low</option>
                          <option value="max">max</option>
                          <option value="min">min</option>
                          <option value="high minus low">high minus low</option>
                          <option value="last by index">last by index</option>
                          <option value="last minus first">
                            last minus first
                          </option>
                          <option value="last">last</option>
                          <option value="mean">mean</option>
                          <option value="median">median</option>
                          <option value="q1">q1</option>
                          <option value="q3">q3</option>
                          <option value="pct sum parent">pct sum parent</option>
                          <option value="pct sum total">pct sum total</option>
                          <option value="stddev">stddev</option>
                          <option value="sum abs">sum abs</option>
                          <option value="sum not null">sum not null</option>
                          <option value="unique">unique</option>
                          <option value="var">var</option>
                          <optgroup label="weighted mean">
                            <option value="weighted mean by Row ID">
                              by Row ID
                            </option>
                            <option value="weighted mean by Postal Code">
                              by Postal Code
                            </option>
                            <option value="weighted mean by Sales">
                              by Sales
                            </option>
                            <option value="weighted mean by Quantity">
                              by Quantity
                            </option>
                            <option value="weighted mean by Discount">
                              by Discount
                            </option>
                            <option value="weighted mean by Profit">
                              by Profit
                            </option>
                          </optgroup>
                        </select>
                      </div>
                    </div>
                    <span class="column_name">Profit</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 show-aggregate"
                >
                  <div class="column-selector-column-border">
                    <span class="float type-icon"></span>
                    <div class="aggregate-selector-wrapper">
                      <div
                        data-value=""
                        class="dropdown-width-container aggregate-selector"
                      >
                        <select class="noselect">
                          <option value="sum" selected="selected">sum</option>
                          <option value="abs sum">abs sum</option>
                          <option value="any">any</option>
                          <option value="avg">avg</option>
                          <option value="count">count</option>
                          <option value="distinct count">distinct count</option>
                          <option value="dominant">dominant</option>
                          <option value="first">first</option>
                          <option value="high">high</option>
                          <option value="low">low</option>
                          <option value="max">max</option>
                          <option value="min">min</option>
                          <option value="high minus low">high minus low</option>
                          <option value="last by index">last by index</option>
                          <option value="last minus first">
                            last minus first
                          </option>
                          <option value="last">last</option>
                          <option value="mean">mean</option>
                          <option value="median">median</option>
                          <option value="q1">q1</option>
                          <option value="q3">q3</option>
                          <option value="pct sum parent">pct sum parent</option>
                          <option value="pct sum total">pct sum total</option>
                          <option value="stddev">stddev</option>
                          <option value="sum abs">sum abs</option>
                          <option value="sum not null">sum not null</option>
                          <option value="unique">unique</option>
                          <option value="var">var</option>
                          <optgroup label="weighted mean">
                            <option value="weighted mean by Row ID">
                              by Row ID
                            </option>
                            <option value="weighted mean by Postal Code">
                              by Postal Code
                            </option>
                            <option value="weighted mean by Sales">
                              by Sales
                            </option>
                            <option value="weighted mean by Quantity">
                              by Quantity
                            </option>
                            <option value="weighted mean by Discount">
                              by Discount
                            </option>
                            <option value="weighted mean by Profit">
                              by Profit
                            </option>
                          </optgroup>
                        </select>
                      </div>
                    </div>
                    <span class="column_name">Sales</span>
                  </div>
                </div>
              </div>
              <div
                style="
                  --default-column-title: var(
                    --column-selector-column---content
                  );
                "
                data-index="2"
                class="column-selector-column"
              >
                <div class="pivot-column column-empty">
                  <input spellcheck="false" class="column-empty-input" />
                </div>
              </div>
              <div style="" class="scroll-panel-auto-width"></div>
            </div>
            <div style="" class="scroll-panel-content"></div>
          </div>
        </div>
      </div>
      <div class="split-panel-divider"></div>
      <div id="sub-columns">
        <div
          style="position: sticky; top: 0; transform: translateY(0px)"
          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 style="" class="scroll-panel-auto-width"></div>
        </div>
        <div style="" 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">23<span> (99) x </span>2<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>
