<div id="pending-emails-updated" class="alert alert-success mb-4">
  <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
  <span>Email {{ uid }} has been marked as processed successfully!</span>
</div>

<div class="mb-4">
  <div class="flex items-center space-x-4">
    <div class="stat">
      <div class="stat-title">Total Emails</div>
      <div class="stat-value">{{ folder.total_count }}</div>
    </div>
    <div class="stat">
      <div class="stat-title">Pending</div>
      <div class="stat-value text-warning">{{ folder.pending_count }}</div>
    </div>
    <div class="stat">
      <div class="stat-title">Processed</div>
      <div class="stat-value text-success">{{ folder.total_count - folder.pending_count }}</div>
    </div>
  </div>
</div>

<div class="text-center">
  <button 
    class="btn btn-primary"
    hx-get="/api/folders/{{ folder.id }}/pending-emails"
    hx-target="#modal-holder"
    hx-swap="innerHTML"
  >
    <i class="fas fa-list mr-2"></i>
    View All Pending Emails
  </button>
</div>