{% if profiles %}
<div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-subtle">
            <tr>
                <th class="px-3 py-2 text-left text-xs font-medium text-description uppercase tracking-wider">Name</th>
                <th class="px-2 py-2 text-left text-xs font-medium text-description uppercase tracking-wider">Type</th>
                <th class="px-2 py-2 text-left text-xs font-medium text-description uppercase tracking-wider">Agent</th>
                <th class="px-2 py-2 text-left text-xs font-medium text-description uppercase tracking-wider">InUse</th>
                <th class="px-2 py-2 text-left text-xs font-medium text-description uppercase tracking-wider">RedEdr</th>
                <th class="px-2 py-2 text-left text-xs font-medium text-description uppercase tracking-wider">Info</th>
                <th class="px-2 py-2 text-left text-xs font-medium text-description uppercase tracking-wider">Comment</th>
                <th class="px-2 py-2 text-left text-xs font-medium text-description uppercase tracking-wider">Pwd</th>
                <th class="px-2 py-2 text-left text-xs font-medium text-description uppercase tracking-wider">Actions</th>
            </tr>
        </thead>
        <tbody class="bg-table divide-y divide-dark">
            {% for profile_name, profile in profiles.items() %}
            <tr class="hover:bg-table-hover">
                <td class="px-3 py-2">
                    <div class="text-sm font-medium text-heading">{{ profile_name }}</div>
                </td>
                <td class="px-2 py-2">
                    <div class="text-xs text-heading">{{ profile.connector }}</div>
                </td>
                <td class="px-2 py-2">
                    <div class="flex items-center gap-1">
                        {% if IS_AUTHENTICATED %}
                            <span class="text-xs text-heading">{{ profile.vm_ip or 'N/A' }}:{{ profile.port or 'N/A' }}</span>
                        {% else %}
                            <span class="text-xs text-muted"></span>
                        {% endif %}
                        {% if profile.agent_alive %}
                            <svg class="w-3 h-3 text-green-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" title="Reachable">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                        {% else %}
                            <svg class="w-3 h-3 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" title="Not reachable">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                            </svg>
                        {% endif %}
                    </div>
                </td>
                <td class="px-2 py-2">
                    <div class="text-xs text-heading">
                        {% if profile.agent_inuse == None %}
                            &nbsp;
                        {% elif profile.agent_inuse == True %}
                            Yes
                        {% elif profile.agent_inuse == False %}
                            No
                        {% endif %}
                    </div>
                </td>
                <td class="px-2 py-2">
                    <div class="flex items-center gap-1">
                        {% if profile.rededr_port %}
                            {% if IS_AUTHENTICATED %}
                                <span class="text-xs text-heading">{{ profile.rededr_port }}</span>
                            {% else %}
                                <span class="text-xs text-muted"></span>
                            {% endif %}
                            {% if profile.rededr_alive == None %}
                                &nbsp;
                            {% elif profile.rededr_alive == True %}
                                <svg class="w-3 h-3 text-green-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" title="Reachable">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>
                            {% elif profile.rededr_alive == False %}
                                <svg class="w-3 h-3 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" title="Not reachable">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                </svg>
                            {% endif %}
                        {% endif %}
                    </div>
                </td>
                <td class="px-2 py-2">
                    <div class="text-xs text-heading">
                        {% if profile.default_drop_path %}
                            <div class="text-xs text-description">{{ profile.default_drop_path }}</div>
                        {% endif %}
                    </div>
                </td>
                <td class="px-2 py-2">
                    {% if profile.comment %}
                        <div class="text-xs text-heading max-w-[150px] truncate" title="{{ profile.comment }}">{{ profile.comment }}</div>
                    {% else %}
                        <span class="text-muted text-xs">-</span>
                    {% endif %}
                </td>
                <td class="px-2 py-2">
                    {% if profile.require_password %}
                        <span class="text-muted text-xs">Yes</span>
                    {% else %}
                        <div class="text-xs text-heading">No</div>
                    {% endif %}
                </td>
                <td class="px-2 py-2 text-sm font-medium">
                    <div class="flex space-x-1">
                        <!-- View Profile -->
                        <a 
                            href="/profiles/view/{{ profile.id }}"
                            class="text-blue-600 hover:text-blue-900" 
                            title="View Profile">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                            </svg>
                        </a>

                        <!-- Edit Profile -->
                        <a 
                            data-auth-required
                            href="/profiles/edit/{{ profile.id }}"
                            class="link-info hover:underline" 
                            title="Edit Profile">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                            </svg>
                        </a>

                        <!-- Delete Profile -->
                        <button 
                            data-auth-required
                            onclick="deleteProfile({{ profile.id }}, '{{ profile_name }}')"
                            class="text-red-600 hover:text-red-900" 
                            title="Delete Profile">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                        </button>

                        <!-- DetonatorAgent: Release Lock -->
                        {% if profile.agent_inuse %}
                            <button 
                                data-auth-required
                                onclick="releaseLock({{ profile.id }}, '{{ profile_name }}')"
                                class="text-orange-600 hover:text-orange-900" 
                                title="Release Lock">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path>
                                </svg>
                            </button>
                        {% endif %}

                        {% if profile.connector == "Proxmox" %}
                            <!-- Proxmox: Reboot VM -->
                            <button 
                                data-auth-required
                                onclick="rebootProfile({{ profile.id }}, '{{ profile_name }}')"
                                class="text-purple-600 hover:text-purple-900" 
                                title="Reboot VM">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                                </svg>
                            </button>

                            <!-- Proxmox: Revert to Snapshot -->
                            <button 
                                data-auth-required
                                onclick="revertProfile({{ profile.id }}, '{{ profile_name }}')"
                                class="text-indigo-600 hover:text-indigo-900" 
                                title="Revert to Snapshot">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
                                </svg>
                            </button>
                        {% endif %}
                        
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="text-center py-12">
    <div class="text-muted text-6xl mb-4">🛡️</div>
    <h3 class="text-lg font-medium text-heading mb-2">No Profiles Found</h3>
    <p class="text-description">No profiles are currently configured.</p>
</div>
{% endif %}