<li
  class="app-item
  {{if (not-eq @deployment.sequence @latest.sequence) "app-item--previous"}}
  {{if (eq @deployment.state 4) "app-item--destroyed"}}
  {{if (is-active 'workspace.projects.project.app.deployments.deployment' @deployment.sequence) "active"}}"
>
  <hr>
  <LinkTo
    data-test-deployment-list-item
    title={{concat (t "page.deployment.title") " v" @deployment.sequence }}
    @route="workspace.projects.project.app.deployments.deployment"
    @models={{array @deployment.sequence}}
  >
    <b class="badge badge--version">v{{@deployment.sequence}}</b>
    <div class="app-item__deployment-state">
      {{!-- ROW: health check + deployment URL --}}
      {{#if @deployment.statusReport.health}}
        {{#let @deployment.statusReport.health.healthStatus as |deploymentHealth|}}
          <span
            data-test-health-status={{downcase deploymentHealth}}
            class="health-check health-check--{{downcase deploymentHealth}}"
          />
          <span class="health-check--text-description">
            {{#if (eq (downcase deploymentHealth) "ready") }}
              {{clean-up-url @deployment.preload.deployUrl}}
            {{else}}
              {{t (concat "status_report_indicator.label." (downcase @deployment.statusReport.health.healthStatus))}}
            {{/if}}
          </span>
        {{/let}}
      {{/if}}
      {{!-- ROW: operation status --}}
      {{#let @deployment.status as |status|}}
        <FlightIcon
          data-test-time-icon
          @name={{or
            (and (eq status.state 0) "help")
            (and (eq status.state 1) "clock")
            (and (eq status.state 2) "check")
            (and (eq status.state 3) "alert-triangle")
          }}
          @size="16"
        />
        <span data-test-operation-status>
          {{t (concat "page.deployments.status_prefix." status.state)}}
          {{#if (eq status.state 1)}} {{!-- RUNNING --}}
            {{t "page.deployments.started_time_prefix"}} {{date-format-distance-to-now status.startTime.seconds}}
          {{else}}
            {{date-format-distance-to-now status.completeTime.seconds}}
          {{/if}}
        </span>
      {{/let}}
      {{!-- ROW: git commit information --}}
      {{#if @deployment.preload.jobDataSourceRef.git.commit}}
        {{#let @deployment.preload.jobDataSourceRef.git.commit as |commit|}}
          <FlightIcon @name="git-commit"/>
          <span data-test-git-commit class="git-commit" title="Triggered by commit: {{commit}}">
            <CopyButton @clipboardText={{commit}}>
            <span class="git-commit__sha">{{truncate-commit commit}}</span>
            </CopyButton>
          </span>
        {{/let}}
      {{/if}}
    </div>
  </LinkTo>
</li>
