<div class="stack-info">
  <div class="catalog-icon">
    <img
      src="{{app.baseAssets}}assets/images/generic-catalog.svg"
      data-src={{model.catalogTemplate.links.icon}}
    />
  </div>
  <div class="stack-info-row box">
    <div class="stack-info-top row">
      <div class="col">
        {{model.displayName}}
      </div>
      <div class="col text-right pull-right">
        {{#upgrade-btn
           model=model
           launchRoute="global-admin.multi-cluster-apps.catalog.launch"
           classNames="btn-xs "
           as |btn|
        }}
          {{#if btn.model.externalIdInfo.version}}
            {{t (concat "upgradeBtn.status." btn.upgradeStatus)}}
            {{#if btn.latestVersion}}
              <span class="text-small">({{btn.latestVersion}})</span>
            {{/if}}
          {{else}}
            {{t (concat "upgradeBtn.status." btn.upgradeStatus)}}
          {{/if}}
        {{/upgrade-btn}}

        {{badge-state
          model=model
          classNames="btn-xs"
        }}

        {{action-menu
          model=model
          classNames="inline-block"
        }}
      </div>
    </div>

    <hr>
    <div class="stack-info-bottom pt-0">
      <label for="" class="acc-label">
        {{t "newMultiClusterApp.targets.label"}}
      </label>
      <div class="col span-12 text-small mb-20">
        <span>
          {{#each model.targets as |target|}}
            {{#if target.project.id}}
              {{#link-to-external
                 "apps-tab.detail"
                 target.projectId
                 target.appLink
              }}
                {{#tooltip-element
                   type="tooltip-basic"
                   model=target.state
                   tooltipTemplate="tooltip-static"
                   aria-describedby="tooltip-base"
                   tooltipFor="tooltipLink"
                }}
                  <i class="icon icon-circle {{target.stateColor}}"></i>
                {{/tooltip-element}}
                {{target.clusterName}}:{{target.projectName}}
              {{/link-to-external}}
            {{else}}
              {{#tooltip-element
                 type="tooltip-basic"
                 model=target.state
                 tooltipTemplate="tooltip-static"
                 aria-describedby="tooltip-base"
                 tooltipFor="tooltipLink"
              }}
                <i class="icon icon-circle {{target.stateColor}}"></i>
              {{/tooltip-element}}
              {{target.projectId}}
              {{#tooltip-element
                 type="tooltip-basic"
                 model=(t "newMultiClusterApp.access.noAccessLink")
                 tooltipTemplate="tooltip-static"
                 aria-describedby="tooltip-base"
                 tooltipFor="tooltipLink"
              }}
                <i class="icon icon-alert"></i>
              {{/tooltip-element}}
            {{/if}}
          {{/each}}
        </span>
      </div>
    </div>
  </div>
</div>
