{{on-window 'resize' (action this.calculate)}}

<div {{did-insert (action this.calculate)}} {{did-update (action this.calculate) @upstreams @downstreams}} class="topology-container">
{{#if (gt @downstreams.length 0)}}
  <div id="downstream-container">
    <div>
      <p>{{@dc}}</p>
      <span>
        <Tooltip>
          Only showing downstreams within the current datacenter for {{@service.Service.Service}}.
        </Tooltip>
      </span>
    </div>
  {{#each @downstreams as |downstream|}}
    <div class="card"
      data-permission={{service/intention-permissions downstream}}
      id="{{downstream.Namespace}}{{downstream.Name}}"
    >
      <p>
        {{downstream.Name}}
      </p>
      <div class="detail">
      {{#if (env 'CONSUL_NSPACES_ENABLED')}}
        <dl class="nspace">
          <dt>
            <Tooltip>
                Namespace
            </Tooltip>
          </dt>
          <dd>
            {{downstream.Namespace}}
          </dd>
        </dl>
      {{/if}}
    {{#let (service/health-percentage downstream) as |percentage|}}
      {{#if (not-eq percentage.passing 0)}}
        <span class="passing">{{percentage.passing}}%</span>
      {{/if}}
      {{#if (not-eq percentage.warning 0)}}
        <span class="warning">{{percentage.warning}}%</span>
      {{/if}}
      {{#if (not-eq percentage.critical 0)}}
        <span class="critical">{{percentage.critical}}%</span>
      {{/if}}
    {{/let}}
      </div>
    </div>
  {{/each}}
  </div>
{{/if}}
  <div id="metrics-container">
    <div>
      {{@service.Service.Service}}
    </div>
    <div>
     {{#if @metricsHref}}
      <a class="metrics-link" href={{@metricsHref}} target="_blank" rel="noopener noreferrer">Open metrics Dashboard</a>
    {{else}}
      <a class="settings-link" href={{href-to 'settings'}}>Configure metrics dashboard</a>
    {{/if}}
    </div>
  </div>
  <div id="downstream-lines">
    <TopologyMetrics::DownLines
      @type='downstream'
      @view={{this.downView}}
      @center={{this.centerDimensions}}
      @lines={{this.downLines}}
      @items={{@downstreams}}
     />
  </div>
{{#if (gt @upstreams.length 0)}}
  <div id="upstream-column">
  {{#each-in (group-by "Datacenter" @upstreams) as |dc upstreams|}}
    <div id="upstream-container">
      <p>{{dc}}</p>
      {{#each upstreams as |upstream|}}
      <div class="card"
        data-permission={{service/intention-permissions upstream}}
        id="{{upstream.Namespace}}{{upstream.Name}}"
      >
        <p>
          {{upstream.Name}}
        </p>
        <div class="detail">
        {{#if (env 'CONSUL_NSPACES_ENABLED')}}
          <dl class="nspace">
            <dt>
              <Tooltip>
                  Namespace
              </Tooltip>
            </dt>
            <dd>
              {{upstream.Namespace}}
            </dd>
          </dl>
        {{/if}}
      {{#if (eq upstream.Datacenter @dc)}}
      {{#let (service/health-percentage upstream) as |percentage|}}
        {{#if (not-eq percentage.passing 0)}}
          <span class="passing">{{percentage.passing}}%</span>
        {{/if}}
        {{#if (not-eq percentage.warning 0)}}
          <span class="warning">{{percentage.warning}}%</span>
        {{/if}}
        {{#if (not-eq percentage.critical 0)}}
          <span class="critical">{{percentage.critical}}%</span>
        {{/if}}
      {{/let}}
      {{else}}
          <dl class="health">
            <dt>
              <Tooltip>
                  We are unable to determine the health status of services in remote datacenters.
              </Tooltip>
            </dt>
            <dd>
              Health
            </dd>
          </dl>
      {{/if}}
        </div>
      </div>
    {{/each}}
    </div>
  {{/each-in}}
  </div>
{{/if}}
  <div id="upstream-lines">
    <TopologyMetrics::UpLines
      @type='upstream'
      @view={{this.upView}}
      @center={{this.centerDimensions}}
      @lines={{this.upLines}}
      @items={{@upstreams}}
     />
  </div>
</div>