{{ $title := .Attributes.title }}
{{ $hasTitle := ne $title "" }}
{{ $id := printf "mermaid-%d" now.UnixNano }}

<div class="mermaid-wrapper" id="{{ $id }}">
  <div class="mermaid-container">
    <pre class="mermaid">
{{- .Inner | htmlEscape | safeHTML -}}
</pre>
    <div class="mermaid-overlay-btns">
      <button class="mermaid-source-btn" onclick="toggleMermaidSource('{{ $id }}')" title="View source">source</button>
      <button class="mermaid-copy-btn" onclick="copyMermaidSource('{{ $id }}')" title="Copy to clipboard">copy</button>
    </div>
  </div>

  <div class="mermaid-source">
    <button class="mermaid-diagram-btn" onclick="toggleMermaidSource('{{ $id }}')">&larr; back to diagram</button>
    <pre class="mermaid-source-code"><code>{{ .Inner }}</code></pre>
  </div>

  {{ if $hasTitle }}
  <div class="mermaid-caption-row">
    <span class="mermaid-caption">{{ $title }}</span>
  </div>
  {{ end }}
</div>

{{ .Page.Store.Set "hasMermaid" true }}