{% extends "base.html" %}
{% load static i18n %}
{% load widget_tweaks %}

{% block title %}{{ title }}{% endblock %}

{% block customCSS %}
<style>
    /* Card Hover Effects */
    .form-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .form-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    }
    
    /* Button Hover Effects */
    .btn-action {
        transition: all 0.2s ease;
    }
    
    .btn-action:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .btn-primary {
        transition: all 0.2s ease;
    }
    
    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(157, 34, 53, 0.4);
    }
    
    .btn-secondary {
        transition: all 0.2s ease;
    }
    
    .btn-secondary:hover {
        background-color: rgba(157, 34, 53, 0.05);
        border-color: rgba(157, 34, 53, 0.3);
    }
    
    .btn-danger {
        transition: all 0.2s ease;
    }
    
    .btn-danger:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }
    
    /* Input Focus Animation */
    .form-input {
        transition: all 0.2s ease;
    }
    
    .form-input:focus {
        transform: translateY(-1px);
    }
    
    /* Custom Form Fields */
    .form-field {
        transition: all 0.2s ease;
    }
    
    .form-field:focus-within {
        transform: translateY(-1px);
    }
    
    .form-label {
        color: #374151;
        font-weight: 600;
        font-size: 0.875rem;
        display: block;
        margin-bottom: 0.5rem;
    }
    
    .form-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 0.75rem;
        background-color: #ffffff;
        color: #111827;
        font-size: 0.95rem;
        transition: all 0.2s ease;
        outline: none;
    }
    
    .form-input:focus {
        border-color: #9d2235;
        box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);
    }
    
    .form-input::placeholder {
        color: #9ca3af;
    }
    
    .form-input:disabled {
        background-color: #f9fafb;
        color: #9ca3af;
        cursor: not-allowed;
    }
    
    .form-select {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 0.75rem;
        background-color: #ffffff;
        color: #111827;
        font-size: 0.95rem;
        transition: all 0.2s ease;
        outline: none;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.75rem center;
        background-repeat: no-repeat;
        background-size: 1.5rem 1.5rem;
        padding-right: 2.5rem;
    }
    
    .form-select:focus {
        border-color: #9d2235;
        box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);
    }
    
    .form-select:disabled {
        background-color: #f9fafb;
        color: #9ca3af;
        cursor: not-allowed;
    }
    
    .form-textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 0.75rem;
        background-color: #ffffff;
        color: #111827;
        font-size: 0.95rem;
        transition: all 0.2s ease;
        outline: none;
        resize: vertical;
        min-height: 100px;
    }
    
    .form-textarea:focus {
        border-color: #9d2235;
        box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);
    }
    
    .form-helptext {
        margin-top: 0.375rem;
        font-size: 0.8rem;
        color: #6b7280;
    }
    
    .form-error {
        margin-top: 0.375rem;
        font-size: 0.8rem;
        color: #dc2626;
        font-weight: 500;
    }
    
    /* Custom Checkbox Styling */
    .custom-checkbox {
        position: relative;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        user-select: none;
    }
    
    .custom-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    
    .checkbox-visual {
        position: relative;
        width: 1.375rem;
        height: 1.375rem;
        background-color: white;
        border: 2px solid #d1d5db;
        border-radius: 0.5rem;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        flex-shrink: 0;
    }
    
    .custom-checkbox:hover .checkbox-visual {
        border-color: #9d2235;
        box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);
    }
    
    .custom-checkbox input:checked ~ .checkbox-visual {
        background-color: #9d2235;
        border-color: #9d2235;
        background-image: linear-gradient(135deg, #9d2235 0%, #8b1228 100%);
        box-shadow: 0 4px 12px rgba(157, 34, 53, 0.3);
        transform: scale(1.02);
    }
    
    .custom-checkbox input:focus-visible ~ .checkbox-visual {
        outline: 2px solid #9d2235;
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(157, 34, 53, 0.2);
    }
    
    .checkbox-checkmark {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .custom-checkbox input:checked ~ .checkbox-visual .checkbox-checkmark {
        transform: translate(-50%, -50%) scale(1);
    }
    
    .checkbox-label {
        margin-left: 0.75rem;
        color: #374151;
        font-size: 0.95rem;
        font-weight: 500;
        transition: color 0.2s ease;
    }
    
    .custom-checkbox:hover .checkbox-label {
        color: #9d2235;
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">

    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-6">
        <ol class="flex items-center gap-2 text-sm">
            <li>
                <a href="{% url 'source_list' %}" 
                   class="text-gray-500 hover:text-temple-red transition-colors flex items-center gap-1">
                    <i data-lucide="database" class="w-4 h-4"></i>
                    {% trans "Sources" %}
                </a>
            </li>
            {% if source %}
                <li class="text-gray-400">/</li>
                <li>
                    <a href="{% url 'source_detail' source.pk %}" 
                       class="text-gray-500 hover:text-temple-red transition-colors">
                        {{ source.name }}
                    </a>
                </li>
                <li class="text-gray-400">/</li>
                <li class="text-temple-red font-semibold">{% trans "Update" %}</li>
            {% else %}
                <li class="text-gray-400">/</li>
                <li class="text-temple-red font-semibold">{% trans "Create" %}</li>
            {% endif %}
        </ol>
    </nav>

    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2 flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-temple-red/10 flex items-center justify-center">
                    {% if source %}
                        <i data-lucide="edit-3" class="w-6 h-6 text-temple-red"></i>
                    {% else %}
                        <i data-lucide="plus-circle" class="w-6 h-6 text-temple-red"></i>
                    {% endif %}
                </div>
                {{ title }}
            </h1>
            <p class="text-gray-500 text-sm sm:text-base">
                {% if source %}
                    {% trans "Update integration source details" %}
                {% else %}
                    {% trans "Create a new integration source" %}
                {% endif %}
            </p>
        </div>
        <div class="flex gap-3">
            {% if source %}
                <a href="{% url 'source_detail' source.pk %}" 
                   class="btn-secondary inline-flex items-center gap-2 px-5 py-3 border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:border-gray-300">
                    <i data-lucide="eye" class="w-5 h-5"></i>
                    {% trans "View Details" %}
                </a>
                <a href="{% url 'source_delete' source.pk %}" 
                   class="btn-danger inline-flex items-center gap-2 px-5 py-3 bg-red-500 text-white rounded-xl font-semibold shadow-lg hover:shadow-xl">
                    <i data-lucide="trash-2" class="w-5 h-5"></i>
                    {% trans "Delete" %}
                </a>
            {% endif %}
            <a href="{% url 'source_list' %}" 
               class="btn-secondary inline-flex items-center gap-2 px-5 py-3 border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:border-gray-300">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
                {% trans "Back to List" %}
            </a>
        </div>
    </div>

    <!-- Form Card -->
    <div class="form-card bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
        <!-- Card Header -->
        <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-temple-red/10 flex items-center justify-center">
                    <i data-lucide="database" class="w-5 h-5 text-temple-red"></i>
                </div>
                <div>
                    <h2 class="text-lg font-bold text-gray-900">{% trans "Source Configuration" %}</h2>
                    <p class="text-sm text-gray-500">{% trans "Fill in the integration details below" %}</p>
                </div>
            </div>
        </div>
        
        <!-- Card Body -->
        <div class="p-6 sm:p-8">
            
            <!-- Non-Field Errors -->
            {% if form.non_field_errors %}
                <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                            <i data-lucide="alert-circle" class="w-5 h-5 text-red-500"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="text-base font-bold text-red-700 mb-1">{% trans "Error" %}</h3>
                            {% for error in form.non_field_errors %}
                                <p class="text-sm text-red-600">{{ error }}</p>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}

            <!-- Messages -->
            {% if messages %}
                <div class="space-y-3 mb-6">
                    {% for message in messages %}
                        <div class="flex items-start gap-3 p-4 rounded-xl border
                                    {% if message.tags == 'error' %}bg-red-50 border-red-200 text-red-700
                                    {% elif message.tags == 'success' %}bg-green-50 border-green-200 text-green-700
                                    {% elif message.tags == 'warning' %}bg-yellow-50 border-yellow-200 text-yellow-700
                                    {% else %}bg-blue-50 border-blue-200 text-blue-700{% endif %}">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0
                                        {% if message.tags == 'error' %}bg-red-100
                                        {% elif message.tags == 'success' %}bg-green-100
                                        {% elif message.tags == 'warning' %}bg-yellow-100
                                        {% else %}bg-blue-100{% endif %}">
                                <i data-lucide="{% if message.tags == 'error' %}alert-circle
                                   {% elif message.tags == 'success' %}check-circle
                                   {% elif message.tags == 'warning' %}alert-triangle
                                   {% else %}info{% endif %}" 
                                   class="w-5 h-5
                                            {% if message.tags == 'error' %}text-red-500
                                            {% elif message.tags == 'success' %}text-green-500
                                            {% elif message.tags == 'warning' %}text-yellow-600
                                            {% else %}text-blue-500{% endif %}">
                                </i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium">{{ message }}</p>
                            </div>
                            <button type="button" 
                                    onclick="this.parentElement.remove()"
                                    class="text-current hover:opacity-70 transition-opacity">
                                <i data-lucide="x" class="w-4 h-4"></i>
                            </button>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

            <!-- Form -->
            <form method="post" novalidate id="source-form" class="space-y-6">
                {% csrf_token %}
                
                <!-- Name Field -->
                <div class="form-field">
                    <label for="{{ form.name.id_for_label }}" class="form-label flex items-center gap-2">
                        <i data-lucide="tag" class="w-4 h-4 text-gray-400"></i>
                        {% trans "Name" %}
                        {% if form.name.field.required %}<span class="text-temple-red">*</span>{% endif %}
                    </label>
                    <input type="{{ form.name.field.widget.input_type }}" 
                           name="{{ form.name.name }}" 
                           id="{{ form.name.id_for_label }}"
                           class="form-input" 
                           placeholder="{% trans 'Enter a name for this integration source' %}"
                           {% if form.name.value %}value="{{ form.name.value }}"{% endif %}>
                    {% if form.name.help_text %}
                        <p class="form-helptext">{{ form.name.help_text }}</p>
                    {% endif %}
                    {% for error in form.name.errors %}
                        <p class="form-error">{{ error }}</p>
                    {% endfor %}
                </div>

                <!-- Source Type Field -->
                <div class="form-field">
                    <label for="{{ form.source_type.id_for_label }}" class="form-label flex items-center gap-2">
                        <i data-lucide="server" class="w-4 h-4 text-gray-400"></i>
                        {% trans "Source Type" %}
                        {% if form.source_type.field.required %}<span class="text-temple-red">*</span>{% endif %}
                    </label>
                    {{ form.source_type.as_widget }}
                    {% if form.source_type.help_text %}
                        <p class="form-helptext">{{ form.source_type.help_text }}</p>
                    {% endif %}
                    {% for error in form.source_type.errors %}
                        <p class="form-error">{{ error }}</p>
                    {% endfor %}
                </div>

                <!-- IP Address Field -->
                <div class="form-field">
                    <label for="{{ form.ip_address.id_for_label }}" class="form-label flex items-center gap-2">
                        <i data-lucide="globe" class="w-4 h-4 text-gray-400"></i>
                        {% trans "IP Address" %}
                        {% if form.ip_address.field.required %}<span class="text-temple-red">*</span>{% endif %}
                    </label>
                    <input type="{{ form.ip_address.field.widget.input_type }}" 
                           name="{{ form.ip_address.name }}" 
                           id="{{ form.ip_address.id_for_label }}"
                           class="form-input" 
                           placeholder="{% trans 'e.g., 192.168.1.100' %}"
                           {% if form.ip_address.value %}value="{{ form.ip_address.value }}"{% endif %}>
                    {% if form.ip_address.help_text %}
                        <p class="form-helptext">{{ form.ip_address.help_text }}</p>
                    {% endif %}
                    {% for error in form.ip_address.errors %}
                        <p class="form-error">{{ error }}</p>
                    {% endfor %}
                </div>

                <!-- Trusted IPs Field -->
                <div class="form-field">
                    <label for="{{ form.trusted_ips.id_for_label }}" class="form-label flex items-center gap-2">
                        <i data-lucide="shield" class="w-4 h-4 text-gray-400"></i>
                        {% trans "Trusted IPs" %}
                    </label>
                    <input type="{{ form.trusted_ips.field.widget.input_type }}" 
                           name="{{ form.trusted_ips.name }}" 
                           id="{{ form.trusted_ips.id_for_label }}"
                           class="form-input" 
                           placeholder="{% trans 'e.g., 192.168.1.1, 192.168.1.2 (comma-separated)' %}"
                           {% if form.trusted_ips.value %}value="{{ form.trusted_ips.value }}"{% endif %}>
                    {% if form.trusted_ips.help_text %}
                        <p class="form-helptext">{{ form.trusted_ips.help_text }}</p>
                    {% endif %}
                    {% for error in form.trusted_ips.errors %}
                        <p class="form-error">{{ error }}</p>
                    {% endfor %}
                </div>

                <!-- Description Field -->
                <div class="form-field">
                    <label for="{{ form.description.id_for_label }}" class="form-label flex items-center gap-2">
                        <i data-lucide="align-left" class="w-4 h-4 text-gray-400"></i>
                        {% trans "Description" %}
                    </label>
                    <textarea name="{{ form.description.name }}" 
                              id="{{ form.description.id_for_label }}"
                              class="form-textarea" 
                              placeholder="{% trans 'Add a description...' %}">{% if form.description.value %}{{ form.description.value }}{% endif %}</textarea>
                    {% if form.description.help_text %}
                        <p class="form-helptext">{{ form.description.help_text }}</p>
                    {% endif %}
                    {% for error in form.description.errors %}
                        <p class="form-error">{{ error }}</p>
                    {% endfor %}
                </div>

                <!-- Is Active Field -->
                <div class="form-field">
                    <label for="{{ form.is_active.id_for_label }}" class="form-label flex items-center gap-2">
                        <i data-lucide="power" class="w-4 h-4 text-gray-400"></i>
                        {% trans "Active Status" %}
                    </label>
                    <label class="custom-checkbox" for="{{ form.is_active.id_for_label }}">
                        <input type="checkbox" 
                               name="{{ form.is_active.name }}" 
                               id="{{ form.is_active.id_for_label }}"
                               {% if form.is_active.value %}checked{% endif %}>
                        <span class="checkbox-visual">
                            <svg class="checkbox-checkmark w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="20 6 9 17 4 12"></polyline>
                            </svg>
                        </span>
                        <span class="checkbox-label">{% trans "Enable this integration source" %}</span>
                    </label>
                    {% if form.is_active.help_text %}
                        <p class="form-helptext">{{ form.is_active.help_text }}</p>
                    {% endif %}
                    {% for error in form.is_active.errors %}
                        <p class="form-error">{{ error }}</p>
                    {% endfor %}
                </div>

                <!-- API Credentials Section (for existing sources) -->
                {% if source %}
                    <div class="mt-8 p-6 bg-gray-50 rounded-2xl border border-gray-200">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-10 h-10 rounded-xl bg-temple-red/10 flex items-center justify-center">
                                <i data-lucide="key" class="w-5 h-5 text-temple-red"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">{% trans "API Credentials" %}</h3>
                                <p class="text-sm text-gray-500">{% trans "Generated credentials for API access" %}</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
                                    <i data-lucide="key" class="w-4 h-4 text-gray-400"></i>
                                    {% trans "API Key" %}
                                </label>
                                <div class="flex">
                                    <input type="text" value="{{ source.api_key }}" readonly class="form-input rounded-r-none">
                                    <button type="button"
                                            hx-post="{% url 'copy_to_clipboard' %}"
                                            hx-vals='{"text": "{{ source.api_key }}"}'
                                            title="{% trans 'Copy to clipboard' %}"
                                            class="btn-action inline-flex items-center justify-center px-3 border border-l-0 border-gray-300 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-r-lg transition">
                                        <i data-lucide="copy" class="w-4 h-4"></i>
                                    </button>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
                                    <i data-lucide="lock" class="w-4 h-4 text-gray-400"></i>
                                    {% trans "API Secret" %}
                                </label>
                                <div class="flex">
                                    <input type="password" value="{{ source.api_secret }}" readonly id="api-secret" class="form-input rounded-l-lg">
                                    <button type="button" onclick="toggleSecretVisibility()" class="btn-action inline-flex items-center justify-center px-3 border border-l-0 border-r-0 border-gray-300 bg-gray-100 hover:bg-gray-200 text-gray-600 transition">
                                        <i data-lucide="eye" id="secret-toggle-icon" class="w-4 h-4"></i>
                                    </button>
                                    <button type="button"
                                            hx-post="{% url 'copy_to_clipboard' %}"
                                            hx-vals='{"text": "{{ source.api_secret }}"}'
                                            title="{% trans 'Copy to clipboard' %}"
                                            class="btn-action inline-flex items-center justify-center px-3 border border-l-0 border-gray-300 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-r-lg transition">
                                        <i data-lucide="copy" class="w-4 h-4"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4">
                            <a href="{% url 'generate_api_keys' source.pk %}" 
                               class="btn-action inline-flex items-center gap-2 px-5 py-3 bg-yellow-500 text-white rounded-xl font-semibold shadow-lg hover:shadow-xl">
                                <i data-lucide="refresh-cw" class="w-5 h-5"></i>
                                {% trans "Generate New Keys" %}
                            </a>
                        </div>
                    </div>
                {% endif %}

                <!-- Form Actions -->
                <div class="flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-200 mt-6">
                    <button form="source-form" type="submit" 
                            class="btn-primary flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-8 py-3 bg-temple-red text-white rounded-xl font-semibold shadow-lg hover:shadow-xl">
                        <i data-lucide="save" class="w-5 h-5"></i>
                        {% trans "Save" %}
                    </button>
                    <a href="{% url 'source_list' %}" 
                       class="btn-secondary flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-8 py-3 border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:border-gray-300">
                        <i data-lucide="x" class="w-5 h-5"></i>
                        {% trans "Cancel" %}
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block customJS %}
<script>
    // Initialize Lucide icons
    lucide.createIcons();

    document.addEventListener('DOMContentLoaded', function() {
        // Auto-adjust textarea height
        const textarea = document.querySelector('textarea[name="description"]');
        if (textarea) {
            textarea.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = this.scrollHeight + 'px';
            });
            // Set initial height
            textarea.style.height = textarea.scrollHeight + 'px';
        }
        
        // Apply Tailwind classes to source_type select
        const sourceTypeSelect = document.querySelector('select[name="source_type"]');
        if (sourceTypeSelect) {
            sourceTypeSelect.classList.add('form-select');
        }
        

        // Form Validation
        const form = document.getElementById('source-form');
        if (form) {
            form.addEventListener('submit', function(e) {
                const submitBtn = form.querySelector('button[type="submit"]');
                
                // Basic validation
                const name = document.getElementById('id_name');
                if (name && !name.value.trim()) {
                    e.preventDefault();
                    alert('{% trans "Source name is required." %}');
                    return;
                }

                const ipAddress = document.getElementById('id_ip_address');
                if (ipAddress && ipAddress.value.trim() && !isValidIP(ipAddress.value.trim())) {
                    e.preventDefault();
                    alert('{% trans "Please enter a valid IP address." %}');
                    return;
                }
            });
        }
        
        // Warn before leaving if changes are made
        let formChanged = false;
        const formInputs = form ? form.querySelectorAll('input, select, textarea') : [];

        formInputs.forEach(input => {
            input.addEventListener('change', function() {
                formChanged = true;
            });
        });

        window.addEventListener('beforeunload', function(e) {
            if (formChanged) {
                e.preventDefault();
                e.returnValue = '{% trans "You have unsaved changes. Are you sure you want to leave?" %}';
                return e.returnValue;
            }
        });

        if (form) {
            form.addEventListener('submit', function() {
                formChanged = false;
            });
        }
    });

    // Toggle Secret Visibility
    function toggleSecretVisibility() {
        const secretInput = document.getElementById('api-secret');
        const toggleIcon = document.getElementById('secret-toggle-icon');

        if (secretInput.type === 'password') {
            secretInput.type = 'text';
            toggleIcon.setAttribute('data-lucide', 'eye-off');
        } else {
            secretInput.type = 'password';
            toggleIcon.setAttribute('data-lucide', 'eye');
        }
        lucide.createIcons();
    }

    // IP validation helper
    function isValidIP(ip) {
        const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
        return ipRegex.test(ip);
    }

    // Handle HTMX copy to clipboard feedback
    document.body.addEventListener('htmx:afterRequest', function(evt) {
        if (evt.detail.successful && evt.detail.target.matches('[hx-post*="copy_to_clipboard"]')) {
            const button = evt.detail.target;
            const originalHTML = button.innerHTML;
            button.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i>';
            button.classList.remove('bg-gray-100', 'hover:bg-gray-200', 'text-gray-600');
            button.classList.add('bg-green-500', 'text-white');
            lucide.createIcons();

            setTimeout(() => {
                button.innerHTML = originalHTML;
                button.classList.remove('bg-green-500', 'text-white');
                button.classList.add('bg-gray-100', 'hover:bg-gray-200', 'text-gray-600');
                lucide.createIcons();
            }, 2000);
        }
    });
</script>
{% endblock %}