<div id="imap-modal" @click.away="$refs.modal.close()" class="modal-box step-1 w-11/12 max-w-4xl fade-out-htmx" x-data="{ errors: {{ 'true' if errors else 'false' }} }" x-init="$nextTick(() => { if (errors) { document.querySelector('#submit-btn').classList.add('shake'); } })" >
    <div class="flex items-center mb-4">
        <div class="steps flex-1">
            <span class="step step-primary">Step 1</span>
            <span class="step">Step 2</span>
        </div>
        <h3 class="font-bold text-lg">Configure IMAP Connection</h3>
    </div>
    
    {% if success %}
    <div 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>{{ message }}</span>
    </div>
    {% endif %}
    
    {% 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="imap-form" hx-post="/api/imap/test" hx-target="#modal-holder" hx-swap="innerHTML swap:300ms" hx-trigger="submit once">
        <div class="mb-4">
            <label for="imap-server" class="block text-sm font-medium mb-1">IMAP Server</label>
            <input type="text" id="imap-server" name="server"
                class="input input-bordered w-full {% if errors and errors.server %}input-error{% endif %}"
                placeholder="e.g., imap.gmail.com" required
                value="{% if server is defined %}{{ server }}{% endif %}">
            {% if errors and errors.server %}
            <div class="text-error text-sm mt-1">{{ errors.server }}</div>
            {% endif %}
        </div>
        
        <div class="mb-4">
            <label for="imap-port" class="block text-sm font-medium mb-1">Port</label>
            <input type="number" id="imap-port" name="port"
                class="input input-bordered w-full {% if errors and errors.port %}input-error{% endif %}"
                placeholder="e.g., 993" required
                value="{% if port is defined %}{{ port }}{% else %}993{% endif %}">
            {% if errors and errors.port %}
            <div class="text-error text-sm mt-1">{{ errors.port }}</div>
            {% endif %}
        </div>
        
        <div class="mb-4">
            <label for="imap-username" class="block text-sm font-medium mb-1">Username</label>
            <input type="text" id="imap-username" name="username"
                class="input input-bordered w-full {% if errors and errors.username %}input-error{% endif %}"
                placeholder="e.g., your-email@gmail.com" required
                value="{% if username is defined %}{{ username }}{% endif %}">
            {% if errors and errors.username %}
            <div class="text-error text-sm mt-1">{{ errors.username }}</div>
            {% endif %}
        </div>
        
        <div class="mb-4">
            <label for="imap-password" class="block text-sm font-medium mb-1">Password</label>
            <input type="password" id="imap-password" name="password"
                class="input input-bordered w-full {% if errors and errors.password %}input-error{% endif %}"
                placeholder="App password or account password" required
                value="{% if password is defined %}{{ password }}{% endif %}">
            {% if errors and errors.password %}
            <div class="text-error text-sm mt-1">{{ errors.password }}</div>
            {% endif %}
        </div>
        
        <div class="mb-6">
            <label class="flex items-center cursor-pointer">
                <input type="checkbox" id="imap-use-ssl" name="use_ssl" class="checkbox mr-2" checked>
                <span class="text-sm font-medium">Use SSL (Recommended)</span>
            </label>
            <p class="text-xs text-base-content/70 mt-1">Most IMAP servers use SSL on port 993</p>
        </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 }" data-loading-disable >
                <span data-loading-class="!hidden">Test Connection</span>
                <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
            </button>
        </div>
    </form>
    
</div>