{{page-title "Deployments"}}
{{#let (not-eq this.target.currentRouteName 'workspace.projects.project.app.deployments.deployment.resource') as |isNotResourcePage|}}
  <div class={{if (and isNotResourcePage this.deploymentsByGeneration) "grid grid--menu-with-panel"}}>
  {{#if isNotResourcePage}}
    {{#if this.deploymentsByGeneration}}
      <ul data-test-deployment-list class="sidebar list">
        {{#each this.deploymentsByGeneration key="generationID" as |group|}}
          {{#each group.deployments key="id" as |deployment|}}
            {{#if (or this.isShowingDestroyed (not-eq deployment.state 4))}}
              <AppItem::Deployment @deployment={{deployment}} @latest={{group.deployments.[0]}} />
            {{/if}}
          {{/each}}
        {{/each}}
        {{#if (and this.hasMoreDeployments (not this.isShowingDestroyed))}}
          <li class="destroyed-deployments-filter">
            <hr>
            <Pds::Button
              data-test-display-destroyed-button
              @compact={{true}}
              @variant="ghost"
              {{on "click" this.showDestroyed}}>
              {{t "page.deployments.display_destroyed"}}
            </Pds::Button>
          </li>
        {{/if}}
      </ul>
    {{else}}
      <EmptyState>
        <p>There are no deployments to display for this app yet</p>
        <p>To create your first build, you can run
          <CopyableCode @ref="empty-deploy" @inline="true">
            <code id="empty-deploy">waypoint deploy</code>
          </CopyableCode>
          from the CLI</p>
      </EmptyState>
    {{/if}}
  {{/if}}
    <div class="panel">
      {{outlet}}
    </div>
  </div>
{{/let}}
