From c78ccc1d18742f7cc259c71c08560ff36103f887 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 18:54:13 -0500
Subject: [PATCH] refactor: enhance Proxmox firewall view by improving UI
 structure, optimizing element alignment, and ensuring consistent formatting
 for better readability and user experience

---
 .../Servers/Proxmox/views/firewall.blade.php  | 596 ++++++++----------
 1 file changed, 258 insertions(+), 338 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index 0a353d96c..d5d85b97d 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -15,17 +15,17 @@
                 <div class="flex items-start gap-3 mb-4">
                     <div class="flex-shrink-0 w-10 h-10 rounded-full bg-error/20 flex items-center justify-center">
                         <x-ri-error-warning-line class="size-5 text-error" />
-                    </div>
-                    <div>
+                </div>
+                <div>
                         <h3 class="text-lg font-semibold">Error</h3>
                         <p class="text-sm text-base/70 mt-1">{{ $error }}</p>
-                    </div>
                 </div>
+            </div>
                 <div class="flex justify-end">
                     <button wire:click="$set('showErrorModal', false)" class="px-4 py-2 bg-background border border-neutral rounded-lg hover:bg-background-secondary transition-colors text-sm font-medium">
                         Close
                     </button>
-                </div>
+        </div>
             </div>
         </div>
     @endif
@@ -52,8 +52,8 @@
                 <span class="text-sm font-medium text-base/60">{{ $firewallEnabled ? 'Enabled' : 'Disabled' }}</span>
                 <label class="relative inline-flex items-center cursor-pointer">
                     <input type="checkbox" 
-                           @if($firewallEnabled) checked @endif
-                           wire:click="toggleFirewall"
+                        @if($firewallEnabled) checked @endif
+                        wire:click="toggleFirewall"
                            wire:loading.attr="disabled"
                            class="sr-only peer">
                     <div class="w-14 h-7 bg-neutral/30 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-neutral after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-primary"></div>
@@ -106,16 +106,16 @@
                                     @endif
                                 </div>
                             </div>
-                            <div class="flex items-center gap-3">
+                                <div class="flex items-center gap-3">
                                 <span class="text-sm font-medium text-base/60">{{ ($adapterFirewallStates[$adapter['name']] ?? false) ? 'On' : 'Off' }}</span>
                                 <label class="relative inline-flex items-center cursor-pointer">
                                     <input type="checkbox"
-                                           @if($adapterFirewallStates[$adapter['name']] ?? false) checked @endif
-                                           wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')"
+                                            @if($adapterFirewallStates[$adapter['name']] ?? false) checked @endif
+                                            wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')"
                                            wire:loading.attr="disabled"
                                            class="sr-only peer">
                                     <div class="w-11 h-6 bg-neutral/30 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-success/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-success"></div>
-                                </label>
+                                    </label>
                             </div>
                         </div>
                     </div>
@@ -134,16 +134,16 @@
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
             {{-- Default Policies Card --}}
             <div class="bg-background border border-neutral rounded-xl p-6">
-                <div class="flex items-center justify-between mb-4">
-                    <div class="flex items-center gap-3">
+            <div class="flex items-center justify-between mb-4">
+                <div class="flex items-center gap-3">
                         <div class="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center">
                             <x-ri-filter-3-line class="size-5 text-warning" />
-                        </div>
-                        <div>
+                    </div>
+                    <div>
                             <h3 class="text-lg font-semibold">Default Policies</h3>
                             <p class="text-sm text-base/60">Control default traffic behavior</p>
-                        </div>
                     </div>
+                </div>
                     <button type="button" wire:click="openPolicyInfoModal" class="text-info hover:text-info/80 transition-colors" title="Learn about policies">
                         <x-ri-information-line class="size-5" />
                     </button>
@@ -158,7 +158,7 @@
                             <option value="DROP">Drop</option>
                         </select>
                         <p class="text-xs text-base/60 mt-1">Default action for incoming traffic not matching any rule</p>
-                    </div>
+            </div>
 
                     <div>
                         <label class="block text-sm font-medium mb-2">Outgoing Traffic (Policy Out)</label>
@@ -168,27 +168,27 @@
                             <option value="DROP">Drop</option>
                         </select>
                         <p class="text-xs text-base/60 mt-1">Default action for outgoing traffic not matching any rule</p>
-                    </div>
+                                        </div>
 
                     <div class="flex items-center justify-between pt-2 border-t border-neutral/20">
                         <div class="flex items-center gap-2">
                             <input type="checkbox" wire:model="ipFilter" id="ipFilter" class="rounded border-neutral">
                             <label for="ipFilter" class="text-sm font-medium">IP Filter</label>
-                        </div>
+                                        </div>
                         <div class="flex items-center gap-2">
                             <input type="checkbox" wire:model="macFilter" id="macFilter" class="rounded border-neutral">
                             <label for="macFilter" class="text-sm font-medium">MAC Filter</label>
-                        </div>
-                    </div>
+                </div>
+        </div>
 
                     <button type="button" wire:click="updatePolicies" wire:loading.attr="disabled" class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
                         <span wire:loading.remove wire:target="updatePolicies">Update Policies</span>
                         <span wire:loading wire:target="updatePolicies">Updating...</span>
                     </button>
-                </div>
-            </div>
+                    </div>
+                    </div>
 
-        </div>
+                </div>
 
         {{-- Policy Info Modal --}}
         @if($showPolicyInfoModal)
@@ -196,17 +196,17 @@
                 <div class="relative w-full max-w-3xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[85vh] overflow-y-auto">
                     <button wire:click="closePolicyInfoModal" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
                         <x-ri-close-line class="size-5" />
-                    </button>
+                </button>
                     <div class="p-6">
                         <div class="flex items-center gap-3 mb-6">
                             <div class="w-12 h-12 rounded-xl bg-info/20 flex items-center justify-center">
                                 <x-ri-information-line class="size-6 text-info" />
-                            </div>
+            </div>
                             <div>
                                 <h3 class="text-xl font-bold">Understanding Firewall Policies</h3>
                                 <p class="text-sm text-base/60">How default policies control your network traffic</p>
-                            </div>
                         </div>
+                    </div>
 
                         <div class="space-y-6 prose prose-sm max-w-none">
                             <div class="p-4 bg-background border border-neutral/20 rounded-lg">
@@ -220,7 +220,7 @@
                                     <li><strong class="text-warning">REJECT:</strong> Block incoming traffic and send rejection notification to sender</li>
                                     <li><strong class="text-error">DROP:</strong> Silently discard incoming traffic without notifying sender (recommended)</li>
                                 </ul>
-                            </div>
+                </div>
 
                             <div class="p-4 bg-background border border-neutral/20 rounded-lg">
                                 <h4 class="font-semibold text-base mb-2 flex items-center gap-2">
@@ -233,7 +233,7 @@
                                     <li><strong class="text-warning">REJECT:</strong> Block outgoing traffic and notify your VM</li>
                                     <li><strong class="text-error">DROP:</strong> Silently discard outgoing traffic</li>
                                 </ul>
-                            </div>
+                        </div>
 
                             <div class="p-4 bg-warning/10 border border-warning/30 rounded-lg">
                                 <h4 class="font-semibold text-base mb-2 flex items-center gap-2">
@@ -247,23 +247,23 @@
                                     <li>Create explicit <strong>ACCEPT</strong> rules for allowed traffic</li>
                                     <li>Everything not explicitly allowed will be blocked</li>
                                 </ol>
-                            </div>
+                        </div>
 
                             <div class="p-4 bg-info/10 border border-info/30 rounded-lg">
                                 <h4 class="font-semibold text-base mb-2">Additional Filters</h4>
                                 <p class="text-sm text-base/80 mb-2"><strong>IP Filter:</strong> Validates that source/destination IP addresses in packets match the VM's assigned IPs. Helps prevent IP spoofing.</p>
                                 <p class="text-sm text-base/80"><strong>MAC Filter:</strong> Validates that MAC addresses match the VM's network adapters. Provides additional layer of security.</p>
                             </div>
-                        </div>
+                                </div>
 
                         <div class="flex justify-end mt-6">
                             <button wire:click="closePolicyInfoModal" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
                                 Got it
                             </button>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
         @endif
 
         {{-- Tabs Navigation --}}
@@ -277,7 +277,7 @@
                         <span>Firewall Rules</span>
                     </div>
                     <div x-show="activeTab === 'rules'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"></div>
