<div
  class="ember-view app absolute inset-0 z-0 {{if this.active "" "inactive"}}"
  tabindex="1"
  {{on "focusin" (fn this.setActive true)}}
  {{on "focusout" (fn this.setActive false)}}
  {{on-resize this.windowDidResize}}
>
  {{#if this.isEmberApplication}}
    <div class="split">
      <div class="split-panel">
        <div class="split split-main">
          <Ui::DraggableColumn
            @classes="split-panel split-panel-sidebar-1"
            @side="left"
            @width={{this.navWidth}}
          >
            <div class="split-panel-hd">
              <AppPicker @collapsed={{this.navIsCollapsed}} />
            </div>

            <SideNav
              class="split-panel-bd"
              @collapsed={{this.navIsCollapsed}}
              @deprecationCount={{this.deprecationCount}}
            />

            <div class="split-panel-ft nav-footer {{if this.navIsCollapsed "nav-collapsed" "nav-expanded"}}">
              <a
                target="_blank"
                title="Submit an Issue"
                class="navigation-submit-issue flex items-center justify-center px-3"
                href="https://github.com/emberjs/ember-inspector/issues" rel="noopener noreferrer"
              >
                {{svg-jar "nav-bug" width="18" height="18"}}
              </a>
              <button
                {{on "click" this.toggleNavCollapsed}}
                title="{{if this.navIsCollapsed "expand" "collapse"}} navigation"
                type="button"
                class="navigation-toggle flex items-center bg-transparent border-0 outline-none appearance-none px-3"
              >
                {{svg-jar "sidebar-toggle" width="16" height="16"}}
              </button>
            </div>
          </Ui::DraggableColumn>

          <div class="split-panel">
            <div class="split-panel-hd split-panel-hd-row">
              <div id="toolbar"></div>
              {{#unless this.layout.inspectorExpanded}}
                <span class="spacer">{{!--  Spacer to shift the toggle to the end of the header --}}</span>
                <ObjectInspector::Toggle />
              {{/unless}}
            </div>

            <div class="split-panel-bd" {{did-insert this.setupContentElement}}>
              {{outlet}}
            </div>
          </div>
        </div>
      </div>

      {{#if this.layout.inspectorExpanded}}
        <Ui::DraggableColumn
          @classes="split-panel"
          @side="right"
          @width={{this.inspectorWidth}}
        >
          <div class="split-panel-hd split-panel-hd-row">
            <span class="spacer"></span>
            <ObjectInspector::Toggle />
          </div>
          <ObjectInspector
            @popMixinDetails={{this.popMixinDetails}}
            @model={{this.mixinStack}}
            @mixinDetails={{this.mixinDetails}}
            @selectComponent={{mut this.componentTreeController.pinned}}
            @item={{this.componentTreeController.currentItem}}
          />
        </Ui::DraggableColumn>
      {{/if}}
    </div>
  {{else}}
    <Ui::ErrorPage @description="Ember application not detected!">
      <ul>
        <li>This is not an Ember application.</li>
        <li>You might need to setup <a href="https://github.com/embroider-build/embroider/tree/main/packages/legacy-inspector-support">legacy inspector support</a></li>
        <li>You are using an old version of Ember (&lt; rc5).</li>
        {{#if this.isChrome}}
          <li>
            You are using the file:// protocol (instead of http://), in which case:

            <ul>
              <li>Visit the URL: chrome://extensions.</li>
              <li>Find the Ember Inspector.</li>
              <li>Make sure "Allow access to file URLs" is checked.</li>
            </ul>
          </li>
        {{/if}}
      </ul>
    </Ui::ErrorPage>
  {{/if}}
</div>
