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

<div class="boxed-section-head is-light inline-definitions">
  <span>{{this.deployment.shortId}}</span>
  <span class="bumper-left tag {{this.deployment.statusClass}}" data-test-deployment-status="{{this.deployment.statusClass}}">{{this.deployment.status}}</span>
  {{#if this.deployment.requiresPromotion}}
    <span data-test-promotion-required class="bumper-left badge is-warning is-hollow">Requires Promotion</span>
  {{/if}}
  <span class="pull-right">
    <span class="pair is-faded">
      <span class="term">Version</span>
      <span class="has-emphasis" data-test-deployment-version>#{{this.deployment.version.number}}</span>
      <span data-test-deployment-submit-time>|
        <span class="tooltip" aria-label="{{format-ts this.deployment.version.submitTime}}">
          {{moment-from-now this.deployment.version.submitTime}}
        </span>
      </span>
    </span>
    <button data-test-deployment-toggle-details class="button is-light is-compact pull-right" {{action (toggle "isOpen" this)}} type="button">details</button>
 </span>
</div>
{{#if this.isOpen}}
  <div data-test-deployment-details class="boxed-section-body">
    <JobDeploymentDetails @deployment={{this.deployment}} as |d|>
      <d.metrics />
      <d.taskGroups />
      <d.allocations />
    </JobDeploymentDetails>
  </div>
{{/if}}
