{{- $name := .Get "diagram" -}}
{{- $id := printf "rollout-%s-%d" $name .Ordinal -}}
{{- $asset := resources.Get (printf "rollouts/%s.svg" $name) -}}
{{- if not $asset -}}
  {{- errorf "Missing rollout diagram %q on %s" $name .Page.File.Path -}}
{{- end -}}
{{- $svg := replaceRE `<\?xml[^>]*\?>` "" $asset.Content -}}
{{- $simple := strings.Contains $asset.Content `class="algorithm-flow"` -}}
{{/* Each original has its own glyph/clip IDs. Namespace them before inlining. */}}
{{- $svg = replaceRE `id="([^"]+)"` (printf `id="%s-${1}"` $id) $svg -}}
{{- $svg = replace $svg `href="#` (printf `href="#%s-` $id) -}}
{{- $svg = replace $svg `url(#` (printf `url(#%s-` $id) -}}
{{- $svg = replace $svg `<svg ` (printf `<svg role="img" aria-labelledby="%s-title %s-description" focusable="false" ` $id $id) -}}
<figure class="docs-rollout" data-rollout{{ if $simple }} data-algorithm-flow{{ end }} data-diagram="{{ $name }}" data-direction="{{ .Get "direction" | default "down" }}" aria-labelledby="{{ $id }}-title">
  <figcaption class="docs-rollout-caption">
    <span class="docs-rollout-title" id="{{ $id }}-title">{{ .Get "title" }}</span>
    <span class="docs-rollout-description{{ if $simple }} docs-sr-only{{ end }}" id="{{ $id }}-description">{{ .Get "description" }}</span>
  </figcaption>
  <div class="docs-rollout-stage">{{ $svg | safeHTML }}</div>
  <div class="docs-rollout-controls" hidden>
    <div class="docs-rollout-progress">
      <progress data-rollout-progress max="1" value="1" aria-label="Diagram animation progress"></progress>
      <span data-rollout-status>Complete diagram</span>
    </div>
    <div class="docs-rollout-actions">
      <button type="button" data-rollout-play aria-label="Play diagram animation">
        <svg class="docs-rollout-play-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="m5 3 7 5-7 5Z" fill="currentColor"/></svg>
        <svg class="docs-rollout-pause-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M5.5 3v10m5-10v10" stroke="currentColor" stroke-width="2"/></svg>
        <span data-rollout-play-label>Play</span>
      </button>
      <button type="button" data-rollout-replay aria-label="Replay diagram animation">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 5.5a5 5 0 1 1-.3 4M3.5 2.5v3h3"/></svg>
        <span>Replay</span>
      </button>
    </div>
  </div>
</figure>