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

<div {{did-insert (action this.calculate)}} {{did-update (action this.calculate) @topology}} class="topology-container">
{{#if (gt @topology.Downstreams.length 0)}}
  <div id="downstream-container">
    <div>
      <p>{{@topology.Datacenter}}</p>
      <span>
        <Tooltip>
          Only showing downstreams within the current datacenter for {{@service.Service.Service}}.
        </Tooltip>
      </span>
    </div>
    <TopologyMetrics::Card
      @items={{@topology.Downstreams}}
      @service={{@service.Service}}
      @dc={{@topology.Datacenter}}
      @hasMetricsProvider={{this.hasMetricsProvider}}
      @noMetricsReason={{this.noMetricsReason}}
    />
  </div>
{{/if}}
  <div id="metrics-container">
    <div class="metrics-header">
      {{@service.Service.Service}}
    </div>
    {{#if this.hasMetricsProvider }}
      <TopologyMetrics::Series
        @service={{@service.Service.Service}}
        @dc={{@topology.Datacenter}}
        @protocol={{@topology.Protocol}}
        @noMetricsReason={{this.noMetricsReason}}
      />
      {{#if (not-eq @service.Service.Kind 'ingress-gateway')}}
      <TopologyMetrics::Stats
        @endpoint='summary-for-service'
        @service={{@service.Service.Service}}
        @dc={{@topology.Datacenter}}
        @protocol={{@topology.Protocol}}
        @noMetricsReason={{this.noMetricsReason}}
      />
      {{/if}}
    {{/if}}
    <div class="link">
     {{#if @metricsHref}}
      <a class="metrics-link" href={{@metricsHref}} target="_blank" rel="noopener noreferrer" data-test-metrics-anchor>Open metrics Dashboard</a>
    {{else}}
      <a class="config-link" href="{{env 'CONSUL_DOCS_URL'}}/agent/options.html#ui_config" target="_blank" rel="noopener noreferrer">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={{@topology.Downstreams}}
     />
  </div>
{{#if (gt @topology.Upstreams.length 0)}}
  <div id="upstream-column">
  {{#each-in (group-by "Datacenter" @topology.Upstreams) as |dc upstreams|}}
    <div id="upstream-container">
      <p>{{dc}}</p>
      <TopologyMetrics::Card
        @items={{upstreams}}
        @service={{@service.Service}}
        @dc={{@topology.Datacenter}}
        @type='upstream'
        @hasMetricsProvider={{this.hasMetricsProvider}}
        @noMetricsReason={{this.noMetricsReason}}
      />
    </div>
  {{/each-in}}
  </div>
{{/if}}
  <div id="upstream-lines">
    <TopologyMetrics::UpLines
      @type='upstream'
      @view={{this.upView}}
      @center={{this.centerDimensions}}
      @lines={{this.upLines}}
      @items={{@topology.Upstreams}}
     />
  </div>
</div>