{#- A dialog that shows a work in the format a reader picks, fetched when it
    is picked, with a copy and a download (citation.js). `sources` are
    (label, url with __FORMAT__ in place of the format) pairs: one for a
    dataset, one per reference of the hub's "Cite us", each a tab. `qr_url`
    is the QR code of its identifier, which `qr_label` names (dataset's
    identifier_label: DOI, or ID for one of the hub's own), and `qr_caption`
    the address it leads to, written under it. The dialog opens on
    `default_format` (a citation in words), already fetched. -#}
{% macro cite_dialog(id, title_, sources, citation_formats, qr_url=none, qr_label="DOI", qr_caption=none, default_format="text") -%}
<div class="modal fade" id="{{ id }}" tabindex="-1" aria-labelledby="{{ id }}-title" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ id }}-title">{{ title_ }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _('Close') }}"></button>
            </div>
            <div class="modal-body">
                {% if sources | length > 1 %}
                <ul class="nav nav-tabs mb-3" role="tablist">
                    {% for label, url in sources %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link{% if loop.first %} active{% endif %}" type="button" role="tab"
                                data-bs-toggle="tab" data-bs-target="#{{ id }}-source-{{ loop.index }}"
                                aria-controls="{{ id }}-source-{{ loop.index }}"
                                aria-selected="{{ 'true' if loop.first else 'false' }}">{{ label }}</button>
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
                <div class="tab-content">
                    {% for label, url in sources %}
                    <div class="tab-pane fade{% if loop.first %} show active{% endif %}" role="tabpanel"
                         id="{{ id }}-source-{{ loop.index }}" data-citation-source="{{ url }}">
                        <div class="btn-group btn-group-sm flex-wrap mb-3" role="group" aria-label="{{ _('Format') }}">
                            {% for fmt in citation_formats %}
                            <button type="button" class="btn btn-outline-primary" data-citation-format="{{ fmt.key }}"
                                    {% if fmt.key == default_format %}data-citation-default {% endif %}aria-pressed="false">{{ fmt.label }}</button>
                            {% endfor %}
                        </div>
                        <div class="position-relative">
                            <pre class="bg-body-tertiary p-3 rounded mb-2 citation-text" id="{{ id }}-text-{{ loop.index }}" data-citation-text aria-live="polite">{{ _('Loading the citation…') }}</pre>
                        </div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-sm btn-primary" data-citation-copy
                                    data-copy-target="{{ id }}-text-{{ loop.index }}"
                                    data-copied-label="{{ _('Copied!') }}" disabled>{{ icon('copy', size=16, class_='me-1') }}<span data-copy-label>{{ _('Copy') }}</span></button>
                            <a class="btn btn-sm btn-light disabled" data-citation-download href="#" aria-disabled="true">{{ _('Download') }}</a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% if qr_url %}
                <hr>
                <div class="text-center">
                    <img src="{{ qr_url }}" alt="{{ _('QR code that leads to %(address)s', address=qr_caption) if qr_caption else _('QR code of the %(identifier)s', identifier=qr_label) }}" width="180" height="180" loading="lazy">
                    {% if qr_caption %}<p class="small text-body-secondary mt-2 mb-0 text-break">{{ qr_caption }}</p>{% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{%- endmacro %}