{{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>
    <TopologyMetrics::Card
      @items={{@downstreams}}
      @service={{@service.Service.Service}}
      @dc={{@dc}}
      @hasMetricsProvider={{this.hasMetricsProvider}}
    />
  </div>
{{/if}}
  <div id="metrics-container">
    <div>
      {{@service.Service.Service}}
    </div>
    {{#if this.hasMetricsProvider }}
      <TopologyMetrics::Series @service={{@service.Service.Service}} @protocol={{@protocol}} />
      <TopologyMetrics::Stats @endpoint='summary-for-service' @service={{@service.Service.Service}} @protocol={{@protocol}} />
    {{/if}}
    <div class="link">
     {{#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>
      <TopologyMetrics::Card
        @items={{upstreams}}
        @service={{@service.Service.Service}}
        @dc={{@dc}}
        @type='upstream'
        @hasMetricsProvider={{this.hasMetricsProvider}}
      />
    </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>