{% load i18n %}
{% comment %}
  <c-card.citation> — how to cite the record, with a button that copies it.

  The card's element id is `cite`, which every overview page's Cite button jumps to.

  Attributes:
    title  – "Citation" on every record
    text   – the citation, as plain text
    class  – extra classes on the card
  Slots:
    (default) – a note under the citation, e.g. why it points at this page rather than a DOI
{% endcomment %}
<c-vars title text class />
<c-mvp.card title="{{ title }}" class="bg-base-100 scroll-mt-24 {{ class }}" id="cite" data-card="citation" only>
  <p class="text-sm bg-base-200 rounded-box p-3 break-words" id="citation-text">{{ text }}</p>
  {% if slot %}<div class="text-xs text-base-content/70">{{ slot }}</div>{% endif %}
  <c-slot name="footer">
    <button type="button" class="btn btn-sm"
            onclick="navigator.clipboard.writeText(document.getElementById('citation-text').innerText); this.querySelector('[data-copied]').classList.remove('hidden')">
      <c-icon name="copy" aria-hidden="true" />
      {% translate "Copy" %}
      <span data-copied class="hidden text-success" role="status">{% translate "Copied" %}</span>
    </button>
    {% translate "Export" as label %}
    {% translate "The citation in APA, BibTeX and other formats." as reason %}
    <c-actions.pending label="{{ label }}" icon="download" reason="{{ reason }}" only />
  </c-slot>
</c-mvp.card>