Show device country next to its IP address, resolved via ip-api.com

static/index.html

@@ -180,6 +180,11 @@
         font-weight: 500;
         min-width: 0;
     }
+    .device-ip {
+        font-size: 0.75rem;
+        font-weight: 400;
+        color: #9ca3af;
+    }
     .device-status {
         color: var(--success);
         font-size: 0.95rem;
@@ -2618,10 +2623,14 @@
                     status2 = '#ffe6e6'
                 }
 
+                var ipAddress = dataJSON[i].ip_address || '';
+                var ipCountry = dataJSON[i].ip_country || '';
+                var ipLine = ipAddress ? `<div class="device-ip text-truncate">${ipAddress}${ipCountry ? ' &middot; ' + ipCountry : ''}</div>` : '';
+
                 var activeClass = (selectedDeviceId && selectedDeviceId === dataJSON[i].id_device) ? 'active' : '';
                 html += `<div class="device-card ${activeClass}" id="btn_select_device_${dataJSON[i].id_device}" data-param1="${dataJSON[i].id_device}" data-param2="${dataJSON[i].name}" data-param3="${dataJSON[i].sid}" data-param4="${dataJSON[i].vpn_status}">
                             <div class="device-card-header">
-                                <div class="device-name text-truncate">${dataJSON[i].name}</div>
+                                <div class="device-name text-truncate">${dataJSON[i].name}${ipLine}</div>
                                 <div class="device-actions">
                                     <div class="device-status">${status}</div>
                                     <div>${vpn_status_icon}</div>