{{/*
  Savings — an optional bar comparison (`bars`: name, amount, highlight) and
  a savings calculator (`apps`: name, cost, tier, perSeat, selected; compared
  with the smallest of `federatedPlans`: name, tier, annual), rendered by partials/savings-calc.html.
*/}}
{{ $s := . }}
{{ $key := partial "section-id.html" $s | default "savings" }}
{{ partial "sections/head.html" $s }}

{{ with $s.bars }}
  {{ $max := 0 }}
  {{ range . }}{{ if gt .amount $max }}{{ $max = .amount }}{{ end }}{{ end }}
  <figure class="bar-chart">
    {{ with $s.barsTitle }}<figcaption class="bar-chart-title">{{ . }}</figcaption>{{ end }}
    <ol class="bar-list">
      {{ range . }}
      <li class="bar-row{{ if .highlight }} is-highlight{{ end }}">
        <span class="bar-name">{{ .name }}</span>
        <span class="bar-track"><span class="bar-fill" style="width: {{ div (mul .amount 100.0) $max }}%"></span></span>
        <span class="bar-value">${{ lang.FormatNumber 0 .amount }}</span>
      </li>
      {{ end }}
    </ol>
    {{ with $s.barsNote }}<p class="plan-note">{{ . | markdownify }}</p>{{ end }}
  </figure>
{{ end }}

{{ with $s.apps }}
  {{ partial "savings-calc.html" (dict "key" $key "apps" . "plans" $s.federatedPlans "note" $s.calcNote) }}
{{ end }}
{{ if $s.ctas }}<div class="cta-row mt-2">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}