    <!-- x-data="{ errors: {{ 'true' if errors else 'false' }}, 
              ruleText:{% if folder %}{{ folder.rule_text|tojson }}{% endif %},  
            showAiResults: true }" 
        -->
<div id="folder-modal" @click.away="$refs.modal.close()" class="modal-box"
x-data='{{ folder_data|tojson }}'
    x-init="$nextTick(() => { if (errors) { document.querySelector('#submit-btn').classList.add('shake'); } })">
    <h3 class="font-bold text-lg mb-4" id="modal-title">
        {% if folder %}Edit Folder{% else %}Add New Folder{% endif %}
    </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 %}
    
    <form id="folder-form"
        {% if folder %} hx-put="/api/folders/{{ folder.id }}" {% else %} hx-post="/api/folders" {% endif %}
        hx-target="#folder-modal"
        hx-swap="outerHTML"
        >
        {% if folder %}
        <input type="hidden" id="folder-id" name="id" value="{{ folder.id }}">
        {% endif %}
        <div class="mb-4">
            <label for="folder-name" class="block text-sm font-medium mb-1">Name</label>
            <input type="text" id="folder-name" name="name"
                class="input input-bordered w-full {% if errors and errors.name %}input-error{% endif %}"
                placeholder="e.g., Work, Personal, Newsletters" required
                value="{% if name is defined %}{{ name }}{% elif folder %}{{ folder.name }}{% endif %}">
            {% if errors and errors.name %}
            <div class="text-error text-sm mt-1">{{ errors.name }}</div>
            {% endif %}
        </div>
        <div class="mb-4">
            <label for="folder-rule" class="block text-sm font-medium mb-1">Rule (Natural Language)</label>
            <div class="flex gap-2 mb-2">
                <button type="button"
                    class="btn btn-sm btn-outline btn-secondary"
                    id="generate-multiple-rules"
                    hx-post="/api/folders/generate-rule"
                    hx-vals='{"folder_name": "{{ name if name is defined else '' }}", "folder_type": "{{ 'tidy' if (name is defined and name.strip().lower() == 'inbox') else 'destination' }}", "rule_type": "multiple"}'
                    hx-target="#rule-generation-result"
                    hx-swap="innerHTML"
                    data-loading-disable
                    aria-label="Generate multiple AI-powered email rule options"
                    aria-describedby="ai-rule-help">
                    <i class="fas fa-th mr-1" data-loading-class="!hidden"></i>
                    <span data-loading-class="!hidden">Enhance my rules</span>
                    <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
                </button>
                <div id="ai-rule-help" class="hidden">
                    AI-powered rule generation creates email organization rules based on your folder name and type.
                </div>
            </div>
            <div id="rule-generation-result" class="mb-2" x-show="show_ai_rules">
                <!-- AI rule results will be injected here -->
            </div>
            <textarea id="folder-rule" name="rule_text"
                class="textarea textarea-bordered w-full h-24 {% if errors and errors.rule_text %}textarea-error{% endif %}"
                placeholder="e.g., Move emails from 'newsletter@company.com' to this folder"
                required 
                x-model="rule_text"
                ></textarea>
            {% if errors and errors.rule_text %}
            <div class="text-error text-sm mt-1">{{ errors.rule_text }}</div>
            {% endif %}
        </div>
        <div class="mb-4">
            <label for="folder-priority" class="block text-sm font-medium mb-1">Priority</label>
            <select id="folder-priority" name="priority" class="select select-bordered w-full">
                <option value="1" {% if (priority is defined and priority == '1') or (folder and folder.priority==1) %}selected{% endif %}>High</option>
                <option value="0" {% if (priority is defined and priority == '0') or (not folder) or (folder and folder.priority==0) %}selected{% endif %}>Normal</option>
                <option value="-1" {% if (priority is defined and priority == '-1') or (folder and folder.priority==-1) %}selected{% endif %}>Low</option>
            </select>
        </div>
        <div class="modal-action"  data-loading-states>
            <button type="button" class="btn btn-outline"
                @click="$dispatch('close-modal')">Cancel</button>
            <button type="submit" class="btn btn-primary" id="submit-btn" :class="{ 'shake': errors }" >
                <span data-loading-class="!hidden">{% if folder %}Update Folder{% else %}Add Folder{% endif %}</span>
                <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
            </button>
        </div>
    </form>
    
    <!-- Alpine.js event listener for AI rule usage -->
    <script>
        document.addEventListener('alpine:init', () => {
            // Listen for the custom event when an AI rule is used
            window.addEventListener('ai-rule-used', (event) => {
                // Set the textarea value with the selected text
                document.getElementById('folder-rule').value = event.detail.text;
                // Trigger validation
                document.getElementById('folder-rule').dispatchEvent(new Event('input'));
                // Hide AI results
                document.querySelector('[x-data]').__x.$data.showAiResults = false;
            });
        });
    </script>
</div>