-                </button>
+                                        </button>
                 <button @click="activeTab = 'aliases'" 
                         class="px-6 py-4 text-sm font-semibold transition-all relative whitespace-nowrap"
                         :class="activeTab === 'aliases' ? 'text-primary' : 'text-base/60 hover:text-base'">
@@ -286,7 +286,7 @@
                         <span>IP Aliases</span>
                     </div>
                     <div x-show="activeTab === 'aliases'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"></div>
-                </button>
+                                        </button>
                 <button @click="activeTab = 'ipsets'" 
                         class="px-6 py-4 text-sm font-semibold transition-all relative whitespace-nowrap"
                         :class="activeTab === 'ipsets' ? 'text-primary' : 'text-base/60 hover:text-base'">
@@ -295,7 +295,7 @@
                         <span>IP Sets</span>
                     </div>
                     <div x-show="activeTab === 'ipsets'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"></div>
-                </button>
+                                        </button>
                 <button @click="activeTab = 'logs'" 
                         class="px-6 py-4 text-sm font-semibold transition-all relative whitespace-nowrap"
                         :class="activeTab === 'logs' ? 'text-primary' : 'text-base/60 hover:text-base'">
@@ -305,7 +305,7 @@
                         <span class="px-2 py-0.5 bg-primary/10 text-primary rounded-full text-xs font-bold">{{ count($firewallLogs) }}</span>
                     </div>
                     <div x-show="activeTab === 'logs'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"></div>
-                </button>
+                                        </button>
             </div>
 
             {{-- Tab Contents --}}
@@ -317,7 +317,7 @@
                         <button type="button" wire:click="startCreateRule" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2">
                             <x-ri-add-line class="size-4" />
                             Add Rule
-                        </button>
+                                        </button>
                     </div>
 
                     @if(count($rules) > 0)
@@ -334,13 +334,13 @@
                                         <th class="text-left py-3 px-4 text-xs font-semibold text-base/70 uppercase">Port</th>
                                         <th class="text-left py-3 px-4 text-xs font-semibold text-base/70 uppercase">Status</th>
                                         <th class="text-left py-3 px-4 text-xs font-semibold text-base/70 uppercase">Actions</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
+                                </tr>
+                            </thead>
+                            <tbody>
                                     @foreach($rules as $index => $rule)
                                         <tr class="border-b border-neutral/10 hover:bg-background-secondary/30 transition-colors">
                                             <td class="py-3 px-4 text-sm font-mono">{{ $rule['pos'] ?? '-' }}</td>
-                                            <td class="py-3 px-4 text-sm">
+                                        <td class="py-3 px-4 text-sm">
                                                 @php
                                                     $actionClass = match($rule['action'] ?? '') {
                                                         'ACCEPT' => 'bg-success/20 text-success',
@@ -352,14 +352,14 @@
                                                 <span class="px-2 py-1 rounded text-xs font-medium {{ $actionClass }}">
                                                     {{ $rule['action'] ?? '-' }}
                                                 </span>
-                                            </td>
-                                            <td class="py-3 px-4 text-sm">
+                                        </td>
+                                        <td class="py-3 px-4 text-sm">
                                                 <span class="px-2 py-1 rounded text-xs font-medium bg-info/20 text-info">
                                                     {{ strtoupper($rule['type'] ?? 'IN') }}
                                                 </span>
-                                            </td>
+                                        </td>
                                             <td class="py-3 px-4 text-sm font-mono text-xs">
-                                                <div class="flex items-center gap-1">
+                                            <div class="flex items-center gap-1">
                                                     <span>{{ $rule['source'] ?? '-' }}</span>
                                                     @php $ruleSourceIP = $rule['source'] ?? ''; @endphp
                                                     @if($ruleSourceIP && $ruleSourceIP !== '-' && $this->checkIsPublicIP($ruleSourceIP))
@@ -380,25 +380,25 @@
                                                                 }
                                                             " class="text-base/50 hover:text-base/70 transition-colors" title="View IP Location">
                                                                 <x-ri-map-pin-line class="size-3" />
-                                                            </button>
+                                                        </button>
                                                             
                                                             {{-- IP Location Modal (same as logs) --}}
                                                             <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
                                                                 <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto">
                                                                     <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
-                                                                        <x-ri-close-line class="size-5" />
-                                                                    </button>
+                                                                    <x-ri-close-line class="size-5" />
+                                                                </button>
                                                                     <div class="p-6">
-                                                                        <div class="flex items-center gap-2 mb-4">
+                                                                    <div class="flex items-center gap-2 mb-4">
                                                                             <x-ri-map-pin-line class="size-5 text-primary" />
                                                                             <h3 class="text-lg font-semibold">IP Address: <span class="font-mono">{{ $ruleSourceIP }}</span></h3>
-                                                                        </div>
+                                                                    </div>
                                                                         <div x-show="loading" class="text-center py-8">
                                                                             <svg fill="currentColor" stroke="currentColor" viewBox="0 0 128 128" class="size-6 mx-auto mb-2">
                                                                                 <g><path stroke-width="5" d="M31.6 8.98a4.02 4.02 0 0 0 1.7 5.3l6.12 3.22a52.56 52.56 0 1 0 63.13 10.73L96 33.97a43.88 43.88 0 1 1-53-8.5l-3.65 7.4a4.02 4.02 0 0 0 1.72 5.3 3.73 3.73 0 0 0 5.13-1.67l7.66-15.63a4.18 4.18 0 0 0-1.75-5.4L36.74 7.32a3.73 3.73 0 0 0-5.13 1.66z" fill="currentColor" stroke="currentColor"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1000ms" repeatCount="indefinite"></animateTransform></g>
                                                                             </svg>
                                                                             <p class="text-sm text-base/60">Loading location data...</p>
-                                                                        </div>
+                                                                </div>
                                                                         <div x-show="ipData && !loading">
                                                                             <template x-if="ipData && ipData.status === 'success'">
                                                                                 <div>
@@ -421,10 +421,10 @@
                                                                                         <p class="text-xs text-base/60 mb-2">Location Map:</p>
                                                                                         <div class="rounded-lg border border-neutral/20 overflow-hidden" style="height: 256px;">
                                                                                             <iframe x-bind:src="'https://www.openstreetmap.org/export/embed.html?bbox=' + encodeURIComponent((parseFloat(ipData.lon) - 0.01) + ',' + (parseFloat(ipData.lat) - 0.01) + ',' + (parseFloat(ipData.lon) + 0.01) + ',' + (parseFloat(ipData.lat) + 0.01)) + '&layer=mapnik&marker=' + encodeURIComponent(ipData.lat + ',' + ipData.lon)" style="width: 100%; height: 100%; border: 0;" frameborder="0" loading="lazy" allowfullscreen title="Location Map"></iframe>
-                                                                                        </div>
-                                                                                    </div>
-                                                                                </div>
-                                                                            </template>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </template>
                                                                             <template x-if="ipData && (ipData.status === 'fail' || ipData.status === 'error')">
                                                                                 <div class="text-center py-4">
                                                                                     <p class="text-sm text-warning" x-text="ipData.message || 'Failed to load location data'"></p>
@@ -436,171 +436,171 @@
                                                             </div>
                                                         </div>
                                                     @endif
-                                                </div>
-                                            </td>
+                                            </div>
+                                        </td>
                                             <td class="py-3 px-4 text-sm font-mono text-xs">
-                                                <div class="flex items-center gap-1">
+                                            <div class="flex items-center gap-1">
                                                     <span>{{ $rule['dest'] ?? '-' }}</span>
                                                     @php $ruleDestIP = $rule['dest'] ?? ''; @endphp
                                                     @if($ruleDestIP && $ruleDestIP !== '-' && $this->checkIsPublicIP($ruleDestIP))
-                                                        <div class="relative" x-data="{ open: false, loading: false, ipData: null }" x-cloak>
+                                                    <div class="relative" x-data="{ open: false, loading: false, ipData: null }" x-cloak>
                                                             <button type="button" @click.stop="
