{% if folders %}
{% for folder in folders %}
<div class="mb-2">
    <div class="flex items-center gap-1 text-gray-400 group">
        <i data-lucide="folder" class="w-3.5 h-3.5 text-yellow-500"></i>
        <span class="text-xs truncate flex-1" title="{{ folder.path }}">{{ folder.path }}</span>
        <button onclick="event.stopPropagation(); removeFolder('{{ folder.path }}')" class="hidden group-hover:block text-gray-500 hover:text-red-400 p-0.5" title="Remove folder">
            <i data-lucide="x" class="w-3 h-3"></i>
        </button>
    </div>
    <div class="pl-4 mt-1 space-y-0.5">
        {% for file in folder.files %}
        <div class="flex items-center gap-1 py-0.5 cursor-pointer hover:text-white text-gray-400" onclick="previewFile('{{ file.path }}')">
            <i data-lucide="file" class="w-3 h-3"></i>
            <span class="text-xs truncate flex-1">{{ file.name }}</span>
            <span class="text-xs text-gray-600">{{ file.size }}</span>
        </div>
        {% endfor %}
        {% if not folder.files %}
        <div class="text-xs text-gray-600 py-0.5">No data files</div>
        {% endif %}
    </div>
</div>
{% endfor %}
{% else %}
<div class="text-gray-500 py-1">No folders added</div>
{% endif %}