{{/*
  The savings calculator: pick the apps you pay for today and your team
  size, and compare their yearly retail cost with Federated's annual price.
  Input: dict with "key" (unique id), "apps" (name, cost, perSeat, selected),
  "annual", optional "note", "compact" (one result, no cost breakdown) and
  "more" (a link to the full calculator). The totals need JS; without it,
  the app list still shows each app's retail price.
*/}}
{{ $key := .key }}
<form class="savings-calc{{ if .compact }} is-compact{{ end }}" id="{{ $key }}-calc" data-annual="{{ .annual }}" onsubmit="return false">
  <fieldset class="calc-apps">
    <legend class="plan-subhead">{{ if .compact }}Which of these do you pay for?{{ else }}Which apps do you pay for today?{{ end }}</legend>
    <div class="calc-app-grid">
      {{ range .apps }}
      <label class="calc-app">
        <input type="checkbox" value="{{ .cost }}" data-per-seat="{{ .perSeat }}"{{ if .selected }} checked{{ end }}>
        <span class="calc-app-name">{{ .name }}</span>
        <span class="calc-app-cost">${{ .cost }}{{ if .perSeat }}/person{{ else }} flat{{ end }}</span>
      </label>
      {{ end }}
    </div>
  </fieldset>

  <div class="calc-users">
    <label class="plan-subhead" for="{{ $key }}-users">How many people work at your company?</label>
    <div class="calc-users-row">
      <input type="range" id="{{ $key }}-users" min="1" max="28" step="1" value="2">
      <output class="calc-users-value" for="{{ $key }}-users">10</output>
    </div>
  </div>

  <div class="calc-result" aria-live="polite">
    {{ if not .compact }}
    <div class="calc-stat"><span class="calc-stat-label">Apps replaced</span><span class="calc-stat-value" data-out="count">0</span></div>
    <div class="calc-stat"><span class="calc-stat-label">Their retail cost</span><span class="calc-stat-value" data-out="cost">$0</span><span class="calc-stat-unit">/year</span></div>
    {{ end }}
    <div class="calc-stat is-highlight"><span class="calc-stat-label">You'd save</span><span class="calc-stat-value" data-out="savings">$0</span><span class="calc-stat-unit">/year</span></div>
    {{ with .more }}<a class="more calc-more" href="{{ .url | relURL }}">{{ .label }}<span class="arrow" aria-hidden="true">→</span></a>{{ end }}
  </div>
  {{ with .note }}<p class="plan-note">{{ . | markdownify }}</p>{{ end }}
</form>
<script>
  (function () {
    var form = document.getElementById('{{ $key }}-calc');
    if (!form) return;
    var annual = +form.dataset.annual || 0;
    var range = form.querySelector('input[type=range]');
    var shown = form.querySelector('.calc-users-value');
    var fmt = function (n) { return '$' + Math.round(n).toLocaleString('en-US'); };
    function out(name, text) { var el = form.querySelector('[data-out=' + name + ']'); if (el) el.textContent = text; }
    // The slider's 28 steps: 1, then 10–100 by 10, 200–1,000 by 100, 1,500–5,000 by 500.
    function users(step) {
      if (step <= 1) return 1;
      if (step <= 11) return (step - 1) * 10;
      if (step <= 20) return (step - 10) * 100;
      return 1000 + (step - 20) * 500;
    }
    function update() {
      var n = users(+range.value), count = 0, cost = 0;
      shown.textContent = n.toLocaleString('en-US') + (+range.value === +range.max ? '+' : '');
      range.setAttribute('aria-valuetext', shown.textContent + ' people');
      form.querySelectorAll('.calc-app input:checked').forEach(function (box) {
        count++;
        cost += +box.value * (box.dataset.perSeat === 'true' ? n : 1) * 12;
      });
      out('count', count);
      out('cost', fmt(cost));
      out('savings', fmt(Math.max(0, cost - annual)));
    }
    form.addEventListener('input', update);
    update();
  })();
</script>