-                                                                if (!ipData && !loading) {
-                                                                    loading = true;
-                                                                    open = true;
+                                                            if (!ipData && !loading) {
+                                                                loading = true;
+                                                                open = true;
                                                                     window.fetchIPLocation('{{ $ruleDestIP }}').then(data => {
-                                                                        ipData = data;
-                                                                        loading = false;
-                                                                    }).catch(err => {
+                                                                    ipData = data;
+                                                                    loading = false;
+                                                                }).catch(err => {
                                                                         ipData = { status: 'error', message: 'Failed to load' };
-                                                                        loading = false;
-                                                                    });
-                                                                } else {
-                                                                    open = true;
-                                                                }
-                                                            " class="text-base/50 hover:text-base/70 transition-colors" title="View IP Location">
-                                                                <x-ri-map-pin-line class="size-3" />
-                                                            </button>
+                                                                    loading = false;
+                                                                });
+                                                            } else {
+                                                                open = true;
+                                                            }
+                                                        " class="text-base/50 hover:text-base/70 transition-colors" title="View IP Location">
+                                                            <x-ri-map-pin-line class="size-3" />
+                                                        </button>
                                                             
                                                             {{-- IP Location Modal (same structure) --}}
                                                             <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
                                                                 <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto">
-                                                                    <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
-                                                                        <x-ri-close-line class="size-5" />
-                                                                    </button>
+                                                                <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
+                                                                    <x-ri-close-line class="size-5" />
+                                                                </button>
                                                                     <div class="p-6">
-                                                                        <div class="flex items-center gap-2 mb-4">
+                                                                    <div class="flex items-center gap-2 mb-4">
                                                                             <x-ri-map-pin-line class="size-5 text-primary" />
                                                                             <h3 class="text-lg font-semibold">IP Address: <span class="font-mono">{{ $ruleDestIP }}</span></h3>
-                                                                        </div>
-                                                                        <div x-show="loading" class="text-center py-8">
-                                                                            <svg fill="currentColor" stroke="currentColor" viewBox="0 0 128 128" class="size-6 mx-auto mb-2">
+                                                                    </div>
+                                                                    <div x-show="loading" class="text-center py-8">
+                                                                        <svg fill="currentColor" stroke="currentColor" viewBox="0 0 128 128" class="size-6 mx-auto mb-2">
                                                                                 <g><path stroke-width="5" d="M31.6 8.98a4.02 4.02 0 0 0 1.7 5.3l6.12 3.22a52.56 52.56 0 1 0 63.13 10.73L96 33.97a43.88 43.88 0 1 1-53-8.5l-3.65 7.4a4.02 4.02 0 0 0 1.72 5.3 3.73 3.73 0 0 0 5.13-1.67l7.66-15.63a4.18 4.18 0 0 0-1.75-5.4L36.74 7.32a3.73 3.73 0 0 0-5.13 1.66z" fill="currentColor" stroke="currentColor"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1000ms" repeatCount="indefinite"></animateTransform></g>
-                                                                            </svg>
-                                                                            <p class="text-sm text-base/60">Loading location data...</p>
-                                                                        </div>
-                                                                        <div x-show="ipData && !loading">
+                                                                        </svg>
+                                                                        <p class="text-sm text-base/60">Loading location data...</p>
+                                                                    </div>
+                                                                    <div x-show="ipData && !loading">
                                                                             <template x-if="ipData && ipData.status === 'success'">
-                                                                                <div>
-                                                                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                                                                            <div>
+                                                                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                                                                         <div class="space-y-2">
                                                                                             <div><span class="text-xs text-base/60">Country:</span> <span class="font-semibold text-sm" x-text="ipData.country"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Region:</span> <span class="font-semibold text-sm" x-text="ipData.regionName + ' (' + ipData.region + ')'"></span></div>
                                                                                             <div><span class="text-xs text-base/60">City:</span> <span class="font-semibold text-sm" x-text="ipData.city"></span></div>
                                                                                             <div><span class="text-xs text-base/60">ZIP:</span> <span class="font-semibold text-sm" x-text="ipData.zip"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Timezone:</span> <span class="font-semibold text-sm" x-text="ipData.timezone"></span></div>
-                                                                                        </div>
+                                                                                    </div>
                                                                                         <div class="space-y-2">
                                                                                             <div><span class="text-xs text-base/60">ISP:</span> <span class="font-semibold text-sm" x-text="ipData.isp"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Organization:</span> <span class="font-semibold text-sm" x-text="ipData.org"></span></div>
                                                                                             <div><span class="text-xs text-base/60">AS:</span> <span class="font-semibold text-sm" x-text="ipData.as"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Coordinates:</span> <span class="font-semibold text-sm font-mono" x-text="ipData.lat + ', ' + ipData.lon"></span></div>
-                                                                                        </div>
                                                                                     </div>
+                                                                                </div>
                                                                                     <div x-show="ipData.lat && ipData.lon" class="mt-4">
-                                                                                        <p class="text-xs text-base/60 mb-2">Location Map:</p>
+                                                                                    <p class="text-xs text-base/60 mb-2">Location Map:</p>
                                                                                         <div class="rounded-lg border border-neutral/20 overflow-hidden" style="height: 256px;">
                                                                                             <iframe x-bind:src="'https://www.openstreetmap.org/export/embed.html?bbox=' + encodeURIComponent((parseFloat(ipData.lon) - 0.01) + ',' + (parseFloat(ipData.lat) - 0.01) + ',' + (parseFloat(ipData.lon) + 0.01) + ',' + (parseFloat(ipData.lat) + 0.01)) + '&layer=mapnik&marker=' + encodeURIComponent(ipData.lat + ',' + ipData.lon)" style="width: 100%; height: 100%; border: 0;" frameborder="0" loading="lazy" allowfullscreen title="Location Map"></iframe>
-                                                                                        </div>
                                                                                     </div>
                                                                                 </div>
-                                                                            </template>
-                                                                            <template x-if="ipData && (ipData.status === 'fail' || ipData.status === 'error')">
-                                                                                <div class="text-center py-4">
-                                                                                    <p class="text-sm text-warning" x-text="ipData.message || 'Failed to load location data'"></p>
-                                                                                </div>
-                                                                            </template>
-                                                                        </div>
+                                                                            </div>
+                                                                        </template>
+                                                                        <template x-if="ipData && (ipData.status === 'fail' || ipData.status === 'error')">
+                                                                            <div class="text-center py-4">
+                                                                                <p class="text-sm text-warning" x-text="ipData.message || 'Failed to load location data'"></p>
+                                                                            </div>
+                                                                        </template>
                                                                     </div>
                                                                 </div>
                                                             </div>
                                                         </div>
+                                                    </div>
                                                     @endif
-                                                </div>
-                                            </td>
+                                            </div>
+                                        </td>
                                             <td class="py-3 px-4 text-sm font-mono text-xs">
-                                                <div class="flex items-center gap-1">
+                                            <div class="flex items-center gap-1">
                                                     <span>{{ $rule['dest'] ?? '-' }}</span>
                                                     @php $ruleDestIP = $rule['dest'] ?? ''; @endphp
                                                     @if($ruleDestIP && $ruleDestIP !== '-' && $this->checkIsPublicIP($ruleDestIP))
-                                                        <div class="relative" x-data="{ open: false, loading: false, ipData: null }" x-cloak>
+                                                    <div class="relative" x-data="{ open: false, loading: false, ipData: null }" x-cloak>
                                                             <button type="button" @click.stop="
-                                                                if (!ipData && !loading) {
-                                                                    loading = true;
-                                                                    open = true;
+                                                            if (!ipData && !loading) {
+                                                                loading = true;
+                                                                open = true;
                                                                     window.fetchIPLocation('{{ $ruleDestIP }}').then(data => {
-                                                                        ipData = data;
-                                                                        loading = false;
-                                                                    }).catch(err => {
+                                                                    ipData = data;
+                                                                    loading = false;
+                                                                }).catch(err => {
                                                                         ipData = { status: 'error', message: 'Failed to load' };
-                                                                        loading = false;
-                                                                    });
-                                                                } else {
-                                                                    open = true;
-                                                                }
-                                                            " class="text-base/50 hover:text-base/70 transition-colors" title="View IP Location">
-                                                                <x-ri-map-pin-line class="size-3" />
-                                                            </button>
+                                                                    loading = false;
+                                                                });
+                                                            } else {
+                                                                open = true;
+                                                            }
+                                                        " class="text-base/50 hover:text-base/70 transition-colors" title="View IP Location">
+                                                            <x-ri-map-pin-line class="size-3" />
+                                                        </button>
                                                             
                                                             {{-- IP Location Modal (same structure) --}}
                                                             <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
                                                                 <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto">
