{{- $src := .Get "src" -}}
{{- if not $src -}}
  {{- errorf "interactive-diagram shortcode: missing src: %s" .Position -}}
{{- end -}}
{{- $filePath := path.Join .Page.File.Dir $src -}}
{{- if not (fileExists $filePath) -}}
  {{- errorf "interactive-diagram shortcode: file %q not found: %s" $filePath .Position -}}
{{- end -}}
{{- $diagram := readFile $filePath | transform.Unmarshal -}}
{{- $type := $diagram.type | default "sequence" -}}
{{- $id := printf "interactive-diagram-%s-%d" .Page.File.UniqueID .Ordinal -}}
{{- .Page.Store.Set "interactive-diagram" true -}}
<figure
  id="{{ $id }}"
  class="interactive-diagram interactive-diagram--{{ $type }} not-prose my-6"
  data-interactive-diagram
  data-diagram-type="{{ $type }}"
  aria-labelledby="{{ $id }}-title"
>
  <figcaption class="interactive-diagram__header">
    <div class="interactive-diagram__header-copy">
      <p id="{{ $id }}-title" class="interactive-diagram__title">
        {{ $diagram.title }}
      </p>
      <p class="interactive-diagram__description">{{ $diagram.description }}</p>
    </div>
  </figcaption>
  <div class="interactive-diagram__stage" data-diagram-stage></div>
  {{- if eq $type "topology" }}
    <div
      class="interactive-diagram__topology-detail"
      data-topology-detail
      aria-live="polite"
      aria-atomic="true"
    >
      <p class="interactive-diagram__topology-category" data-topology-category>
        {{ $diagram.overview.category }}
      </p>
      <div class="interactive-diagram__topology-detail-copy">
        <p class="interactive-diagram__topology-title" data-topology-title>
          {{ $diagram.overview.label }}
        </p>
        <p class="interactive-diagram__topology-body" data-topology-body>
          {{ $diagram.overview.body }}
        </p>
      </div>
    </div>
  {{- else }}
    <div
      class="interactive-diagram__status"
      aria-live="polite"
      aria-atomic="true"
    >
      <div class="interactive-diagram__step-copy">
        <span class="interactive-diagram__step-number" data-step-number></span>
        <div>
          <p class="interactive-diagram__step-title" data-step-title></p>
          <p class="interactive-diagram__step-body" data-step-body></p>
        </div>
      </div>
      <p class="interactive-diagram__state" data-step-state></p>
    </div>
    <div class="interactive-diagram__controls" data-diagram-controls>
      <button
        type="button"
        class="interactive-diagram__button"
        data-step-previous
      >
        Previous
      </button>
      <div
        class="interactive-diagram__progress"
        data-step-progress
        aria-label="Diagram steps"
      ></div>
      <button type="button" class="interactive-diagram__button" data-step-next>
        Next
      </button>
    </div>
  {{- end }}
  <div class="interactive-diagram__fallback">
    {{- if eq $type "topology" }}
      <ul>
        {{- range $diagram.nodes }}
          <li>{{ .label }}: {{ .details }}</li>
        {{- end }}
        {{- range $diagram.edges }}
          <li>{{ .label }}: {{ .details }}</li>
        {{- end }}
      </ul>
    {{- else }}
      <ol>
        {{- range $diagram.steps }}
          <li>{{ .label }}: {{ .body }}</li>
        {{- end }}
      </ol>
    {{- end }}
  </div>
  <script type="application/json" data-interactive-diagram-config>
    {{- $diagram | jsonify | safeJS -}}
  </script>
</figure>