{% load static %}
References on: {{ object }}
<link rel="stylesheet"
      href="{% static "css/apis_bibsonomy/zoteroentry.css" %}">
<div class="mt-4">
    <ul class="list-group list-group-flush">
        {% for reference in object_list %}
            <li class="justify-content-between align-items-center d-flex">
                <div class="reference-item">
                    {% include "apis_bibsonomy/partials/zoteroentry.html" with object=reference.zoteroentry %}
                    <div class="reference-metadata metadata">
                        {% if reference.pages_start or reference.pages_end %}
                            <span>Pages: {{ reference.pages_start }}-{{ reference.pages_end }}</span>
                        {% endif %}
                        {% if reference.folio %}<span>Folio: {{ reference.folio }}</span>{% endif %}
                    </div>
                    {% if reference.notes %}<div class="notes">Notes: {{ reference.notes }}</div>{% endif %}
                </div>
                {% if request.user.is_authenticated %}
                    <div>
                        <a href="{% url 'apis_bibsonomy:referenceupdate' reference.id %}"
                           class="text-warning"><span class="material-symbols-outlined">edit</span></a>
                        <a href="{% url "apis_bibsonomy:referencedelete" reference.id %}?redirect={{ request.path }}"
                           hx-delete="{% url "apis_bibsonomy:reference-detail" reference.id %}"
                           hx-confirm="Are your sure you want to delete reference {{ reference }} for {{ reference.referenced_object }}"
                           hx-target="closest li"
                           hx-swap="outerHTML swap:1s"
                           class="text-danger"><span class="material-symbols-outlined">delete</span></a>
                    </div>
                {% endif %}
            </li>
        {% empty %}
            <div class="d-flex justify-content-center">No references yet.</div>
        {% endfor %}
    </ul>
    {% if form %}
        <div class="mt-4 pt-4 border-top">
            <div class="d-flex justify-content-center fw-bold">Add a new reference</div>
            {% load crispy_forms_tags %}
            {% crispy form form.helper %}
        </div>
    {% endif %}
    <script>
document.body.addEventListener('htmx:configRequest', (event) => {
    event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
})
    </script>
</div>