-                                                                    <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
-                                                                        <x-ri-close-line class="size-5" />
-                                                                    </button>
+                                                                <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
+                                                                    <x-ri-close-line class="size-5" />
+                                                                </button>
                                                                     <div class="p-6">
-                                                                        <div class="flex items-center gap-2 mb-4">
+                                                                    <div class="flex items-center gap-2 mb-4">
                                                                             <x-ri-map-pin-line class="size-5 text-primary" />
                                                                             <h3 class="text-lg font-semibold">IP Address: <span class="font-mono">{{ $ruleDestIP }}</span></h3>
-                                                                        </div>
-                                                                        <div x-show="loading" class="text-center py-8">
-                                                                            <svg fill="currentColor" stroke="currentColor" viewBox="0 0 128 128" class="size-6 mx-auto mb-2">
+                                                                    </div>
+                                                                    <div x-show="loading" class="text-center py-8">
+                                                                        <svg fill="currentColor" stroke="currentColor" viewBox="0 0 128 128" class="size-6 mx-auto mb-2">
                                                                                 <g><path stroke-width="5" d="M31.6 8.98a4.02 4.02 0 0 0 1.7 5.3l6.12 3.22a52.56 52.56 0 1 0 63.13 10.73L96 33.97a43.88 43.88 0 1 1-53-8.5l-3.65 7.4a4.02 4.02 0 0 0 1.72 5.3 3.73 3.73 0 0 0 5.13-1.67l7.66-15.63a4.18 4.18 0 0 0-1.75-5.4L36.74 7.32a3.73 3.73 0 0 0-5.13 1.66z" fill="currentColor" stroke="currentColor"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1000ms" repeatCount="indefinite"></animateTransform></g>
-                                                                            </svg>
-                                                                            <p class="text-sm text-base/60">Loading location data...</p>
-                                                                        </div>
-                                                                        <div x-show="ipData && !loading">
+                                                                        </svg>
+                                                                        <p class="text-sm text-base/60">Loading location data...</p>
+                                                                    </div>
+                                                                    <div x-show="ipData && !loading">
                                                                             <template x-if="ipData && ipData.status === 'success'">
-                                                                                <div>
-                                                                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                                                                            <div>
+                                                                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                                                                         <div class="space-y-2">
                                                                                             <div><span class="text-xs text-base/60">Country:</span> <span class="font-semibold text-sm" x-text="ipData.country"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Region:</span> <span class="font-semibold text-sm" x-text="ipData.regionName + ' (' + ipData.region + ')'"></span></div>
                                                                                             <div><span class="text-xs text-base/60">City:</span> <span class="font-semibold text-sm" x-text="ipData.city"></span></div>
                                                                                             <div><span class="text-xs text-base/60">ZIP:</span> <span class="font-semibold text-sm" x-text="ipData.zip"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Timezone:</span> <span class="font-semibold text-sm" x-text="ipData.timezone"></span></div>
-                                                                                        </div>
+                                                                                    </div>
                                                                                         <div class="space-y-2">
                                                                                             <div><span class="text-xs text-base/60">ISP:</span> <span class="font-semibold text-sm" x-text="ipData.isp"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Organization:</span> <span class="font-semibold text-sm" x-text="ipData.org"></span></div>
                                                                                             <div><span class="text-xs text-base/60">AS:</span> <span class="font-semibold text-sm" x-text="ipData.as"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Coordinates:</span> <span class="font-semibold text-sm font-mono" x-text="ipData.lat + ', ' + ipData.lon"></span></div>
-                                                                                        </div>
                                                                                     </div>
+                                                                                </div>
                                                                                     <div x-show="ipData.lat && ipData.lon" class="mt-4">
-                                                                                        <p class="text-xs text-base/60 mb-2">Location Map:</p>
+                                                                                    <p class="text-xs text-base/60 mb-2">Location Map:</p>
                                                                                         <div class="rounded-lg border border-neutral/20 overflow-hidden" style="height: 256px;">
                                                                                             <iframe x-bind:src="'https://www.openstreetmap.org/export/embed.html?bbox=' + encodeURIComponent((parseFloat(ipData.lon) - 0.01) + ',' + (parseFloat(ipData.lat) - 0.01) + ',' + (parseFloat(ipData.lon) + 0.01) + ',' + (parseFloat(ipData.lat) + 0.01)) + '&layer=mapnik&marker=' + encodeURIComponent(ipData.lat + ',' + ipData.lon)" style="width: 100%; height: 100%; border: 0;" frameborder="0" loading="lazy" allowfullscreen title="Location Map"></iframe>
-                                                                                        </div>
                                                                                     </div>
                                                                                 </div>
-                                                                            </template>
-                                                                            <template x-if="ipData && (ipData.status === 'fail' || ipData.status === 'error')">
-                                                                                <div class="text-center py-4">
-                                                                                    <p class="text-sm text-warning" x-text="ipData.message || 'Failed to load location data'"></p>
-                                                                                </div>
-                                                                            </template>
-                                                                        </div>
+                                                                            </div>
+                                                                        </template>
+                                                                        <template x-if="ipData && (ipData.status === 'fail' || ipData.status === 'error')">
+                                                                            <div class="text-center py-4">
+                                                                                <p class="text-sm text-warning" x-text="ipData.message || 'Failed to load location data'"></p>
+                                                                            </div>
+                                                                        </template>
                                                                     </div>
                                                                 </div>
                                                             </div>
                                                         </div>
+                                                    </div>
                                                     @endif
-                                                </div>
-                                            </td>
+                                            </div>
+                                        </td>
                                             <td class="py-3 px-4 text-sm">{{ strtoupper($rule['proto'] ?? ($rule['macro'] ?? 'ANY')) }}</td>
                                             <td class="py-3 px-4 text-sm font-mono text-xs">{{ $rule['dport'] ?? $rule['sport'] ?? '-' }}</td>
-                                            <td class="py-3 px-4 text-sm">
+                                        <td class="py-3 px-4 text-sm">
                                                 @if(isset($rule['enable']) && $rule['enable'] == 0)
                                                     <span class="px-2 py-1 rounded text-xs font-medium bg-base/20 text-base/60">Disabled</span>
                                                 @else
@@ -615,20 +615,20 @@
                                                         @else
                                                             <x-ri-toggle-fill class="size-4" />
                                                         @endif
-                                                    </button>
+                                                        </button>
                                                     <button type="button" wire:click="startEditRule({{ $index }})" wire:key="edit-{{ $index }}" class="text-primary hover:text-primary/80 transition-colors" title="Edit rule">
                                                         <x-ri-edit-line class="size-4" />
-                                                    </button>
+                                                                </button>
                                                     <button type="button" wire:click="confirmDeleteRule({{ $index }})" wire:key="delete-{{ $index }}" class="text-error hover:text-error/80 transition-colors" title="Delete rule">
                                                         <x-ri-delete-bin-line class="size-4" />
                                                     </button>
-                                                </div>
+                                                                    </div>
                                             </td>
                                         </tr>
                                     @endforeach
                                 </tbody>
                             </table>
-                        </div>
+                                                                </div>
                     @else
                         <div class="text-center py-12 text-base/60">
                             <x-ri-shield-line class="size-16 mx-auto mb-4 opacity-30" />
@@ -638,9 +638,9 @@
                                 <x-ri-add-line class="size-4 inline mr-1" />
                                 Create Rule
                             </button>
-                        </div>
+                                                            </div>
                     @endif
-                </div>
+                                                        </div>
 
                 {{-- ALIASES TAB --}}
                 <div x-show="activeTab === 'aliases'" x-transition>
@@ -648,12 +648,12 @@
                         <div>
                             <h3 class="text-lg font-semibold">IP Aliases</h3>
                             <p class="text-sm text-base/60">Create named references to IP addresses or CIDR ranges</p>
-                        </div>
+                                                    </div>
                         <button type="button" wire:click="startCreateAlias" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2">
                             <x-ri-add-line class="size-4" />
                             Add Alias
                         </button>
-                    </div>
+                                            </div>
 
                     @if(count($aliases) > 0)
                         <div class="grid gap-3">
@@ -670,15 +670,15 @@
                                         <div class="flex gap-2">
                                             <button type="button" wire:click="startEditAlias('{{ $alias['name'] }}')" class="text-primary hover:text-primary/80 transition-colors" title="Edit alias">
                                                 <x-ri-edit-line class="size-4" />
