<div class="page-column is-left">
  <div class="gutter">
    <aside class="menu">
      <p class="menu-label">
        Workload
      </p>
      <ul class="menu-list">
        {{#if system.shouldShowNamespaces}}
          <li>
            <div class="menu-item">
              {{#power-select
                data-test-namespace-switcher
                options=sortedNamespaces
                selected=system.activeNamespace
                searchField="name"
                searchEnabled=(gt sortedNamespaces.length 10)
                onchange=(action (queue
                  (action (mut system.activeNamespace))
                  (action onNamespaceChange)
                ))
                tagName="div"
                class="namespace-switcher"
                as |namespace|}}
                {{#if (eq namespace.name "default")}}
                  Default Namespace
                {{else}}
                  {{namespace.name}}
                {{/if}}
              {{/power-select}}
            </div>
          </li>
        {{/if}}
        <li>{{#link-to "jobs" activeClass="is-active"}}Jobs{{/link-to}}</li>
      </ul>
      <p class="menu-label">
        Cluster
      </p>
      <ul class="menu-list">
        <li>{{#link-to "clients" activeClass="is-active"}}Clients{{/link-to}}</li>
        <li>{{#link-to "servers" activeClass="is-active"}}Servers{{/link-to}}</li>
      </ul>
    </aside>
  </div>
</div>
<div data-test-page-content class="page-column is-right">
  {{yield}}
</div>
