{% extends "partials/folder_card_base.html" %}

{% block badges %}
    <span class="badge badge-outline">{{ folder.total_count }} total</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 %}
    <span class="badge badge-success">{{ folder.total_count - folder.pending_count }} processed</span>
{% endblock %}