-                                            </button>
+                                                </button>
                                             <button type="button" wire:click="confirmDeleteAlias('{{ $alias['name'] }}')" class="text-error hover:text-error/80 transition-colors" title="Delete alias">
                                                 <x-ri-delete-bin-line class="size-4" />
-                                            </button>
-                                        </div>
-                                    </div>
-                                </div>
+                                                        </button>
+                                                                </div>
+                                                                    </div>
+                                                                    </div>
                             @endforeach
-                        </div>
+                                                                </div>
                     @else
                         <div class="text-center py-12 text-base/60">
                             <x-ri-bookmark-line class="size-16 mx-auto mb-4 opacity-30" />
@@ -688,9 +688,9 @@
                                 <x-ri-add-line class="size-4 inline mr-1" />
                                 Create Alias
                             </button>
-                        </div>
+                                                            </div>
                     @endif
-                </div>
+                                                        </div>
 
                 {{-- IPSETS TAB --}}
                 <div x-show="activeTab === 'ipsets'" x-transition>
@@ -698,12 +698,12 @@
                         <div>
                             <h3 class="text-lg font-semibold">IP Sets</h3>
                             <p class="text-sm text-base/60">Group multiple IPs/CIDRs for easier rule management</p>
-                        </div>
+                                                                </div>
                         <button type="button" wire:click="startCreateIPSet" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2">
                             <x-ri-add-line class="size-4" />
                             Create IP Set
-                        </button>
-                    </div>
+                                                            </button>
+                                                                </div>
 
                     <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                         {{-- IPSets List --}}
@@ -721,24 +721,24 @@
                                                     @if(!empty($ipset['comment']))
                                                         <div class="text-xs text-base/60 mt-1">{{ $ipset['comment'] }}</div>
                                                     @endif
-                                                </div>
+                                                                </div>
                                                 <div class="flex gap-2">
                                                     <button type="button" wire:click.stop="confirmDeleteIPSet('{{ $ipset['name'] }}')" class="text-error hover:text-error/80 transition-colors" title="Delete IPSet">
                                                         <x-ri-delete-bin-line class="size-4" />
-                                                    </button>
-                                                </div>
-                                            </div>
-                                        </div>
+                                                            </button>
+                                                        </div>
+                                                                    </div>
+                                                                                </div>
                                     @endforeach
-                                </div>
+                                                                            </div>
                             @else
                                 <div class="text-center py-8 text-base/60 bg-background-secondary/30 rounded-lg border border-dashed border-neutral/30">
                                     <x-ri-folder-3-line class="size-12 mx-auto mb-3 opacity-30" />
                                     <p class="text-sm">No IP Sets created yet</p>
-                                </div>
+                                                                                </div>
                             @endif
-                        </div>
-
+                                                                        </div>
+                                                                        
                         {{-- IPSet Members --}}
                         <div>
                             @if($selectedIPSetName)
@@ -748,8 +748,8 @@
                                         <x-ri-add-line class="size-3" />
                                         Add IP/CIDR
                                     </button>
-                                </div>
-
+                                                                        </div>
+                                                                        
                                 @if(count($ipsetMembers) > 0)
                                     <div class="space-y-2 max-h-96 overflow-y-auto">
                                         @foreach($ipsetMembers as $member)
@@ -763,14 +763,14 @@
                                                         @if(isset($member['nomatch']) && $member['nomatch'])
                                                             <span class="inline-block mt-1 px-2 py-0.5 bg-warning/20 text-warning text-xs font-medium rounded">No Match</span>
                                                         @endif
-                                                    </div>
+                                                                                </div>
                                                     <button type="button" wire:click="confirmDeleteIPSetMember('{{ $member['cidr'] }}')" class="text-error hover:text-error/80 transition-colors" title="Remove">
                                                         <x-ri-close-circle-line class="size-4" />
                                                     </button>
-                                                </div>
-                                            </div>
+                                                                            </div>
+                                                                                </div>
                                         @endforeach
-                                    </div>
+                                                                                </div>
                                 @else
                                     <div class="text-center py-8 text-base/60 bg-background-secondary/30 rounded-lg border border-dashed border-neutral/30">
                                         <x-ri-inbox-line class="size-10 mx-auto mb-2 opacity-30" />
@@ -778,7 +778,7 @@
                                         <button type="button" wire:click="startAddIPSetMember" class="mt-3 px-3 py-1.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-xs font-medium">
                                             Add First Member
                                         </button>
-                                    </div>
+                                                                            </div>
                                 @endif
                             @else
                                 <div class="text-center py-12 text-base/60">
@@ -786,10 +786,10 @@
                                     <p class="text-sm">Select an IP Set to view its members</p>
                                 </div>
                             @endif
-                        </div>
-                    </div>
-                </div>
-
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                
                 {{-- LOGS TAB --}}
                 <div x-show="activeTab === 'logs'" x-transition>
                     <div class="flex items-center justify-between mb-4">
@@ -799,15 +799,15 @@
                             <span wire:loading.remove wire:target="loadFirewallLogs">Refresh</span>
                             <span wire:loading wire:target="loadFirewallLogs">Loading...</span>
                         </button>
-                    </div>
+                                                                    </div>
 
                     @if(!empty($logError))
                         <div class="bg-warning/10 border border-warning/30 rounded-lg p-4 mb-4">
                             <div class="flex items-start gap-3">
                                 <x-ri-error-warning-line class="size-5 text-warning flex-shrink-0 mt-0.5" />
                                 <p class="text-sm text-warning/90">{{ $logError }}</p>
-                            </div>
-                        </div>
+                                                                        </div>
+                                                                    </div>
                     @endif
 
                     @if(count($firewallLogs) > 0)
@@ -863,16 +863,16 @@
                                                                         <x-ri-close-line class="size-5" />
                                                                     </button>
                                                                     <div class="p-6">
-                                                                        <div class="flex items-center gap-2 mb-4">
+                                                                    <div class="flex items-center gap-2 mb-4">
                                                                             <x-ri-map-pin-line class="size-5 text-primary" />
                                                                             <h3 class="text-lg font-semibold">IP Address: <span class="font-mono">{{ $sourceIP }}</span></h3>
-                                                                        </div>
+                                                                    </div>
                                                                         <div x-show="loading" class="text-center py-8">
                                                                             <svg fill="currentColor" stroke="currentColor" viewBox="0 0 128 128" class="size-6 mx-auto mb-2">
                                                                                 <g><path stroke-width="5" d="M31.6 8.98a4.02 4.02 0 0 0 1.7 5.3l6.12 3.22a52.56 52.56 0 1 0 63.13 10.73L96 33.97a43.88 43.88 0 1 1-53-8.5l-3.65 7.4a4.02 4.02 0 0 0 1.72 5.3 3.73 3.73 0 0 0 5.13-1.67l7.66-15.63a4.18 4.18 0 0 0-1.75-5.4L36.74 7.32a3.73 3.73 0 0 0-5.13 1.66z" fill="currentColor" stroke="currentColor"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1000ms" repeatCount="indefinite"></animateTransform></g>
                                                                             </svg>
                                                                             <p class="text-sm text-base/60">Loading location data...</p>
-                                                                        </div>
+                                                                                </div>
                                                                         <div x-show="ipData && !loading">
                                                                             <template x-if="ipData && ipData.status === 'success'">
                                                                                 <div>
@@ -883,32 +883,32 @@
                                                                                             <div><span class="text-xs text-base/60">City:</span> <span class="font-semibold text-sm" x-text="ipData.city"></span></div>
                                                                                             <div><span class="text-xs text-base/60">ZIP:</span> <span class="font-semibold text-sm" x-text="ipData.zip"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Timezone:</span> <span class="font-semibold text-sm" x-text="ipData.timezone"></span></div>
-                                                                                        </div>
+                                                                            </div>
                                                                                         <div class="space-y-2">
                                                                                             <div><span class="text-xs text-base/60">ISP:</span> <span class="font-semibold text-sm" x-text="ipData.isp"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Organization:</span> <span class="font-semibold text-sm" x-text="ipData.org"></span></div>
                                                                                             <div><span class="text-xs text-base/60">AS:</span> <span class="font-semibold text-sm" x-text="ipData.as"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Coordinates:</span> <span class="font-semibold text-sm font-mono" x-text="ipData.lat + ', ' + ipData.lon"></span></div>
