{% with id_suffix=collection_relation.id %}
    <button type="button"
            class="btn btn-link p-0 ms-1 text-body"
            aria-label="Show information"
            title="Collection relation information"
            aria-haspopup="dialog"
            aria-controls="information-modal-{{ id_suffix }}"
            data-bs-toggle="modal"
            data-bs-target="#information-modal-{{ id_suffix }}">
        <i class="bi bi-search"></i>
    </button>
    <div class="modal"
         id="information-modal-{{ id_suffix }}"
         tabindex="-1"
         aria-labelledby="information-modal-{{ id_suffix }}-label"
         aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="information-modal-{{ id_suffix }}-label">
                        Information for <code>{{ collection_relation.source.name }}</code> → <code>{{ collection_relation.target.name }}</code>
                        {% if collection_relation.position %}
                            (<code>{{ collection_relation.get_type_display }}</code> position: {{ collection_relation.position }})
                        {% else %}
                            (<code>{{ collection_relation.get_type_display }}</code>)
                        {% endif %}
                    </h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-sm table-hover table-striped">
                        <tbody>
                            <tr>
                                <th>Created at</th>
                                <td>{{ collection_relation.created_at|date:"Y-m-d H:i" }}</td>
                            </tr>
                            <tr>
                                <th>Created by user</th>
                                <td>
                                    <code>{{ collection_relation.created_by_user }}</code>
                                </td>
                            </tr>
                            <tr>
                                <th>Updated at</th>
                                <td>{{ collection_relation.updated_at|date:"Y-m-d H:i" }}</td>
                            </tr>
                            <tr>
                                <th>Updated by user</th>
                                <td>
                                    <code>{{ collection_relation.updated_by_user|default_if_none:"" }}</code>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
{% endwith %}