<div id="folder-{{ folder.id }}" class="card bg-base-100 shadow-xl border border-base-300 hover:shadow-lg">
                     
    <div class="card-body" data-loading-states>
        <div class="flex justify-between items-start mb-2">
            <h3 class="text-xl font-bold truncate flex-grow">{{ folder.name }}</h3>
            <div class="flex space-x-2">
                <button class="btn btn-sm btn-outline"
                        hx-get="/api/folders/{{ folder.id }}/edit"
                        hx-target="#modal-holder"
                        hx-swap="innerHTML"
                        hx-trigger="click"
                        data-loading-disable
                        >
                    <i class="fas fa-edit" data-loading-class="!hidden"></i>
                    <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
                </button>
                <button class="btn btn-sm btn-outline btn-error fade-me-out delete-button"
                        hx-delete="/api/folders/{{ folder.id }}"
                        hx-swap="outerHTML settle:300ms"
                        hx-confirm="Are you sure you want to delete this folder?"
                        data-loading-disable
                        >
                    <i class="fas fa-trash" data-loading-class="!hidden"></i>
                    <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
                </button>
            </div>
        </div>
        
        <!-- Email count badges placed below title but in a separate row -->
        <div class="flex flex-wrap justify-between items-center mb-2 gap-1">
            <div class="flex flex-wrap gap-1">
                <span class="badge badge-outline cursor-pointer">{{ folder.total_count }} emails</span>
                {% if folder.pending_count > 0 %}
                <button
                    class="badge badge-warning cursor-pointer"
                    hx-get="/api/folders/{{ folder.id }}/pending-emails"
                    hx-target="#modal-holder"
                    hx-swap="innerHTML"
                    hx-trigger="click"
                    title="{{ folder.pending_count }} pending emails"
                >
                    {{ folder.pending_count }} pending
                </button>
                {% else %}
                <span class="badge badge-secondary cursor-pointer" x-tooltip.raw.html="{% if folder.recent_emails %}<table class='text-xs'><tr><th class='text-left pr-2'>Subject</th><th class='text-left'>Date</th></tr>{% for email in folder.recent_emails %}<tr><td class='text-left pr-2 truncate max-w-[150px]'>{{ email.subject }}</td><td class='text-left'>{{ email.date[:10] if email.date else 'N/A' }}</td></tr>{% endfor %}</table>{% else %}No recent emails{% endif %}">{{ folder.pending_count }} pending</span>
                {% endif %}
            </div>
            {% if folder.priority == 1 %}
                <span class="badge badge-error">High Priority</span>
            {% elif folder.priority == -1 %}
                <span class="badge badge-info">Low Priority</span>
            {% else %}
                <span class="badge badge-primary">Normal Priority</span>
            {% endif %}
        </div>
 
        <div class="bg-base-200 rounded-box p-4 mb-4">
            <p class="text-base-content/80">{{ folder.rule_text }}</p>
        </div>
        
        <div class="flex justify-between items-center mt-2">
            <div class="flex items-center space-x-2">
                <span class="text-xs">Organize:</span>
                <input
                    type="checkbox"
                    class="toggle toggle-sm toggle-success"
                    {% if folder.organize_enabled %}checked="checked"{% endif %}
                    hx-put="/api/folders/{{ folder.id }}/toggle"
                    hx-swap="outerHTML settle:300ms"
                    hx-trigger="click"
                    data-loading-disable
                    aria-label="Toggle organize enabled">
                </input>
 
                <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
            </div>
        </div>
    </div>
</div>