-                                                                                        </div>
-                                                                                    </div>
+                                                                                </div>
+                                                                            </div>
                                                                                     <div x-show="ipData.lat && ipData.lon" class="mt-4">
                                                                                         <p class="text-xs text-base/60 mb-2">Location Map:</p>
                                                                                         <div class="rounded-lg border border-neutral/20 overflow-hidden" style="height: 256px;">
                                                                                             <iframe x-bind:src="'https://www.openstreetmap.org/export/embed.html?bbox=' + encodeURIComponent((parseFloat(ipData.lon) - 0.01) + ',' + (parseFloat(ipData.lat) - 0.01) + ',' + (parseFloat(ipData.lon) + 0.01) + ',' + (parseFloat(ipData.lat) + 0.01)) + '&layer=mapnik&marker=' + encodeURIComponent(ipData.lat + ',' + ipData.lon)" style="width: 100%; height: 100%; border: 0;" frameborder="0" loading="lazy" allowfullscreen title="Location Map"></iframe>
-                                                                                        </div>
-                                                                                    </div>
                                                                                 </div>
-                                                                            </template>
+                                                                            </div>
+                                                                            </div>
+                                                                        </template>
                                                                             <template x-if="ipData && (ipData.status === 'fail' || ipData.status === 'error')">
                                                                                 <div class="text-center py-4">
                                                                                     <p class="text-sm text-warning" x-text="ipData.message || 'Failed to load location data'"></p>
-                                                                                </div>
-                                                                            </template>
-                                                                        </div>
+                                                                            </div>
+                                                                        </template>
                                                                     </div>
+                                                                            </div>
+                                                                            </div>
+                                                                        </div>
                                                                 </div>
-                                                            </div>
-                                                        </div>
                                                     @endif
                                                 </div>
                                             </td>
@@ -952,7 +952,7 @@
                                                                                 <g><path stroke-width="5" d="M31.6 8.98a4.02 4.02 0 0 0 1.7 5.3l6.12 3.22a52.56 52.56 0 1 0 63.13 10.73L96 33.97a43.88 43.88 0 1 1-53-8.5l-3.65 7.4a4.02 4.02 0 0 0 1.72 5.3 3.73 3.73 0 0 0 5.13-1.67l7.66-15.63a4.18 4.18 0 0 0-1.75-5.4L36.74 7.32a3.73 3.73 0 0 0-5.13 1.66z" fill="currentColor" stroke="currentColor"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1000ms" repeatCount="indefinite"></animateTransform></g>
                                                                             </svg>
                                                                             <p class="text-sm text-base/60">Loading location data...</p>
-                                                                        </div>
+                                                                                </div>
                                                                         <div x-show="ipData && !loading">
                                                                             <template x-if="ipData && ipData.status === 'success'">
                                                                                 <div>
@@ -963,19 +963,19 @@
                                                                                             <div><span class="text-xs text-base/60">City:</span> <span class="font-semibold text-sm" x-text="ipData.city"></span></div>
                                                                                             <div><span class="text-xs text-base/60">ZIP:</span> <span class="font-semibold text-sm" x-text="ipData.zip"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Timezone:</span> <span class="font-semibold text-sm" x-text="ipData.timezone"></span></div>
-                                                                                        </div>
+                                                                                </div>
                                                                                         <div class="space-y-2">
                                                                                             <div><span class="text-xs text-base/60">ISP:</span> <span class="font-semibold text-sm" x-text="ipData.isp"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Organization:</span> <span class="font-semibold text-sm" x-text="ipData.org"></span></div>
                                                                                             <div><span class="text-xs text-base/60">AS:</span> <span class="font-semibold text-sm" x-text="ipData.as"></span></div>
                                                                                             <div><span class="text-xs text-base/60">Coordinates:</span> <span class="font-semibold text-sm font-mono" x-text="ipData.lat + ', ' + ipData.lon"></span></div>
-                                                                                        </div>
+                                                                            </div>
                                                                                     </div>
                                                                                     <div x-show="ipData.lat && ipData.lon" class="mt-4">
                                                                                         <p class="text-xs text-base/60 mb-2">Location Map:</p>
                                                                                         <div class="rounded-lg border border-neutral/20 overflow-hidden" style="height: 256px;">
                                                                                             <iframe x-bind:src="'https://www.openstreetmap.org/export/embed.html?bbox=' + encodeURIComponent((parseFloat(ipData.lon) - 0.01) + ',' + (parseFloat(ipData.lat) - 0.01) + ',' + (parseFloat(ipData.lon) + 0.01) + ',' + (parseFloat(ipData.lat) + 0.01)) + '&layer=mapnik&marker=' + encodeURIComponent(ipData.lat + ',' + ipData.lon)" style="width: 100%; height: 100%; border: 0;" frameborder="0" loading="lazy" allowfullscreen title="Location Map"></iframe>
-                                                                                        </div>
+                                                                                </div>
                                                                                     </div>
                                                                                 </div>
                                                                             </template>
@@ -984,93 +984,13 @@
                                                                                     <p class="text-sm text-warning" x-text="ipData.message || 'Failed to load location data'"></p>
                                                                                 </div>
                                                                             </template>
-                                                                        </div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    @endif
-                                                </div>
-                                            </td>
-                                            <td class="py-3 px-4 text-xs font-mono">
-                                                <div class="flex items-center gap-1">
-                                                    <span>{{ $log['destination'] ?? '-' }}</span>
-                                                    @php $destIP = $log['destination'] ?? ''; @endphp
-                                                    @if($destIP && $destIP !== '-' && $this->checkIsPublicIP($destIP))
-                                                        <div class="relative" x-data="{ open: false, loading: false, ipData: null }" x-cloak>
-                                                            <button type="button" @click.stop="
-                                                                if (!ipData && !loading) {
-                                                                    loading = true;
-                                                                    open = true;
-                                                                    window.fetchIPLocation('{{ $destIP }}').then(data => {
-                                                                        ipData = data;
-                                                                        loading = false;
-                                                                    }).catch(err => {
-                                                                        ipData = { status: 'error', message: 'Failed to load' };
-                                                                        loading = false;
-                                                                    });
-                                                                } else {
-                                                                    open = true;
-                                                                }
-                                                            " class="text-base/50 hover:text-base/70 transition-colors" title="View IP Location">
-                                                                <x-ri-map-pin-line class="size-3" />
-                                                            </button>
-                                                            
-                                                            {{-- IP Location Modal --}}
-                                                            <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="open = false" @keydown.escape.window="open = false" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
-                                                                <div @click.stop class="relative w-full max-w-4xl bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl max-h-[90vh] overflow-y-auto">
-                                                                    <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10">
-                                                                        <x-ri-close-line class="size-5" />
-                                                                    </button>
-                                                                    <div class="p-6">
-                                                                        <div class="flex items-center gap-2 mb-4">
-                                                                            <x-ri-map-pin-line class="size-5 text-primary" />
-                                                                            <h3 class="text-lg font-semibold">IP Address: <span class="font-mono">{{ $destIP }}</span></h3>
-                                                                        </div>
-                                                                        <div x-show="loading" class="text-center py-8">
-                                                                            <svg fill="currentColor" stroke="currentColor" viewBox="0 0 128 128" class="size-6 mx-auto mb-2">
-                                                                                <g><path stroke-width="5" d="M31.6 8.98a4.02 4.02 0 0 0 1.7 5.3l6.12 3.22a52.56 52.56 0 1 0 63.13 10.73L96 33.97a43.88 43.88 0 1 1-53-8.5l-3.65 7.4a4.02 4.02 0 0 0 1.72 5.3 3.73 3.73 0 0 0 5.13-1.67l7.66-15.63a4.18 4.18 0 0 0-1.75-5.4L36.74 7.32a3.73 3.73 0 0 0-5.13 1.66z" fill="currentColor" stroke="currentColor"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1000ms" repeatCount="indefinite"></animateTransform></g>
-                                                                            </svg>
-                                                                            <p class="text-sm text-base/60">Loading location data...</p>
-                                                                        </div>
-                                                                        <div x-show="ipData && !loading">
-                                                                            <template x-if="ipData && ipData.status === 'success'">
-                                                                                <div>
-                                                                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                                                                                        <div class="space-y-2">
-                                                                                            <div><span class="text-xs text-base/60">Country:</span> <span class="font-semibold text-sm" x-text="ipData.country"></span></div>
-                                                                                            <div><span class="text-xs text-base/60">Region:</span> <span class="font-semibold text-sm" x-text="ipData.regionName + ' (' + ipData.region + ')'"></span></div>
-                                                                                            <div><span class="text-xs text-base/60">City:</span> <span class="font-semibold text-sm" x-text="ipData.city"></span></div>
-                                                                                            <div><span class="text-xs text-base/60">ZIP:</span> <span class="font-semibold text-sm" x-text="ipData.zip"></span></div>
-                                                                                            <div><span class="text-xs text-base/60">Timezone:</span> <span class="font-semibold text-sm" x-text="ipData.timezone"></span></div>
-                                                                                        </div>
-                                                                                        <div class="space-y-2">
-                                                                                            <div><span class="text-xs text-base/60">ISP:</span> <span class="font-semibold text-sm" x-text="ipData.isp"></span></div>
-                                                                                            <div><span class="text-xs text-base/60">Organization:</span> <span class="font-semibold text-sm" x-text="ipData.org"></span></div>
-                                                                                            <div><span class="text-xs text-base/60">AS:</span> <span class="font-semibold text-sm" x-text="ipData.as"></span></div>
-                                                                                            <div><span class="text-xs text-base/60">Coordinates:</span> <span class="font-semibold text-sm font-mono" x-text="ipData.lat + ', ' + ipData.lon"></span></div>
-                                                                                        </div>
-                                                                                    </div>
-                                                                                    <div x-show="ipData.lat && ipData.lon" class="mt-4">
-                                                                                        <p class="text-xs text-base/60 mb-2">Location Map:</p>
-                                                                                        <div class="rounded-lg border border-neutral/20 overflow-hidden" style="height: 256px;">
-                                                                                            <iframe x-bind:src="'https://www.openstreetmap.org/export/embed.html?bbox=' + encodeURIComponent((parseFloat(ipData.lon) - 0.01) + ',' + (parseFloat(ipData.lat) - 0.01) + ',' + (parseFloat(ipData.lon) + 0.01) + ',' + (parseFloat(ipData.lat) + 0.01)) + '&layer=mapnik&marker=' + encodeURIComponent(ipData.lat + ',' + ipData.lon)" style="width: 100%; height: 100%; border: 0;" frameborder="0" loading="lazy" allowfullscreen title="Location Map"></iframe>
-                                                                                        </div>
                                                                                     </div>
                                                                                 </div>
