{{ define "title" }}{{ with .Params.seoTitle }}{{ . }} | {{ $.Site.Title }}{{ else }}{{ .Title }} in XSLT — what it does, with examples you can run | {{ .Site.Title }}{{ end }}{{ end }}
{{ define "main" }}
<article class="post ref-page">
  <p class="eyebrow">XSLT Reference</p>
  <h1>{{ .Title }}</h1>
  <div class="ref-meta">
    {{ with .Params.versionLabel }}
    {{ $verUrl := "https://xsltplayground.com/" }}
    {{ if eq . "XSLT 2.0" }}{{ $verUrl = "https://xsltplayground.com/xslt-2-0/" }}{{ end }}
    {{ if eq . "XSLT 3.0" }}{{ $verUrl = "https://xsltplayground.com/xslt-3-0/" }}{{ end }}
    <a class="ref-badge" href="{{ $verUrl }}" title="Test {{ . }} online">{{ . }}</a>
    {{ end }}
    {{ with .Params.category }}<span class="ref-badge ref-badge--cat">{{ . }}</span>{{ end }}
  </div>
  {{ with .Description }}<p class="lead">{{ . }}</p>{{ end }}
  {{ with .Params.syntax }}
  <div class="ref-syntax">
    <span class="ref-syntax-label">Syntax</span>
    <pre><code>{{ . }}</code></pre>
  </div>
  {{ end }}
  {{ partial "adsense/in-article.html" . }}
  <div class="content">
    {{ .Content }}
  </div>
  {{- if and .Site.Params.ethicalads.publisher (ne hugo.Environment "development") -}}
  <div class="ad">
    <div class="ethical-ad" data-ea-publisher="{{ .Site.Params.ethicalads.publisher }}" data-ea-type="text"></div>
  </div>
  {{- end }}
  <div class="ref-try">
    {{ if .Params.tryUrl }}
    {{- /* The playground runs inline in an iframe, but only once the reader asks
           for it: embedding it eagerly on 230 reference pages would load the
           whole editor bundle on every page view and wreck the LCP work. */ -}}
    <button type="button" class="button ref-run" data-run-url="{{ .Params.tryUrl }}">▶ Run this example here</button>
    <a href="{{ .Params.tryUrl }}" class="button button--ghost" target="_blank" rel="noopener noreferrer">Open in the full editor →</a>
    <div class="ref-embed" hidden></div>
    {{ else }}
    <a href="https://xsltplayground.com/" class="button" target="_blank" rel="noopener noreferrer">Try it in XSLT Playground →</a>
    {{ end }}
  </div>
  <p class="muted back-link"><a href="{{ .CurrentSection.RelPermalink }}">← Back to XSLT Reference</a></p>
  {{ partial "related-posts.html" . }}
</article>
{{ end }}
{{ define "scripts" }}
<script>
  // Lazily swap the button for an embedded playground running this page's example.
  document.querySelectorAll(".ref-run").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var host = btn.parentElement.querySelector(".ref-embed");
      if (!host || host.dataset.loaded) return;
      var url = btn.dataset.runUrl;
      url += (url.indexOf("?") === -1 ? "?" : "&") + "embed=1";
      var frame = document.createElement("iframe");
      frame.src = url;
      frame.title = "XSLT Playground — live example";
      frame.loading = "lazy";
      frame.className = "ref-embed-frame";
      host.appendChild(frame);
      host.hidden = false;
      host.dataset.loaded = "1";
      btn.disabled = true;
      btn.textContent = "▶ Running below";
    });
  });
</script>
{{ end }}