{# templates/admin_modals/smtp_settings_modal.html #}
<div id="smtp-settings-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-50 p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition" id="smtp-settings-backdrop"></div>
    <div
        class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-2xl h-auto max-h-[85vh] border border-white/10 modal-content-transition relative flex flex-col overflow-hidden">

        <!-- Header -->
        <div class="p-8 pb-4 flex-shrink-0 flex items-center justify-between bg-white/[0.02] border-b border-white/5">
            <div class="flex items-center">
                <div class="p-2.5 bg-blue-500/10 rounded-xl border border-blue-500/20 mr-4 shadow-sm">
                    <i data-lucide="mail" class="h-6 w-6 text-blue-400"></i>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-white">SMTP Settings</h3>
                    <p class="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-black">Email Configuration</p>
                </div>
            </div>
            <button type="button"
                class="close-modal-btn p-3 bg-white/[0.03] hover:bg-red-500/20 border border-white/5 hover:border-red-500/30 rounded-2xl text-zinc-500 hover:text-red-400 transition-all">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>

        <!-- Scrollable Body -->
        <div class="flex-1 overflow-y-auto px-8 py-4 space-y-6 custom-scrollbar">
            <div class="space-y-6">
                <!-- SMTP Host -->
                <div>
                    <label class="block text-xs font-bold text-zinc-400 uppercase tracking-widest mb-2">SMTP
                        Host</label>
                    <input type="text" data-setting-key="smtp_host"
                        class="setting-input w-full bg-white/[0.02] border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all"
                        value="{{ settings.smtp_host }}" placeholder="smtp.example.com">
                </div>

                <!-- SMTP Port -->
                <div>
                    <label class="block text-xs font-bold text-zinc-400 uppercase tracking-widest mb-2">SMTP
                        Port</label>
                    <input type="number" data-setting-key="smtp_port"
                        class="setting-input w-full bg-white/[0.02] border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all"
                        value="{{ settings.smtp_port }}" placeholder="587">
                </div>

                <!-- SMTP Username -->
                <div>
                    <label class="block text-xs font-bold text-zinc-400 uppercase tracking-widest mb-2">SMTP
                        Username</label>
                    <input type="text" data-setting-key="smtp_username"
                        class="setting-input w-full bg-white/[0.02] border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all"
                        value="{{ settings.smtp_username }}" placeholder="user@example.com">
                </div>

                <!-- SMTP Password -->
                <div>
                    <label class="block text-xs font-bold text-zinc-400 uppercase tracking-widest mb-2">SMTP
                        Password</label>
                    <input type="password" data-setting-key="smtp_password"
                        class="setting-input w-full bg-white/[0.02] border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all"
                        value="{{ settings.smtp_password }}" placeholder="••••••••">
                </div>

                <!-- From Email -->
                <div>
                    <label class="block text-xs font-bold text-zinc-400 uppercase tracking-widest mb-2">From
                        Email</label>
                    <input type="email" data-setting-key="smtp_from_email"
                        class="setting-input w-full bg-white/[0.02] border border-white/10 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all"
                        value="{{ settings.smtp_from_email }}" placeholder="noreply@example.com">
                </div>

                <!-- Encryption -->
                <div>
                    <label
                        class="block text-xs font-bold text-zinc-400 uppercase tracking-widest mb-2">Encryption</label>
                    {% from "_custom_select.html" import custom_select %}
                    {% set enc = settings.smtp_encryption|default('tls') %}
                    {% set enc_labels = {"none": "None", "tls": "TLS", "ssl": "SSL"} %}
                    {{ custom_select(id="smtp-encryption", data_setting_key="smtp_encryption", options=[{"value": "none", "label": "None"}, {"value": "tls", "label": "TLS"}, {"value": "ssl", "label": "SSL"}], selected_value=enc, selected_label=enc_labels.get(enc, "TLS"), mode="form", class="w-full") }}
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="p-8 pt-4 flex-shrink-0 flex justify-between border-t border-white/5 gap-3">
            <button type="button" id="test-smtp-btn"
                class="glass-button no-hover-lift px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-blue-400 hover:text-blue-300">Test
                Connection</button>
            <div class="flex gap-3">
                <button type="button"
                    class="close-modal-btn px-4 py-2 rounded-lg text-sm font-medium text-zinc-300 hover:text-white hover:bg-white/[0.03] transition-colors">Cancel</button>
                <button type="button" id="save-smtp-settings-btn"
                    class="glass-button no-hover-lift px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-zinc-400 hover:text-white">Save
                    Changes</button>
            </div>
        </div>
    </div>
</div>