-                                                                            </template>
-                                                                            <template x-if="ipData && (ipData.status === 'fail' || ipData.status === 'error')">
-                                                                                <div class="text-center py-4">
-                                                                                    <p class="text-sm text-warning" x-text="ipData.message || 'Failed to load location data'"></p>
-                                                                                </div>
-                                                                            </template>
                                                                         </div>
                                                                     </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
+                                                                        </div>
                                                     @endif
-                                                </div>
+                                                                                    </div>
                                             </td>
                                             <td class="py-3 px-4 text-sm">{{ $log['protocol'] ?? '-' }}</td>
                                             <td class="py-3 px-4 text-xs font-mono">{{ $log['destination_port'] ?? '-' }}</td>
@@ -1078,28 +998,28 @@
                                     @endforeach
                                 </tbody>
                             </table>
-                        </div>
+                                                                                </div>
                         @if(count($firewallLogs) > 50)
                             <div class="mt-4 text-center text-sm text-base/60">
                                 Showing latest 50 of {{ count($firewallLogs) }} log entries (most recent first)
-                            </div>
+                                                                                    </div>
                         @endif
                     @else
                         <div class="text-center py-12 text-base/60">
                             <x-ri-file-list-3-line class="size-16 mx-auto mb-4 opacity-30" />
                             <h3 class="text-lg font-semibold mb-2">No Firewall Logs</h3>
                             <p class="text-sm">Logs will appear here when the firewall blocks or allows traffic</p>
-                        </div>
+                                                                                </div>
                     @endif
-                </div>
-            </div>
-        </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    </div>
     @else
         <div class="text-center py-16 bg-background border border-neutral rounded-xl">
             <x-ri-shield-line class="size-20 mx-auto mb-4 opacity-30" />
             <h3 class="text-xl font-semibold mb-2">Firewall is Disabled</h3>
             <p class="text-base/60 mb-6">Enable the firewall to start protecting your virtual machine</p>
-        </div>
+                                                            </div>
     @endif
 
     {{-- Rule Form Modal --}}
@@ -1114,14 +1034,14 @@
 
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         {{-- Action --}}
-                        <div>
+                                                                    <div>
                             <label class="block text-sm font-medium mb-2">Action</label>
                             <select wire:model="ruleAction" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background text-sm">
                                 <option value="ACCEPT">Accept</option>
                                 <option value="REJECT">Reject</option>
                                 <option value="DROP">Drop</option>
                             </select>
-                        </div>
+                                                                            </div>
 
                         {{-- Type --}}
                         <div>
@@ -1130,7 +1050,7 @@
                                 <option value="in">Incoming</option>
                                 <option value="out">Outgoing</option>
                             </select>
-                        </div>
+                                                                        </div>
 
                         {{-- Macro --}}
                         <div>
@@ -1141,7 +1061,7 @@
                                 @endforeach
                             </select>
                             <p class="text-xs text-base/60 mt-1">Select a macro or leave as "None" for custom rules</p>
-                        </div>
+                                                                        </div>
 
                         {{-- Interface --}}
                         <div>
@@ -1152,14 +1072,14 @@
                                     <option value="{{ $adapter['name'] }}">{{ $adapter['name'] }} ({{ ucfirst($adapter['model'] ?? 'Unknown') }})</option>
                                 @endforeach
                             </select>
-                        </div>
+                                                                    </div>
 
                         {{-- Source --}}
                         <div>
                             <label class="block text-sm font-medium mb-2">Source IP/CIDR</label>
                             <input type="text" wire:model="ruleSource" placeholder="e.g., 192.168.1.0/24 or leave empty for any" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background text-sm">
                             <p class="text-xs text-base/60 mt-1">Can use alias names or leave empty for any source</p>
-                        </div>
+                                                                    </div>
 
                         {{-- Destination --}}
                         <div>
@@ -1173,7 +1093,7 @@
                                     <option value="{{ $alias['name'] }}">{{ $alias['name'] }} (Alias)</option>
                                 @endforeach
                             </select>
-                        </div>
+                                                            </div>
 
                         {{-- Protocol --}}
                         <div>
@@ -1185,19 +1105,19 @@
                                 <option value="icmp">ICMP</option>
                                 <option value="igmp">IGMP</option>
                             </select>
-                        </div>
-
+                                                        </div>
+                                                        
                         {{-- Destination Port --}}
                         <div>
                             <label class="block text-sm font-medium mb-2">Destination Port</label>
                             <input type="text" wire:model="ruleDport" placeholder="e.g., 80, 443, 1000:2000" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background text-sm">
-                        </div>
+                                                        </div>
 
                         {{-- Source Port --}}
                         <div>
                             <label class="block text-sm font-medium mb-2">Source Port (Optional)</label>
                             <input type="text" wire:model="ruleSport" placeholder="e.g., 80, 443" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background text-sm">
-                        </div>
+                                                    </div>
 
                         {{-- Log Level --}}
                         <div>
@@ -1213,13 +1133,13 @@
                                 <option value="info">Info</option>
                                 <option value="debug">Debug</option>
                             </select>
-                        </div>
+                                                </div>
 
                         {{-- Comment --}}
                         <div class="md:col-span-2">
                             <label class="block text-sm font-medium mb-2">Comment</label>
                             <input type="text" wire:model="ruleComment" placeholder="Optional description" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background text-sm">
-                        </div>
+                                            </div>
 
                         {{-- Enable --}}
                         <div class="md:col-span-2 flex items-center gap-2">
@@ -1235,7 +1155,7 @@
                         <button type="button" wire:click="saveRule" wire:loading.attr="disabled" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium">
                             <span wire:loading.remove wire:target="saveRule">Save Rule</span>
                             <span wire:loading wire:target="saveRule">Saving...</span>
-                        </button>
+                            </button>
                     </div>
                 </div>
             </div>
@@ -1249,7 +1169,7 @@
             <div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                 <button wire:click="cancelDeleteRule" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
                     <x-ri-close-line class="size-5" />
