<div class="section-card">
    <div class="section-title">✉️ Email Settings</div>
    <div class="row g-2">
        <div class="col-md-4">
            <label class="form-label small mb-1">Provider</label>
            <select class="form-select form-select-sm email-setting" id="emailProvider">
                <option value="gmail">Gmail</option>
                <option value="outlook">Outlook / Hotmail</option>
                <option value="yahoo">Yahoo</option>
                <option value="custom">Custom SMTP</option>
            </select>
        </div>
        <div class="col-md-4">
            <label class="form-label small mb-1">SMTP Host</label>
            <input type="text" class="form-control form-control-sm email-setting" id="emailHost" placeholder="smtp.example.com">
        </div>
        <div class="col-md-2">
            <label class="form-label small mb-1">Port</label>
            <input type="number" class="form-control form-control-sm email-setting" id="emailPort" value="587">
        </div>
        <div class="col-md-2">
            <label class="form-label small mb-1">Encryption</label>
            <select class="form-select form-select-sm email-setting" id="emailEncryption">
                <option value="tls">TLS</option>
                <option value="ssl">SSL</option>
                <option value="none">None</option>
            </select>
        </div>
        <div class="col-12">
            <small class="text-muted" id="emailHelp"></small>
        </div>
        <div class="col-md-6">
            <label class="form-label small mb-1">Username (full email)</label>
            <input type="text" class="form-control form-control-sm email-setting" id="emailUser" placeholder="you@gmail.com">
        </div>
        <div class="col-md-6">
            <label class="form-label small mb-1">App Password</label>
            <div class="input-group input-group-sm">
                <input type="password" class="form-control form-control-sm email-setting" id="emailPass" placeholder="16-character app password">
                <button class="btn btn-outline-secondary" type="button" id="btnToggleEmailPass" data-tt="Show or hide the SMTP password.">
                    <i class="bi bi-eye"></i>
                </button>
            </div>
        </div>
        <div class="col-md-6">
            <label class="form-label small mb-1">From Address</label>
            <input type="email" class="form-control form-control-sm email-setting" id="emailFrom" placeholder="noreply@example.com">
        </div>
        <div class="col-md-6">
            <label class="form-label small mb-1">From Name</label>
            <input type="text" class="form-control form-control-sm email-setting" id="emailFromName" placeholder="My App">
        </div>
        <div class="col-12 mt-2">
            <button class="btn btn-sm btn-outline-primary" id="btnTestEmail"><i class="bi bi-send me-1"></i> Test Email</button>
        </div>
    </div>
</div>