{% if items %}
{% for item in items %}
<div class="history-item py-1.5 px-2 rounded cursor-pointer hover:bg-[#21262d] group" onclick="useHistoryQuery('{{ item.id }}')">
    <div class="flex items-center justify-between">
        <span class="text-xs text-gray-400 truncate flex-1">{{ item.connection_name }}</span>
        <span class="text-xs text-gray-600">{{ item.created_at }}</span>
    </div>
    <div class="text-xs font-mono text-gray-300 truncate mt-0.5">{{ item.sql | truncate(80) }}</div>
    <div class="flex items-center gap-2 mt-0.5">
        {% if item.error %}
        <span class="text-xs text-red-400">Error</span>
        {% else %}
        <span class="text-xs text-green-400">{{ item.row_count }} rows</span>
        <span class="text-xs text-gray-500">{{ item.execution_time_ms }}ms</span>
        {% endif %}
    </div>
</div>
{% endfor %}
{% else %}
<div class="text-gray-500 py-1">No history yet</div>
{% endif %}