{{/* Artikel-Fuß für Library-Beiträge: Quellenangabe (zitieren), Aktionsreihe
     (Dialog links, Tags rechts) und der Versionsverlauf (eine Zeile darunter). */}}
{{ $author := .Params.author | default site.Params.author.name }}

{{/* Zitieren: schlichter Link direkt unter den Quellen. */}}
<div class="cite">
  <button type="button" class="cite-toggle" aria-expanded="false">zitieren</button>
  <div class="cite-box" hidden
    data-title="{{ .Title }}"
    data-author="{{ $author }}"
    data-url="{{ .Permalink }}"
    data-year="{{ .Date.Format "2006" }}">
    <p class="cite-text"></p>
    <div class="cite-actions">
      <button type="button" class="cite-fmt is-active" data-fmt="apa">APA</button>
      <button type="button" class="cite-fmt" data-fmt="din">DIN</button>
      <button type="button" class="cite-copy">kopieren</button>
      <span class="cite-status" role="status"></span>
    </div>
  </div>
</div>

{{/* Aktionsreihe: Dialog links, Tags ganz rechts. */}}
<div class="article-actions">
  <a class="prov-dialog" id="dialog-link" data-thread="{{ .RelPermalink }}" href="/dialog/?thread={{ .RelPermalink }}">→ Dialog</a>
  {{ with .Params.tags }}
    <ul class="tag-pills" aria-label="Tags">
      {{- range . -}}<li><a href="/tags/{{ . | urlize }}/">{{ . }}</a></li>{{- end -}}
    </ul>
  {{ end }}
</div>

{{/* Versionen: eine Zeile darunter; öffnet den Verlauf direkt auf der Seite. */}}
<div class="article-versions">
  <button type="button" class="versions-toggle" id="version-badge" aria-expanded="false"
    data-path="{{ .File.Path }}">Versionen</button>
</div>

<script>
  /* Zitieren: APA/DIN umschaltbar, gesamthaft kopierbar. */
  (function () {
    if (window.__cite) return; window.__cite = 1;
    var toggle = document.querySelector('.cite-toggle');
    var box = document.querySelector('.cite-box');
    if (!toggle || !box) return;
    var textEl = box.querySelector('.cite-text');
    var statusEl = box.querySelector('.cite-status');
    var d = box.dataset;
    var fmt = 'apa';

    function nameParts(n) {
      var p = (n || '').trim().split(/\s+/);
      var last = p.pop() || '';
      return { last: last, first: p.join(' '), initials: p.map(function (w) { return w.charAt(0) + '.'; }).join(' ') };
    }
    function today() { return new Date().toLocaleDateString('de-CH'); }
    function build() {
      var n = nameParts(d.author);
      if (fmt === 'din') {
        return (n.last ? n.last.toUpperCase() + ', ' + n.first + ': ' : '')
          + d.title + '. OPENBUREAU. ' + d.url + ' (abgerufen am ' + today() + ').';
      }
      return (n.last ? n.last + ', ' + n.initials + ' ' : '')
        + '(' + d.year + '). ' + d.title + '. OPENBUREAU. Abgerufen am ' + today() + ', von ' + d.url;
    }
    function render() { textEl.textContent = build(); }
    function copy() {
      var t = build();
      if (navigator.clipboard && navigator.clipboard.writeText) return navigator.clipboard.writeText(t);
      return new Promise(function (res, rej) {
        try {
          var ta = document.createElement('textarea'); ta.value = t; ta.style.position = 'fixed'; ta.style.opacity = '0';
          document.body.appendChild(ta); ta.select();
          var ok = document.execCommand('copy'); document.body.removeChild(ta); ok ? res() : rej();
        } catch (e) { rej(e); }
      });
    }
    toggle.addEventListener('click', function () {
      var open = box.hasAttribute('hidden');
      if (open) { box.removeAttribute('hidden'); render(); } else { box.setAttribute('hidden', ''); }
      toggle.setAttribute('aria-expanded', String(open));
    });
    box.querySelectorAll('.cite-fmt').forEach(function (b) {
      b.addEventListener('click', function () {
        fmt = b.dataset.fmt;
        box.querySelectorAll('.cite-fmt').forEach(function (x) { x.classList.toggle('is-active', x === b); });
        render();
      });
    });
    box.querySelector('.cite-copy').addEventListener('click', function () {
      copy().then(function () { statusEl.textContent = 'kopiert ✓'; })
            .catch(function () {
              statusEl.textContent = 'markieren & kopieren';
              var r = document.createRange(); r.selectNodeContents(textEl);
              var s = window.getSelection(); s.removeAllRanges(); s.addRange(r);
            });
      setTimeout(function () { statusEl.textContent = ''; }, 2500);
    });
  })();
</script>
<script>
  /* Wortmeldungs-Zahl an die Dialog-Pill hängen (→ Dialog · 3). */
  (function () {
    var l = document.getElementById('dialog-link'); if (!l) return;
    fetch('/api/comments?thread=' + encodeURIComponent(l.dataset.thread))
      .then(function (r) { return r.ok ? r.json() : []; })
      .then(function (d) { var n = d.filter(function (c) { return !c.deleted; }).length; if (n) l.textContent = '→ Dialog · ' + n; })
      .catch(function () {});
  })();
</script>