<div class="folders-to-tidy-section mb-8 " id="folders-to-tidy">
    <div class="section-header bg-base-200 p-4 rounded-t-lg border-b border-base-300 fade-in-htmx" >
        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
            <div class="flex flex-col md:flex-row md:items-start md:space-y-0 md:space-x-4">
                <img src="/static/cluttered.png" class="w-16 h-16 object-contain flex-shrink-0" alt="Cluttered emails" />
                <div>
                    <h2 class="text-2xl font-bold text-base-content">
                        Emails to organize
                    </h2>
                    <p class="text-base-content/70 mt-1">
                        Folders that need a little Marie Kondo
                    </p>
                </div>
            </div>
        </div>
    </div>
    
    <div id="folders-to-tidy-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 fade-in-htmx">
        {% for folder in folders|selectattr('folder_type', 'equalto', 'tidy') %}
            {% include 'partials/folder_card_tidy.html' %}
        {% else %}
        <div class="col-span-full text-center py-12 bg-base-100 rounded-box shadow-lg border border-dashed border-base-300">
            <div class="text-5xl mb-4 text-warning">
                <i class="fas fa-folder-open"></i>
            </div>
            <h3 class="text-2xl font-bold mb-2">Your email transformation area is empty!</h3>
            <p class="mb-6 text-base-content/70">Let's bring in some folders to organize and watch the magic happen.</p>
            <div data-loading-states>
                <button class="btn btn-primary btn-lg" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML"
                    hx-trigger="click">
                    <i class="fas fa-plus mr-2" data-loading-class="!hidden"></i>
                    <span data-loading-class="!hidden">Add Folder to Transform</span>
                    <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
                </button>
            </div>
        </div>
        {% endfor %}
    </div>
</div>