{% macro smtp_settings_tab(smtp_settings, csrf_token) %}
<div class="container-fluid">
    <form id="smtpSettingsForm" method="POST" action="{{ url_for('main.update_smtp_settings') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        
        <!-- SMTP Server Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">SMTP Server Settings</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="smtp_host" class="form-label">SMTP Host</label>
                        <input type="text" class="form-control" id="smtp_host" name="smtp_host" value="{{ smtp_settings.smtp_host }}" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="smtp_port" class="form-label">SMTP Port</label>
                        <input type="number" class="form-control" id="smtp_port" name="smtp_port" value="{{ smtp_settings.smtp_port }}" required>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="smtp_security" class="form-label">Security</label>
                        <select class="form-select" id="smtp_security" name="smtp_security">
                            <option value="none" {% if smtp_settings.smtp_security == 'none' %}selected{% endif %}>None</option>
                            <option value="tls" {% if smtp_settings.smtp_security == 'tls' %}selected{% endif %}>TLS</option>
                            <option value="ssl" {% if smtp_settings.smtp_security == 'ssl' %}selected{% endif %}>SSL</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Authentication Settings -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Authentication Settings</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="smtp_username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="smtp_username" name="smtp_username" value="{{ smtp_settings.smtp_username }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="smtp_password" class="form-label">Password</label>
                        <input type="password" class="form-control" id="smtp_password" name="smtp_password" value="{{ smtp_settings.smtp_password }}">
                    </div>
                </div>
            </div>
        </div>

        <!-- Sender Information -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Sender Information</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="smtp_from_email" class="form-label">From Email</label>
                        <input type="email" class="form-control" id="smtp_from_email" name="smtp_from_email" value="{{ smtp_settings.smtp_from_email }}" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="smtp_from_name" class="form-label">From Name</label>
                        <input type="text" class="form-control" id="smtp_from_name" name="smtp_from_name" value="{{ smtp_settings.smtp_from_name }}" required>
                    </div>
                </div>
            </div>
        </div>

        <!-- Test Connection -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Test Connection</h5>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-outline-primary" onclick="testSmtpConnection()">
                    <i class="fas fa-paper-plane me-2"></i>Test Connection
                </button>
                <div id="testConnectionResult"></div>
            </div>
        </div>

        <!-- Email Deliverability Best Practices -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Email Deliverability Best Practices</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <h6 class="alert-heading">Important Tips for Better Email Deliverability:</h6>
                    <ul class="mb-0">
                        <li>Use a dedicated IP address for sending emails</li>
                        <li>Set up proper SPF, DKIM, and DMARC records</li>
                        <li>Keep your email list clean and up-to-date</li>
                        <li>Monitor your email sending reputation</li>
                        <li>Follow email sending best practices and regulations</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="text-end mb-4">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save me-2"></i>Save Settings
            </button>
        </div>
    </form>
</div>

<script src="{{ url_for('static', filename='js/settings/smtp_settings.js') }}?v={{ 'js/settings/smtp_settings.js'|asset_version }}"></script>
{% endmacro %}