{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<div
  data-test-gutter-menu
  class="page-column is-left {{if this.isOpen "is-open"}}"
  {{did-insert this.keyboard.registerNav type="main"}}
>
  <div class="gutter {{if this.isOpen "is-open"}}">
    <header class="collapsed-menu {{if this.isOpen "is-open"}}">
      <span
        data-test-gutter-gutter-toggle
        class="gutter-toggle"
        aria-label="menu"
        role="img"
        onclick={{action this.onHamburgerClick}}
      >
        <HamburgerMenu />
      </span>
      <span class="logo-container">
        <NomadLogo />
      </span>
    </header>
    <aside class="menu">
      {{#if this.system.shouldShowRegions}}
        <div class="collapsed-only">
          <p class="menu-label">
            Region
            {{if this.system.shouldShowNamespaces "& Namespace"}}
          </p>
          <ul class="menu-list">
            <li>
              <div class="menu-item is-wide">
                <RegionSwitcher />
              </div>
            </li>
          </ul>
        </div>
      {{/if}}
      <ul class="menu-list">
        <li {{keyboard-shortcut menuLevel=true pattern=(array "g" "j") }}>
          <LinkTo
            @route="jobs"
            @activeClass="is-active"
            data-test-gutter-link="jobs"
          >
            Jobs
          </LinkTo>
        </li>
        {{#if (can "accept recommendation")}}
          <li
            {{keyboard-shortcut
              menuLevel=true
              pattern=(array "g" "o")
              action=(action this.transitionTo 'optimize')
            }}
          >
            <LinkTo
              @route="optimize"
              @activeClass="is-active"
              data-test-gutter-link="optimize"
            >
              Optimize
            </LinkTo>
          </li>
        {{/if}}
        <li {{keyboard-shortcut menuLevel=true pattern=(array "g" "r") }}>
          <LinkTo
            @route="storage"
            @activeClass="is-active"
            data-test-gutter-link="storage"
          >
            Storage
          </LinkTo>
        </li>
        {{#if (can "list variables")}}
        <li {{keyboard-shortcut menuLevel=true pattern=(array "g" "v") }}>
          <LinkTo
            @route="variables"
            @activeClass="is-active"
            data-test-gutter-link="variables"
          >
            Variables
          </LinkTo>
        </li>
        {{/if}}
      </ul>
      <p class="menu-label">
        Cluster
      </p>
      <ul class="menu-list">
        <li {{keyboard-shortcut menuLevel=true pattern=(array "g" "c") }}>
          <LinkTo
            @route="clients"
            @activeClass="is-active"
            data-test-gutter-link="clients"
          >
            Clients
          </LinkTo>
        </li>
        <li {{keyboard-shortcut menuLevel=true pattern=(array "g" "s") }}>
          <LinkTo
            @route="servers"
            @activeClass="is-active"
            data-test-gutter-link="servers"
          >
            Servers
          </LinkTo>
        </li>
        <li {{keyboard-shortcut menuLevel=true pattern=(array "g" "t") }}>
          <LinkTo
            @route="topology"
            @activeClass="is-active"
            data-test-gutter-link="topology"
          >
            Topology
          </LinkTo>
        </li>
      </ul>
      <p class="menu-label">
        Operations
      </p>
      <ul class="menu-list">
        <li {{keyboard-shortcut menuLevel=true pattern=(array "g" "e") }}>
          <LinkTo
            @route="evaluations"
            @activeClass="is-active"
            data-test-gutter-link="evaluations"
          >
            Evaluations
          </LinkTo>
        </li>
        {{#if (can "list policies")}}
          <li
            {{keyboard-shortcut
              menuLevel=true
              pattern=(array "g" "a")
              action=(action this.transitionTo 'administration')
            }}
          >
            <LinkTo
              @route="administration"
              @activeClass="is-active"
              data-test-gutter-link="administration"
            >
              Administration
            </LinkTo>
          </li>
        {{/if}}
      </ul>
    </aside>
    {{#if this.system.agent.version}}
      <footer class="gutter-footer">
        <span class="is-faded">
          v{{this.system.agent.version}}
        </span>
      </footer>
    {{/if}}
  </div>
</div>
<div data-test-page-content class="page-column is-right">
  {{yield}}
</div>
<div
  data-test-gutter-backdrop
  class="gutter-backdrop {{if this.isOpen "is-open"}}"
  onclick={{action this.onHamburgerClick}}
></div>