<ul class="list-group list-group-flush mb-0 ai-application-popover-list" role="list">
    <% for (var i = 0; i < citations.length; i++) { 
        var c = citations[i]; %>
        <li class="list-group-item px-3 mt-1 mb-1" role="listitem">
            <a href="<%- c.url %>" class="media align-items-start text-decoration-none">
                <img 
                    class="mr-3 rounded flex-shrink-0 <%- c.app_icon_used ? 'ai-app-icon' : '' %>" 
                    src="<%- c.image %>" 
                    width="40" 
                    height="40" 
                    alt="<%- c.title %>"
                />
                <div class="media-body d-flex flex-column overflow-hidden">
                    <small class="text-truncate <%- (typeof c.date_created === 'undefined' || c.date_created === '') ? 'mt-2' : '' %>">
                        <%- c.title %>
                    </small>
                    
                    <% if (typeof c.date_created !== "undefined" && c.date_created !== '') { %>
                        <small class="text-muted">
                            <%- c.date_created %>
                        </small>
                    <% } %>
                </div>
            </a>
        </li>
    <% } %>
</ul>
