<div id="pending-emails-modal" @click.away="$refs.modal.close()" class="modal-box max-w-6xl" x-data="{
  errors: {{ 'true' if errors else 'false' }},
  selectedEmails: []
}" x-init="$nextTick(() => { if (errors) { document.querySelector('#submit-btn').classList.add('shake'); } })">
  <h3 class="font-bold text-lg mb-4">Pending Emails in {{ folder.name }}</h3>
  
  {% if errors and errors.general %}
  <div class="alert alert-error 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
    <span>{{ errors.general }}</span>
  </div>
  {% endif %}
  
  <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">{{ pending_emails|length }}</div>
      </div>
      <div class="stat">
        <div class="stat-title">Processed</div>
        <div class="stat-value text-success">{{ folder.total_count - pending_emails|length }}</div>
      </div>
    </div>
  </div>
  
  {% if pending_emails %}
    <div class="overflow-x-auto">
      <table class="table table-sm table-zebra">
        <thead>
          <tr>
            <th>
              <label class="cursor-pointer">
                <input type="checkbox" class="checkbox checkbox-xs" @change="selectAllEmails($event)">
              </label>
            </th>
            <th>Subject</th>
            <th>From</th>
            <th>Date</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for email in pending_emails %}
          <tr id="email-row-{{ email.uid }}">
            <td>
              <label class="cursor-pointer">
                <input type="checkbox" name="email_uids" value="{{ email.uid }}" class="checkbox checkbox-xs">
              </label>
            </td>
            <td class="font-medium">{{ email.subject }}</td>
            <td>{{ email.from }}</td>
            <td>{{ email.date }}</td>
            <td>
              <div class="flex items-center space-x-2">
                <button 
                  class="btn btn-xs btn-primary" 
                  hx-post="/api/folders/{{ folder.id }}/emails/{{ email.uid }}/process"
                  hx-target="#email-row-{{ email.uid }}"
                  hx-swap="outerHTML"
                  data-loading-disable
                >
                  <i class="fas fa-check mr-1"></i>
                  Process
                </button>
                <button 
                  class="btn btn-xs btn-secondary"
                  onclick="previewEmail('{{ email.uid }}', '{{ folder.name }}')"
                >
                  <i class="fas fa-eye mr-1"></i>
                  Preview
                </button>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
    <div class="mt-4 flex justify-end">
      <button 
        class="btn btn-primary"
        hx-post="/api/folders/{{ folder.id }}/process-emails"
        hx-include="[name='email_uids']"
        hx-target="#modal-holder"
        hx-swap="beforeend"
        data-loading-disable
      >
        <span data-loading-class="!hidden"><i class="fas fa-check-double mr-2"></i>Process Selected</span>
        <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
      </button>
    </div>
  {% else %}
    <div class="alert alert-info">
      <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
      <span>No pending emails found in this folder.</span>
    </div>
  {% endif %}
  
  <div class="modal-action">
    <button class="btn btn-outline" @click="$dispatch('close-modal')">Close</button>
  </div>
</div>

<script>
  function selectAllEmails(event) {
    const checkboxes = document.querySelectorAll('input[name="email_uids"]');
    checkboxes.forEach(checkbox => {
      checkbox.checked = event.target.checked;
    });
  }
  
  function previewEmail(uid, folderName) {
    // This would typically open a modal or new window with email preview
    // For now, we'll just show an alert
    alert(`Preview functionality would open email ${uid} from folder ${folderName}`);
  }
</script>