{% extends "base.html" %}

{% block title %}Edit IP Whitelist - SMTP Management{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-pencil-square me-2"></i>
                    Edit IP Whitelist Entry
                </h5>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="ip_address" class="form-label">IP Address</label>
                        <input type="text" 
                               class="form-control" 
                               id="ip_address" 
                               name="ip_address" 
                               value="{{ ip_record.ip_address }}"
                               placeholder="e.g., 192.168.1.1 or 192.168.1.0/24"
                               required>
                        <div class="form-text">
                            Enter a single IP address or CIDR block
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="domain_id" class="form-label">Domain</label>
                        <select class="form-select" id="domain_id" name="domain_id" required>
                            <option value="">Select a domain</option>
                            {% for domain in domains %}
                                <option value="{{ domain.id }}" 
                                        {% if domain.id == ip_record.domain_id %}selected{% endif %}>
                                    {{ domain.domain_name }}
                                </option>
                            {% endfor %}
                        </select>
                        <div class="form-text">
                            This IP will be able to send emails for the selected domain
                        </div>
                    </div>
                    
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i>
                            Update IP Whitelist
                        </button>
                        <a href="{{ url_for('email.ips_list') }}" class="btn btn-secondary">
                            <i class="bi bi-x-lg me-1"></i>
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    Current Configuration
                </h6>
            </div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-4">Current IP:</dt>
                    <dd class="col-sm-8">
                        <code>{{ ip_record.ip_address }}</code>
                    </dd>
                    <dt class="col-sm-4">Domain:</dt>
                    <dd class="col-sm-8">
                        {% for domain in domains %}
                            {% if domain.id == ip_record.domain_id %}
                                <span class="badge bg-secondary">{{ domain.domain_name }}</span>
                            {% endif %}
                        {% endfor %}
                    </dd>
                    <dt class="col-sm-4">Status:</dt>
                    <dd class="col-sm-8">
                        {% if ip_record.is_active %}
                            <span class="badge bg-success">
                                <i class="bi bi-check-circle me-1"></i>
                                Active
                            </span>
                        {% else %}
                            <span class="badge bg-danger">
                                <i class="bi bi-x-circle me-1"></i>
                                Inactive
                            </span>
                        {% endif %}
                    </dd>
                    <dt class="col-sm-4">Created:</dt>
                    <dd class="col-sm-8">
                        <small class="text-muted">
                            {{ ip_record.created_at.strftime('%Y-%m-%d %H:%M') }}
                        </small>
                    </dd>
                </dl>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-shield-check me-2"></i>
                    IP Format Examples
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0 small">
                    <li class="mb-2">
                        <strong>Single IP:</strong><br>
                        <code>192.168.1.100</code>
                    </li>
                    <li class="mb-2">
                        <strong>Subnet (CIDR):</strong><br>
                        <code>192.168.1.0/24</code>
                    </li>
                    <li>
                        <strong>Localhost:</strong><br>
                        <code>127.0.0.1</code>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-focus on IP address field
    document.getElementById('ip_address').focus();
    
    // Add IP validation
    const ipInput = document.getElementById('ip_address');
    ipInput.addEventListener('blur', function() {
        const ip = this.value.trim();
        if (ip && !isValidIP(ip)) {
            this.classList.add('is-invalid');
        } else {
            this.classList.remove('is-invalid');
        }
    });
    
    function isValidIP(ip) {
        // Basic IP validation (IPv4 with optional CIDR)
        const ipRegex = /^(\d{1,3}\.){3}\d{1,3}(\/\d{1,2})?$/;
        if (!ipRegex.test(ip)) return false;
        
        const parts = ip.split('/')[0].split('.');
        return parts.every(part => parseInt(part) >= 0 && parseInt(part) <= 255);
    }
});
</script>
{% endblock %}