{% extends shell('app') %}
{% from "citation/_cite_dialog.html" import cite_dialog %}
{% set title = _("How to cite us") %}

{#- The hub's references, each in the format a reader picks. -#}

{% block content %}
<div class="card">
    <div class="card-body">
        <h1 class="h3 mb-4">{{ _("How to cite us") }}</h1>
        {% if references %}
        {% for reference in references %}
        {% set work = works(reference) %}
        <section class="mb-4" data-citation-source="{{ url_for('citation.cite_reference', key=reference.key, fmt='__FORMAT__') }}">
            <h2 class="h5">{{ reference.label }}</h2>
            <p>
                {{ work.creators | map(attribute="name") | join(", ") }}.
                <i>{{ work.title }}</i>{% if work.container %}, {{ work.container }}{% endif %}{% if work.year %}, {{ work.year }}{% endif %}{% if work.doi %},
                <a href="https://doi.org/{{ work.doi }}" target="_blank" rel="noopener">https://doi.org/{{ work.doi }}</a>{% endif %}
            </p>
            <div class="btn-group btn-group-sm flex-wrap mb-2" role="group" aria-label="{{ _('Format') }}">
                {% for fmt in citation_formats %}
                <button type="button" class="btn btn-outline-primary" data-citation-format="{{ fmt.key }}"
                        aria-pressed="false">{{ fmt.label }}</button>
                {% endfor %}
            </div>
            <pre class="bg-light p-3 rounded mb-2 citation-text d-none" data-citation-text aria-live="polite"></pre>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-sm btn-light" data-citation-copy
                        data-copied-label="{{ _('Copied!') }}" disabled>{{ _('Copy') }}</button>
                <a class="btn btn-sm btn-light disabled" data-citation-download href="#" aria-disabled="true">{{ _('Download') }}</a>
            </div>
        </section>
        {% endfor %}
        {% else %}
        <p class="text-muted mb-0">{{ _("This hub lists no references of its own.") }}</p>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('citation.assets', subfolder='js', filename='citation.js') }}" nonce="{{ csp_nonce() }}"></script>
{% endblock %}