{% extends "base.html" %}

{% block title %}Whitelisted IPs - Email Server{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="bi bi-router me-2"></i>
            Whitelisted IP Addresses
        </h2>
        <a href="{{ url_for('email.add_ip') }}" class="btn btn-success">
            <i class="bi bi-plus-circle me-2"></i>
            Add IP Address
        </a>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-list me-2"></i>
                        Whitelisted IP Addresses
                    </h5>
                </div>
                <div class="card-body">
                    {% if ips %}
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>IP Address</th>
                                        <th>Domain</th>
                                        <th>Status</th>
                                        <th>Storage Type</th>
                                        <th>Added</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for ip, domain in ips %}
                                    <tr>
                                        <td>
                                            <div class="fw-bold font-monospace">{{ ip.ip_address }}</div>
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">{{ domain.domain_name }}</span>
                                        </td>
                                        <td>
                                            {% if ip.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 %}
                                        </td>
                                        <td>
                                            {% if ip.store_message_content %}
                                                <span class="badge bg-info text-dark">
                                                    <i class="bi bi-file-earmark-text me-1"></i>
                                                    Stores Full Message
                                                </span>
                                            {% else %}
                                                <span class="badge bg-secondary">
                                                    <i class="bi bi-file-earmark me-1"></i>
                                                    Headers Only
                                                </span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <small class="text-muted">
                                                {{ ip.created_at.strftime('%Y-%m-%d %H:%M') }}
                                            </small>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <!-- Edit Button -->
                                                <a href="{{ url_for('email.edit_ip', ip_id=ip.id) }}" 
                                                   class="btn btn-outline-primary btn-sm"
                                                   title="Edit IP">
                                                    <i class="bi bi-pencil"></i>
                                                </a>
                                                
                                                <!-- Enable/Disable Button -->
                                                {% if ip.is_active %}
                                                    <form method="post" action="{{ url_for('email.disable_ip', ip_id=ip.id) }}" class="d-inline">
                                                        <button type="submit" 
                                                                class="btn btn-outline-warning btn-sm"
                                                                title="Disable IP"
                                                                onclick="return confirm('Disable {{ ip.ip_address }}?')">
                                                            <i class="bi bi-pause-circle"></i>
                                                        </button>
                                                    </form>
                                                {% else %}
                                                    <form method="post" action="{{ url_for('email.enable_ip', ip_id=ip.id) }}" class="d-inline">
                                                        <button type="submit" 
                                                                class="btn btn-outline-success btn-sm"
                                                                title="Enable IP"
                                                                onclick="return confirm('Enable {{ ip.ip_address }}?')">
                                                            <i class="bi bi-play-circle"></i>
                                                        </button>
                                                    </form>
                                                {% endif %}
                                                
                                                <!-- Permanent Remove Button -->
                                                <form method="post" action="{{ url_for('email.remove_ip', ip_id=ip.id) }}" class="d-inline">
                                                    <button type="submit" 
                                                            class="btn btn-outline-danger btn-sm"
                                                            title="Permanently Remove IP"
                                                            onclick="return confirm('Permanently remove {{ ip.ip_address }}? This cannot be undone!')">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-router text-muted" style="font-size: 4rem;"></i>
                            <h4 class="text-muted mt-3">No IP Addresses Whitelisted</h4>
                            <p class="text-muted">Add IP addresses to allow authentication without username/password</p>
                            <a href="{{ url_for('email.add_ip') }}" class="btn btn-primary">
                                <i class="bi bi-plus-circle me-2"></i>
                                Add First IP Address
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <!-- Information Panel -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="bi bi-info-circle me-2"></i>
                        IP Whitelist Information
                    </h6>
                </div>
                <div class="card-body">
                    {% if ips %}
                        <ul class="list-unstyled mb-3">
                            <li class="mb-2">
                                <i class="bi bi-check-circle text-success me-2"></i>
                                <strong>Active IPs:</strong> {{ ips|selectattr('0.is_active')|list|length }}
                            </li>
                            <li class="mb-2">
                                <i class="bi bi-server text-info me-2"></i>
                                <strong>Domains covered:</strong> {{ ips|map(attribute='1.domain_name')|unique|list|length }}
                            </li>
                            <li>
                                <i class="bi bi-calendar text-muted me-2"></i>
                                <strong>Latest addition:</strong> 
                                {% set latest = ips|map(attribute='0')|max(attribute='created_at') %}
                                {{ latest.created_at.strftime('%Y-%m-%d') if latest else 'N/A' }}
                            </li>
                        </ul>
                    {% endif %}
                    
                    <div class="alert alert-info">
                        <h6 class="alert-heading">
                            <i class="bi bi-shield-check me-2"></i>
                            How IP Whitelisting Works
                        </h6>
                        <ul class="mb-0 small">
                            <li>Whitelisted IPs can send emails without username/password authentication</li>
                            <li>Each IP is associated with a specific domain</li>
                            <li>IP can only send emails for its authorized domain</li>
                            <li>Useful for server-to-server email sending</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- Current IP Detection -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="bi bi-geo-alt me-2"></i>
                        Your Current IP
                    </h6>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <div class="fw-bold font-monospace fs-5" id="current-ip">
                            <span class="spinner-border spinner-border-sm me-2"></span>
                            Detecting...
                        </div>
                        <button class="btn btn-outline-primary btn-sm mt-2" onclick="addCurrentIP()">
                            <i class="bi bi-plus-circle me-1"></i>
                            Add This IP
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Detect current IP address
    async function detectCurrentIP() {
        try {
            const response = await fetch('https://ifconfig.me/all.json');
            const data = await response.json();
            document.getElementById('current-ip').innerHTML = 
                `<span class="text-primary">${data.ip_addr}</span>`;
        } catch (error) {
            document.getElementById('current-ip').innerHTML = 
                '<span class="text-muted">Unable to detect</span>';
        }
    }
    
    function addCurrentIP() {
        const currentIPElement = document.getElementById('current-ip');
        const ip = currentIPElement.textContent.trim();
        
        if (ip && ip !== 'Detecting...' && ip !== 'Unable to detect') {
            const url = new URL('{{ url_for("email.add_ip") }}', window.location.origin);
            url.searchParams.set('ip', ip);
            window.location.href = url.toString();
        } else {
            alert('Unable to detect current IP address');
        }
    }
    
    // Auto-detect IP on page load
    detectCurrentIP();
</script>
{% endblock %}