{{/*
  Pricing — one or more plan groups (e.g. "You host" / "We host") behind a
  switch. The switch is a set of radio inputs styled as tabs, so it works
  without JS; up to four groups. Each group can have:
    tiers    — bordered rows: name, price, unit, note, features
    includes — a checklist shared by every tier, plus an optional note
    addons   — small priced tiles
    apps     — a compact table of single apps: name, category, body, price
*/}}
{{ $s := . }}
{{ $key := partial "section-id.html" $s | default "plans" }}
{{ partial "sections/head.html" $s }}
<div class="plan-switch">
  {{ if gt (len $s.groups) 1 }}
    {{ range $i, $g := $s.groups }}
    <input type="radio" class="plan-radio" name="{{ $key }}" id="{{ $key }}-{{ $i }}" aria-label="{{ $g.label }}"{{ if eq $i 0 }} checked{{ end }}>
    {{ end }}
    <div class="plan-tabs" aria-hidden="true">
      {{ range $i, $g := $s.groups }}<label for="{{ $key }}-{{ $i }}">{{ $g.label }}</label>{{ end }}
    </div>
  {{ end }}

  <div class="plan-panels">
    {{ range $s.groups }}
    <div class="plan-panel"{{ with .id }} id="{{ . }}"{{ end }}>
      {{ with .lede }}<p class="plan-lede">{{ . | markdownify }}</p>{{ end }}

      {{ with .tiers }}
      <ol class="tier-list">
        {{ range . }}
        <li class="tier">
          <div class="tier-head">
            <h3 class="tier-name">{{ .name }}</h3>
            <p class="tier-price"><span class="tier-amount">{{ .price }}</span>{{ with .unit }}<span class="tier-unit">{{ . }}</span>{{ end }}</p>
            {{ with .note }}<p class="tier-note">{{ . | markdownify }}</p>{{ end }}
          </div>
          <div class="tier-body">
            {{ with .intro }}<p class="tier-intro">{{ . | markdownify }}</p>{{ end }}
            <ul class="tier-features">
              {{ range .features }}<li>{{ . | markdownify }}</li>{{ end }}
            </ul>
          </div>
        </li>
        {{ end }}
      </ol>
      {{ end }}

      {{ with .includes }}
      <div class="plan-block">
        {{ with .headline }}<h3 class="plan-subhead">{{ . }}</h3>{{ end }}
        <ul class="check-list">
          {{ range .items }}<li>{{ . | markdownify }}</li>{{ end }}
        </ul>
        {{ with .note }}<p class="plan-note">{{ . | markdownify }}</p>{{ end }}
      </div>
      {{ end }}

      {{ with .addons }}
      <div class="plan-block">
        {{ with .headline }}<h3 class="plan-subhead">{{ . }}</h3>{{ end }}
        {{ with .lede }}<p class="plan-note plan-note-top">{{ . | markdownify }}</p>{{ end }}
        <ul class="addon-row">
          {{ range .items }}
          <li class="addon">
            <h4 class="addon-name">{{ .name }}</h4>
            <p class="tier-price"><span class="tier-amount">{{ .price }}</span>{{ with .unit }}<span class="tier-unit">{{ . }}</span>{{ end }}</p>
            {{ with .body }}<p class="addon-body">{{ . | markdownify }}</p>{{ end }}
          </li>
          {{ end }}
        </ul>
      </div>
      {{ end }}

      {{ with .apps }}
      <div class="plan-block">
        {{ with .headline }}<h3 class="plan-subhead">{{ . }}</h3>{{ end }}
        {{ with .lede }}<p class="plan-note plan-note-top">{{ . | markdownify }}</p>{{ end }}
        <div class="table-scroll">
        <table class="compare-table app-price-table">
          <thead><tr><th scope="col">App</th><th scope="col">What it does</th><th scope="col">Price</th></tr></thead>
          <tbody>
            {{ range .items }}
            <tr>
              <th scope="row">{{ .name }}{{ with .category }}<span class="matrix-layer">{{ . }}</span>{{ end }}</th>
              <td>{{ .body | markdownify }}</td>
              <td class="app-price">{{ .price }}</td>
            </tr>
            {{ end }}
          </tbody>
        </table>
        </div>
      </div>
      {{ end }}

      {{ with .ctas }}<div class="cta-row mt-2">{{ partial "sections/ctas.html" . }}</div>{{ end }}
    </div>
    {{ end }}
  </div>
</div>
{{ if $s.ctas }}<div class="cta-row mt-2">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}