{{define "flow"}}{{with .Flow}}{{if .Show}}
<section class="flow" aria-label="How this app's versions reach the web">
  <ol class="flow-line">
    <li class="flow-stage flow-origin{{if .Shipped}} is-held{{end}}">
      <p class="flow-label">you shipped</p>
      <p class="flow-version">{{if .Shipped}}<code>{{.Shipped}}</code>{{else}}nothing yet{{end}}</p>
      {{if not .ShippedAt.IsZero}}<p class="flow-note">{{ago .ShippedAt}}</p>{{end}}
    </li>
    {{range .Line}}{{template "flow_stage" .}}{{end}}
  </ol>
  {{if .Tests}}
  <p class="flow-band">Test versions — no delay, and they can point anywhere.</p>
  <ul class="flow-line flow-aside">{{range .Tests}}{{template "flow_stage" .}}{{end}}</ul>
  {{end}}
  {{if .Extra}}
  <p class="flow-band">Following a channel outside the release path.</p>
  <ul class="flow-line flow-aside">{{range .Extra}}{{template "flow_stage" .}}{{end}}</ul>
  {{end}}
  <p class="small flow-caption">A version moves one step at a time, left to right. Promoting is what moves it.</p>
</section>
{{end}}{{end}}{{end}}

{{/* One box: a channel, what it holds, and the addresses it feeds. Used as an
     <li> in both the ordered release path and the unordered bands below it. */}}
{{define "flow_stage"}}
<li class="flow-stage{{if .Version}} is-held{{end}}{{if .Carried}} is-carried{{end}}">
  <p class="flow-label">{{.Name}}</p>
  <p class="flow-version">{{if .Version}}<code>{{.Version}}</code>{{else}}nothing{{end}}</p>
  {{if .Hold}}<p class="flow-note">{{if .FastTrack}}delay skipped{{else}}waits {{.Hold}} here{{end}}</p>{{end}}
  {{if .Err}}<p class="flow-note error">{{.Err}}</p>{{end}}
  {{if .RolledUp}}
  <p class="flow-note">{{.Total}} addresses{{if .Attention}} · <span class="error">{{.Attention}} need{{if eq .Attention 1}}s{{end}} attention</span>{{end}}</p>
  {{if .Addresses}}
  <ul class="flow-addrs">
    {{range .Addresses}}
    <li class="flow-addr flow-tone-{{.Tone}}">
      <a href="https://{{.Host}}">{{.Host}}</a>
      <span class="flow-health">{{if eq .Tone "bad"}}{{icon "triangle-alert"}}{{end}}{{.Health}}</span>
    </li>
    {{end}}
  </ul>
  {{end}}
  <p class="flow-note"><a href="{{.MoreURL}}">{{if .Hidden}}+{{.Hidden}} more · {{end}}all addresses</a></p>
  {{else}}{{if .Addresses}}
  <ul class="flow-addrs">
    {{range .Addresses}}
    <li class="flow-addr flow-tone-{{.Tone}}">
      <a href="https://{{.Host}}">{{.Host}}</a>
      <span class="flow-health">{{if eq .Tone "bad"}}{{icon "triangle-alert"}}{{end}}{{.Health}}</span>
    </li>
    {{end}}
  </ul>
  {{end}}{{end}}
</li>
{{end}}