-                </button>
+                        </button>
                 <div class="flex items-start gap-4 mb-4">
                     <div class="w-12 h-12 rounded-full bg-error/10 flex items-center justify-center flex-shrink-0">
                         <x-ri-delete-bin-fill class="size-6 text-error" />
@@ -1261,9 +1181,9 @@
                             <div><span class="text-base/60">Action:</span> <span class="font-semibold">{{ $ruleToDelete['action'] ?? '-' }}</span></div>
                             <div><span class="text-base/60">Source:</span> <span class="font-mono text-xs">{{ $ruleToDelete['source'] ?? 'Any' }}</span></div>
                             <div><span class="text-base/60">Destination:</span> <span class="font-mono text-xs">{{ $ruleToDelete['dest'] ?? 'Any' }}</span></div>
-                        </div>
                     </div>
                 </div>
+                </div>
                 <div style="display: flex; gap: 12px; justify-content: flex-end;">
                     <button wire:click="cancelDeleteRule" 
                             type="button"
@@ -1277,9 +1197,9 @@
                         <span wire:loading.remove wire:target="deleteRule">Delete Rule</span>
                         <span wire:loading wire:target="deleteRule">Deleting...</span>
                     </button>
-                </div>
-            </div>
         </div>
+        </div>
+</div>
     @endif
 
     {{-- Alias Form Modal --}}
@@ -1318,9 +1238,9 @@
                         <span wire:loading.remove wire:target="saveAlias">Save Alias</span>
                         <span wire:loading wire:target="saveAlias">Saving...</span>
                     </button>
-                </div>
-            </div>
         </div>
+    </div>
+</div>
     @endif
 
     {{-- Delete Alias Modal --}}
@@ -1328,8 +1248,8 @@
         <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
             <div class="relative w-full max-w-md bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                 <button wire:click="cancelDeleteAlias" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                    <x-ri-close-line class="size-5" />
-                </button>
+                <x-ri-close-line class="size-5" />
+            </button>
                 <div class="flex items-start gap-4 mb-4">
                     <div class="w-12 h-12 rounded-full bg-error/10 flex items-center justify-center flex-shrink-0">
                         <x-ri-delete-bin-fill class="size-6 text-error" />
@@ -1338,8 +1258,8 @@
                         <h3 class="text-xl font-bold mb-2">Delete IP Alias</h3>
                         <p class="text-sm text-base/70 mb-2">Delete alias "<span class="font-semibold">{{ $deletingAliasName }}</span>"?</p>
                         <p class="text-xs text-base/60">This may affect firewall rules using this alias.</p>
-                    </div>
                 </div>
+            </div>
                 <div class="flex gap-3 justify-end">
                     <button wire:click="cancelDeleteAlias" class="px-4 py-2 bg-background border border-neutral rounded-lg hover:bg-background-secondary transition-colors text-sm font-medium">
                         Cancel
@@ -1349,17 +1269,17 @@
                         <span wire:loading wire:target="deleteAlias">Deleting...</span>
                     </button>
                 </div>
-            </div>
         </div>
-    @endif
+    </div>
+@endif
 
     {{-- IPSet Form Modal --}}
     @if($showIPSetForm)
         <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
             <div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                 <button wire:click="cancelIPSetForm" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                    <x-ri-close-line class="size-5" />
-                </button>
+                <x-ri-close-line class="size-5" />
+            </button>
                 <h3 class="text-xl font-semibold mb-6">Create IP Set</h3>
 
                 <div class="space-y-4">
@@ -1377,7 +1297,7 @@
                     <div class="p-3 bg-info/10 border border-info/30 rounded-lg">
                         <p class="text-xs text-info/90">After creating the IPSet, you can add IP addresses and CIDR ranges to it.</p>
                     </div>
-                </div>
+                    </div>
 
                 <div class="flex gap-3 justify-end mt-6 pt-4 border-t border-neutral/20">
                     <button wire:click="cancelIPSetForm" class="px-4 py-2 bg-background border border-neutral rounded-lg hover:bg-background-secondary transition-colors text-sm font-medium">
@@ -1387,8 +1307,8 @@
                         <span wire:loading.remove wire:target="saveIPSet">Create IPSet</span>
                         <span wire:loading wire:target="saveIPSet">Creating...</span>
                     </button>
-                </div>
-            </div>
+                    </div>
+                    </div>
         </div>
     @endif
 
@@ -1408,7 +1328,7 @@
                         <p class="text-sm text-base/70 mb-2">Delete IPSet "<span class="font-semibold">{{ $deletingIPSetName }}</span>"?</p>
                         <p class="text-xs text-base/60">All members will be removed and rules using this IPSet may be affected.</p>
                     </div>
-                </div>
+                    </div>
                 <div class="flex gap-3 justify-end">
                     <button wire:click="cancelDeleteIPSet" class="px-4 py-2 bg-background border border-neutral rounded-lg hover:bg-background-secondary transition-colors text-sm font-medium">
                         Cancel
@@ -1418,17 +1338,17 @@
                         <span wire:loading wire:target="deleteIPSet">Deleting...</span>
                     </button>
                 </div>
-            </div>
         </div>
-    @endif
+    </div>
+@endif
 
     {{-- IPSet Member Form Modal --}}
     @if($showIPSetMemberForm && $selectedIPSetName)
         <div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
             <div class="relative w-full max-w-lg bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
                 <button wire:click="cancelIPSetMemberForm" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
-                    <x-ri-close-line class="size-5" />
-                </button>
+                <x-ri-close-line class="size-5" />
+            </button>
                 <h3 class="text-xl font-semibold mb-6">Add IP/CIDR to {{ $selectedIPSetName }}</h3>
 
                 <div class="space-y-4">
@@ -1441,16 +1361,16 @@
                     <div>
                         <label class="block text-sm font-medium mb-2">Comment (Optional)</label>
                         <input type="text" wire:model="memberComment" placeholder="Description" class="w-full px-3 py-2 border border-neutral rounded-lg bg-background text-sm">
-                    </div>
+                                    </div>
 
-                    <div class="flex items-center gap-2">
+                                        <div class="flex items-center gap-2">
                         <input type="checkbox" wire:model="memberNomatch" id="memberNomatch" class="rounded border-neutral">
                         <label for="memberNomatch" class="text-sm">
                             <span class="font-medium">No Match</span>
                             <span class="text-base/60">(Exclude this IP from the set)</span>
                         </label>
-                    </div>
-                </div>
+                                        </div>
+                                        </div>
 
                 <div class="flex gap-3 justify-end mt-6 pt-4 border-t border-neutral/20">
                     <button wire:click="cancelIPSetMemberForm" class="px-4 py-2 bg-background border border-neutral rounded-lg hover:bg-background-secondary transition-colors text-sm font-medium">
@@ -1460,10 +1380,10 @@
                         <span wire:loading.remove wire:target="saveIPSetMember">Add Member</span>
                         <span wire:loading wire:target="saveIPSetMember">Adding...</span>
                     </button>
-                </div>
-            </div>
-        </div>
-    @endif
+                                        </div>
+                                        </div>
+                                        </div>
+                                    @endif
 
     {{-- Delete IPSet Member Modal --}}
     @if($showDeleteIPSetMemberModal && $deletingMemberCidr)
@@ -1475,12 +1395,12 @@
                 <div class="flex items-start gap-4 mb-4">
                     <div class="w-12 h-12 rounded-full bg-error/10 flex items-center justify-center flex-shrink-0">
                         <x-ri-close-circle-fill class="size-6 text-error" />
-                    </div>
+                                </div>
                     <div>
                         <h3 class="text-xl font-bold mb-2">Remove Member</h3>
                         <p class="text-sm text-base/70 mb-2">Remove "<span class="font-mono font-semibold">{{ $deletingMemberCidr }}</span>" from {{ $selectedIPSetName }}?</p>
+                            </div>
                     </div>
-                </div>
                 <div class="flex gap-3 justify-end">
                     <button wire:click="cancelDeleteIPSetMember" class="px-4 py-2 bg-background border border-neutral rounded-lg hover:bg-background-secondary transition-colors text-sm font-medium">
                         Cancel
@@ -1490,9 +1410,9 @@
                         <span wire:loading wire:target="deleteIPSetMember">Removing...</span>
                     </button>
                 </div>
-            </div>
         </div>
-    @endif
+    </div>
+@endif
 </div>
 
 @script